前端学习第11天：高度自适应

第11天

1.高度自适应

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

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

(1)宽度自适应

​ 元素宽度设置为100%。（块元素宽度默认为100%）width:100%;

(2) 高度自适应

​ 元素{height:auto;}/高度不写

2.最小高度

A.height属性在IE6里就类似min-height作用。

B.IE6及以下版本不识别该组属性。

3.过滤器

3.1 下划线（_）属性过滤器

​ 当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。

​ 语法：选择符{_属性：属性值；}

3.2 !important关键字过滤器

​ 它表示所附加的声明具有最高优先级.

​ 语法：选择符{属性：属性值!important;}

4.最小高度 和 高度自适应 引发的兼容问题

​ 元素具备最小高度自适应.

min-height属性：最小高度；(IE6浏览器不识别该属性)

兼容元素具备最小高度自适应的方法：

hack1:min-height:value; _height:value;

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

5.伪对象选择符

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以下版本浏览器不支持伪对象选择符。

注：一个冒号叫伪类选择器，两个冒号叫伪对象选择器。

6.自适应窗口(一屏页面的书写)

​ 元素宽高度自适应窗口高度

​ 设置方法：html,body{width:100%;height:100%;}