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的共同点:
都可以设置元素显示或者隐藏的属性;