宽高自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
自适应的优点： 元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
一、宽高自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
（1）宽度自适应 元素宽度设置为100%。（块元素宽度默认为100%）
元素脱离文档流（浮动或绝对定位）可使元素自适应内容宽度
（2）高度自适应 元素的高度自适应： 设置如： div {height : auto;}
窗口的高度自适应：
设置：body，html{height：100%；} div{height：30%；}
min-height（最小高度）
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)
!important最高权重关键字过滤器 它表示所附加的声明具有最高优先级的意思。被浏览器优先显示。（IE6不识别此写法） 语法：选择符{属性：属性值!important;}
高度塌陷
hack1：给父元素添加声明overflow:hidden;
- 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
- 优点：简单，代码少，浏览器支持好
- 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
- 建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
hack2: 给父元素加height
- 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
- 优点：简单，代码少，容易掌握
- 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
- 建议：不推荐使用，只建议高度固定的布局时使用
hack3: 在浮动元素下方添加空div,并给该元素添加 声明：div{clear:both; height:0; overflow:hidden;}
hack4:万能清除浮动法
缺点：代码多，不易理解，不适合初学者理解原理。
优点：支持性好，各大网站都在用万能清除浮动
伪对象选择符
1）、::after: 与content属性一起使用，定义在对象后的内容。
语法：选择符:：after{content:”文字”;} 选择符:：after{content:url(图片路径)；}
2）、::before:与content属性一起使用,定义在对象前 的内容。
3）、::first-letter 定义对象内第一个字符的样式。
说明： *(该伪元素只能用于块级元素。)
4）、::first-line:定义对象内第一行的样式。
说明：*(该伪元素只能用于块级元素。)
*ie6以下版本浏览器不支持伪对象选择符
内容部分设置：
*visibility:hidden/隐藏
*visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置
