从零开始学习前端开发 — 7、CSS宽高自适应
一、宽度自适应
语法:width:100%;
注: a)块状元素的默认宽度为100%
b) 当给元素设置宽度为100%时,继承父元素的宽度
c) 通常使用宽度自适应实现通栏效果
二、高度自适应
语法:height:auto;(等同于不给元素设置高度)
三、最小高度,最大高度,最小宽度,最大宽度
1.最小高度
语法: min-height:数值+单位;
注:IE6不识别min-height属性,解决方案如下:
方案一: min-height:100px; _height:100px;
方案二: min-height:100px; height:auto!important; height:100px;
2.最大高度
语法: max-height:数值+单位;
3.最小宽度
语法:min-width:数值+单位;
注:当给块元素设置min-width属性时,需要将块元素转换为display:inline-block;
4.最大宽度
语法:max-width:数值+单位;
注:以上四个属性在IE6及以下版本浏览器中不识别
四、高度塌陷问题(常见的几种清除浮动的方法)
描述:当父元素高度自适应,子元素设置了float,导致父元素高度为0,称为高度塌陷问题
解决方案如下:
1.方案一
给父元素一个固定的高度
缺点:不能实现高度自适应,不够灵活(不推荐使用)
2.方案二
给父元素设置overflow:hidden;
优点:简单,父元素可以高度自适应
缺点:当子元素有定位属性时,由于父元素设置了overflow:hidden;父元素容器之外的部分会被隐藏
3.方案三
在子元素的末尾添加一个空div,并设置样式:
.clear{clear:both;height:0; overflow:hidden;}
注:a)此div只为解决高度塌陷问题,不需要在浏览器中显示,所以设置height:0;
b)IE6不能识别小于10px的容器,所以要加overflow:hidden;来兼容IE6
优点:所有浏览器都支持
缺点:在网页中添加无意义的一个div,会造成代码冗余
4.方案四
通过伪元素的方式解决高度塌陷问题(万能清除浮动法)
父元素:after{
content:".";
display:block;
height:0;
overflow:hidden;
clear:both;
visibility:hidden;
}
注:伪元素的语法
选择器:before{content:"";} 在子元素之前去添加一个伪元素
选择器:after{content:"";} 在子元素之后去添加一个伪元素
伪元素是内联元素
五、元素隐藏不可见的两种方式(display:none;和visibility:hidden的区别)
1.display:none;
元素被隐藏,空间不保留;(看不见,摸不着)
2.visibility:hidden;
元素被隐藏,空间保留;(看不见,摸得着)
注:display:none;和overflow:hidden;的区别
display:none让元素完全隐藏不显示,overflow:hidden;是让元素溢出部分隐藏不可见,没有溢出部分正常显示
六、窗口高度自适应
首先,要设置窗口的高度自适应
html,body{height:100%;}
然后,给元素设置
div{height:100%;}
注:窗口高度自适应适用于屏幕窗口没有内容body为0或内容不满一屏的情况下使用
七、内联元素水平居中设置
如果被设置水平居中的元素是文本,图片等内联元素时,通过给父元素设置text-align:center;实现
八、定宽块状元素水平居中设置
满足定宽,块状元素两个条件的元素,将左右margin设置为auto即可实现元素在水平方向上居中显示
注:a)当给元素设置了float后,左右为auto将会失效
b) 当给元素设置了absolute和fixed后,左右auto将会失效
九、不定宽块状元素水平居中设置
1.给父元素设置以下样式
a)给父元素设置display:table; 将元素转换为表格形式
b) 给父元素设置左右margin为auto
2.给父元素设置:text-align:center;
给子元素设置: display:inline-block;
十、元素在屏幕窗口水平垂直都居中
1.定宽高元素在屏幕窗口水平垂直都居中
元素{
width:value;
height:value;
position:fixed;
left:50%;
top:50%;
margin-left:-width/2+"px";
margin-top:-height/2+"px";
}
2.不定宽高元素在屏幕窗口水平垂直都居中
元素{
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
十一、不定宽高子元素在父元素中水平垂直都居中
1.方案一(高度须给定,否则垂直居中高度拉伸充满父元素)
父元素{position:relative;}
子元素{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
2.方案二
父元素{
display:table-cell;
text-align:center;
vertical-align:middle;
}
注:display:table-cell;将元素转换为表格单元格形式
3.子元素转换成行内块状元素宽高自适应,子元素同级设置高度充满父元素的参照物 且行内块状元素。同级子元素通过设置vertical-align:middle;垂直居中。兼容IE8及更高版本。
从零开始学习前端开发 — 7、CSS宽高自适应的更多相关文章
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- 从零开始学习前端开发 — 3、CSS盒模型
★ css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 ...
- 从零开始学习前端开发 — 14、CSS3变形基础
一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...
- 从零开始学习前端开发 — 12、CSS3弹性布局
一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...
- css 宽高自适应的div 元素 如何居中 垂直居中
在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class=" ...
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...
- 从零开始学习前端开发 — 6、CSS布局模型
一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...
- 从零开始学习前端开发 — 11、CSS3选择器
一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择 ...
随机推荐
- qt中线程的使用方法
QT中使用线程可以提高工作效率. 要使用线程要经过一下四个步骤: (1)先创建一个c++ class文件,记得继承Thread,创建步骤如下: a.第一步 b.第二步 (2)自定义一个run函数,以后 ...
- 【转】教你开发jQuery插件
阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文:http://www.cnblo ...
- JavaScript 内存相关知识
一.内存基本概念 1.1.生命周期 不管什么程序语言,内存生命周期基本是一致的: 分配你所需要的内存 var n = 123; // 给数值变量分配内存 var s = "azerty&qu ...
- php mysql语句预编译(preparestatement)
预处理语句用于执行多个相同的 SQL 语句,并且执行效率更高. 预处理语句的工作原理如下: 预处理:创建 SQL 语句模板并发送到数据库.预留的值使用参数 "?" 标记 .例如: ...
- Android WebView默认GONE出现的问题记录
前段时间重构一批相似度80%以上的项目[真搞不懂前人们是怎么忍受十几个类似的应用一直CVU的,冗余代码和资源达到40%以上] 其中需要抽出一个公共的带WebView的Activity基类,由于脑残测试 ...
- 15.5 自学Zabbix之路15.5 Zabbix数据库表结构简单解析-其他 表
点击返回:自学Zabbix之路 自学Zabbix之路15.5 Zabbix数据库表结构简单解析-其他 表 1. Actions表 actions表记录了当触发器触发时,需要采用的动作. 2.Aler ...
- python3之模块collections
1.计数器(counter) counter是对字典的方法,用来追踪值的出现次数:具备字典的所有功能和自己的功能. >>> from collections import Count ...
- 使用Python实现的杨辉三角
def triangel(): print ' '*(20*3)+str(1) #定义起始两行 print ' '*(19*3)+str(1)+' '*5+str(1) for i in range( ...
- 跟我一起读postgresql源码(九)——Executor(查询执行模块之——Scan节点(上))
从前面介绍的可优化语句处理相关的背景知识.实现思想和执行流程,不难发现可优化语句执行的核心内容是对于各种计划节点的处理,由于使用了节点表示.递归调用.统一接口等设计,计划节点的功能相对独立.代码总体流 ...
- python中的深拷贝和浅拷贝理解
在python中,对象赋值实际上是对象的引用.当创建一个对象,然后把它赋给另一个变量的时候,python并没有拷贝这个对象,而只是拷贝了这个对象的引用.以下分两个思路来分别理解浅拷贝和深拷贝: 利用切 ...