宽度自适应
介绍:网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。
元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。
元素宽度设置为100%。(块元素宽度默认为100%)
元素具备最小高度的自适应,min-height属性:最小高度;
说明:IE6浏览器不识别该属性,height属性在IE6里就类似min-height作用。
方法一:min-height:value; _height:value;
方法二:min-height:value; height:auto!important; height:value;
min-height(最小高度)max-height(最大高度)
min-width(最小宽度)max-width(最大宽度)
注:IE6及以下版本不识别该组属性。
元素高度自适应窗口高度
自适应元素高度:
父元素:height:value;
需要自适应父元素高度的子元素:height:100%;
如:html,body{height:100%;}
需要自适应的元素:height:100%;
height:auto 是指根据块内内容自动调节高度。
height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度。
{background-size: length percentage cover contain}
Length:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
Percentage:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
Cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
Contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
浮动元素父元素高度自适应(高度塌陷)
方法一:给父元素添加声明overflow:hidden;
方法二:在浮动元素下方添加空div,并给该元素添加声明clear:both;height:0;overflow:hidden(font-size:0;)
方法三:万能清除浮动法:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}
*visibility:hidden/visible;隐藏/可见
*visibility:hidden;和display:none;的区别:
visibility:hidden;属性会使对象不可见,但该对象在网页所占的空间没有改变,等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失。
伪对象
:after:与content属性一起使用,定义在对象后的内容。如:div:after{content:url(logo.jpg);} div:after{content:"文本内容";}
:before:与content属性一起使用,定义在对象前的内容。如:div:before{content:"在其前放内容";}
:first-letter:定义对象内第一个字符的样式。说明:该伪元素只能用于块级元素。
:first-line:定义对象内第一行的样式。说明:该伪元素只能用于块级元素。
*ie6以下版本浏览器不支持伪对象选择符。