HTML学习笔记Day9

一、宽高自适应

　　网页布局中经常要定义元素的宽和高；但很多时候我们希望元素的大小能够根据窗口或父元素自动调整，这就是自适应，元素自适应在网页布局中非常重要，tanenggou它能够使网页显示更灵活，可以适应在不同设备、不同窗口和分辨率下显示。

　　（一）宽度自适应

　　　　1.元素宽度默认设置为100%（块元素宽度默认为100%）

　　（二）高度自适应

　　　　1.窗口高度自适应

　　　　　　设置方法：html，body{height：100%；

　　　　　　自适应元素高度：height：100%；

　　　　2.元素高度自适应

　　　　　　1）非浮动元素的父元素，高度的自适应

　　　　　　hack1：height：auto；或不写height属性

　　　　　　hack2：min-height：value；_height：value；_下划线过滤器只有IE6识别

　　　　　　hack3：min-height：200px；height：auto ！important；height：200px；

　　　　　　拓展：！important；关键字过滤器：选择符{属性：属性值 ！important；}

　　　　　　他表示所附加的声明具有最高最优先级的意思，但由于IE6及低版本浏览器不能识别他，我们可以利用IE6这个bug作为过滤器来兼容IE6和其他标准浏览器；

　　　　　　注：同时设置两个高度，优先级声明的属性要放到前面。

　　　　　　min-height（最小高度）；max-height（最大高度）；

　　　　　　min-width（最小宽度）；max-width（最大宽度）；

　　　　　　IE6不支持该组属性。

　　　　　　2）浮动元素的父元素高度自适应（高度塌陷）

　　　　　　hack1：隐藏法，给父元素添加声明overflow：hidden；

　　　　　　hack2：在浮动元素下方添加空div，并给该元素添加声明：clear：both；height：0；overflow：hidden；

　　　　　　hack3：万能清除法：给浮动元素的父元素清除浮动；

　　　　　　.box:after{content：“.”；clear：both；display：block；height：0；overflow：hidden；visibility：hidden；}

　　　　　　拓展：.clear{zoom：1；}主要用来清除IE6、7的浮动问题，他是属于IE的属性，另外还有缩放功能

　　　　3.伪元素选择符：

　　　　　　1）：after 与content属性一起使用，定义在对象后的内容；

　　　　　　2）：before 与content属性一起使用，定义在对象前的内容；

　　　　　　拓展：{content：url（图片路径）；}

　　　　　　3）：first-line 定义对象内第一行的样式

　　　　　　4）：first-letter 定义对象内第一个字符的样式

　　　　　　注：伪元素选择符只能用于块元素有效，IE6不支持

　　　　4.检索对象是否显示：visibility：hidden/visible

　　　　　　display：none/block与visibility：hidden/visible的区别：

　　　　　　display：none；在隐藏元素的同事，元素所占据的空间也一起隐藏，而visibility：hidden；在隐藏元素的同时，所占据的空间依然会保留；

　　　　　　display：none/block与visibility：hidden/visible的共同点：

　　　　　　都可以设置元素显示或者隐藏的属性；