014（宽高自适应）
1.宽高自适应的概念和使用
网页布局中经常要定义元素的宽和高。但很多时候我们==希望元素的大小能够根据窗口或子元素==自动调整，这就是自适应。
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
(1)宽度自适应
元素宽度设置为100%。（块元素宽度默认为100%） width:100%;
(2) 高度自适应
元素{height:auto;}/高度不写
2.最小宽度、最小高度、最大宽度、最大高度
注：height属性在IE6里就类似min-height作用。
m i n − h e i g h t （ 最 小 高 度 ） \color{red}{min-height（最小高度）} min−height（最小高度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type=text/css>
*{
margin:0;
padding:0;
}
div{
width:100px;
background:gold;
float:left;
margin:100px;
}
.div2{
min-height:100px;
}
.div1{
height:10px;
}
</style>
</head>
<body>
<div class="div1">啊手动阀手动阀手动阀阀手动阀啊手动阀手动阀手动阀阀手动阀啊手动阀手动阀手动阀阀手动阀啊手动阀手动阀手动阀阀手动阀</div>
<div class="div2">啊手动阀手动阀手动阀阀手动阀啊手动阀手动阀手动阀阀手动阀啊手动阀手动阀手动阀阀手动阀手动阀手动阀</div>
</body>
</html>
m a x − h e i g h t ( 最 大 高 度 ) \color{red}{max-height(最大高度)} max−height(最大高度)
m i n − w i d t h ( 最 小 宽 度 ) \color{red}{min-width(最小宽度)} min−width(最小宽度)
m a x − w i d t h ( 最 大 宽 度 ) \color{red}{max-width(最大宽度)} max−width(最大宽度)
注：IE6及以下版本不识别该组属性。
3.过滤器的使用
1）下划线属性过滤器
当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。
语法：选择符{_属性：属性值；}
2）!important关键字过滤器
它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，我们可以利用IE6的这个Bug作为过滤器来兼容ＩＥ６和其它标准浏览器。
语法：选择符{属性：属性值!important;}
3)其他过滤器
\9、：IE浏览器组 **语法：**选择符{属性：属性值\9;}不包括IE5
\0:IE8 包括IE8 **语法：**选择符{属性：属性值\0;}只有IE8及以上浏览器起作用
+、*：ie7 IE7 以下(包括IE7) **语法：**选择符{+属性：属性值;}
：root选择器 除了IE8及更早的浏览器 语法：:root 选择符{属性：属性值;}
4.最小高度和高度自适应引发的兼容问题
元 素 具 备 最 小 高 度 的 自 适 应 \color{blue}{元素具备最小高度的自适应} 元素具备最小高度的自适应
min-height属性：最小高度；(IE6浏览器不识别该属性)
兼容元素具备最小高度自适应的方法：
hack1:min-height:value; _height:value;
hack2:min-height:value; height:auto !important; height:value;(建议使用)(要按顺序写)
浮 动 元 素 父 元 素 高 度 自 适 应 （ 高 度 塌 陷 ） \color{red}{浮动元素父元素高度自适应（高度塌陷）} 浮动元素父元素高度自适应（高度塌陷）
hack1：给浮动元素的父元素添加声明overflow:hidden;（溢出属性，不能和定位一起使用）
hack2:在浮动元素下方添加空div,并给该元素添加声明：div{clear:both; height:0; overflow:hidden;}
hack3:万能清除浮动法
E:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}（伪元素选择符）
E{zoom:1}
I E 8 以 上 和 非 I E 浏 览 器 才 支 持 : a f t e r , z o o m ( I E 专 有 属 性 ) 可 解 决 i e 6 , i e 7 浮 动 问 题 \color{green}{IE8以上和非IE浏览器才支持:after,zoom(IE专有属性)可解决ie6,ie7浮动问题} IE8以上和非IE浏览器才支持:after,zoom(IE专有属性)可解决ie6,ie7浮动问题
v i s i b i l i t y : h i d d e n 和 d i s p l a y : n o n e ; 的 区 别 ？ \color{green}{visibility:hidden和display:none;的区别？} visibility:hidden和display:none;的区别？
visibility:hidden/visible;隐藏/可见
visibility:hidden;和display:none;相同点都是隐藏显示的区域
visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所 占的空间没有改变，等于留出了一块空白区域，而display:none属性会使这个对象彻底消失。
5.伪对象选择符
:after 与content属性一起使用，定义在对象内最后的内容
:before 与content属性一起使用，定义在对象前的内容
:first-letter 定义对象内第一个文本的样式，注：该伪元素只能用于块元素
:first-line 定义对象内第一行文本的样式，注：该伪元素只能用于块元素。
对象内最后的内容
:before 与content属性一起使用，定义在对象前的内容
:first-letter 定义对象内第一个文本的样式，注：该伪元素只能用于块元素
:first-line 定义对象内第一行文本的样式，注：该伪元素只能用于块元素。
Ie6及以下版本浏览器不支持伪对象选择符
扫一扫
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
