一、宽高自适应的概念和使用
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗或子元素自动调整，这就是自适应
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
(1 )宽度自适应
元素宽度设置为100%。(块元素宽度默认为100%)
width:100%;
(2)高度自适应
元素{height:auto}/高度不写
二、 最小宽度、最小高度、最大宽度、最大高度
注: height属性在IE6里就类似min-height作用。
min-height (最小高度)
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)
注: IE6及以下版本不识别该组属性。
设置最小高度(最小宽度同理)的作用是：
既要有一定高度 并且当里面超出所给高 度的时候盒子能自动撑开
三、过滤器的使用
1)下划线属性过滤器
当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及 更低版本浏览器中会继续解析这个规则。
语法：选择符{_属性:属性值; }
.box{_height:80px}
2) limportant关键字过滤器
它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器。
语法：选择符{属性:属性值 !important;}
.box{height:80px !important}
3)其他过滤器
\9: IE浏览器组
语法:选择符{属性:属性值\9;}
\0: IE8包括IE8
语法:选择符{属性:属性值\0;}只有IE8以上浏览器起作用
+ *: ie7 IE7以下(包括IE7)识别
语法:选择符{+属性:属性值;}
:root 选择器除了IE8及更早的浏览器识别
语法: :root 选择符{属性:属性值;}
四、最小高度和高度自适应引发的兼容问题
元素具备最小高度的自适应
min-height属性:最小高度; (IE6浏览器不识别该属性)
兼容元素具备最小高度自适应的方法:
hack 1:
min-height:value;
_height:value;
hack2:
min-height:value;
height:auto !important;
height:value;(建议使用 不能换顺序)
浮动元素父元素高度自适应(高度塌陷)
hack1:
给父元素添加声明
overflow:hidden; zoom: 1; (需要兼容IE6添加)
hack2:
在浮动元素下方添加空div,并给该元素添加声明:
div{clear:both; height:0; overflow:hidden;}
hack3:
万能清除浮动法给父元素(推荐使用)
.clearFloat:after{
content:"";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
.clearFloat{zoom:1}
IE8以上和非E浏览器才支持after,zoom(IE专有属性)可解决ie6,ie7浮动问题
visibiity:hidden和display:none的区别?
visibility:hidden/visible;隐藏/可见
visibility:hidden;和display:none;相同点都是隐藏显示的区域
visibility:hidden;和display:none;的区别:
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域。
display:none属性会使这个对象彻底消失。
五、自适应窗口(一屏页面的书写)
元素宽高度自适应窗口高度
设置方法:
html,body{width; 100%;height:100%}
注意：这里用的是群组选择器,html和body标签同时设置宽高100%属性
网友评论