前端基础（8）：PC端宽高自适应

一、PC自适应的概念

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口自动调整或者根据子元素自动调整，这就是pc自适应。

自适应的优点：
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和 不同分辨率下显示。

1、宽、高的自适应实现

1）.元素宽度自适应
元素宽度设置为100%。（块元素宽度默认为100%）
或者不设置宽度（width）;（宽度是父元素的宽度）

2.高度自适应

height:auto;或者不设置;（是子元素撑开父元素的高度）

1）最小高度的应用
min-height

2）元素高度自适应窗口高度
设置元素高度为100%；需添加html,body{height:100%;}

注：如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有高度。）

二、高度塌陷

浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

hack1：给父元素添加声明overflow:hidden;
hack2:在浮动元素下方添加空div,并给该元素添加声明：clear:both;height:0;overflow:hidden;
hack3:万能清除浮动法选择符:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

 visibility:hidden/visible;隐藏/可见
visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域
而 display:none属性会使这个对象彻底消失。

三、伪对象选择符(伪元素选择符)

1）、:after:与content属性一起使用，定义在对象后的内容。 如：div:after{content:url(logo.jpg);} div:after{content:“文本内容”;}

2）、:before:与content属性一起使用，定义在对象前的内容。 如：div:before{content:“在其前放内容”;}

3）、:first-letter:定义对象内第一个字符的样式。

4）、:first-line:定义对象内第一行的样式。
说明：*(该伪元素只能用于块级元素。)*ie6以下版本浏览器不支持伪对象选择符。

元素大小适应子元素大小

min-height（最小高度）
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)

注：IE6及以下版本不识别该组属性。

hack1:min-height:value; _height:value;
hack2:min-height:value;  height:auto!important;   height:value;(建议使用) 

注：height属性在IE6里就类似min-height作用。

圣杯布局

双飞翼布局
在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局 。