HTML网页自适应以及清除浮动

自适应

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

 

1)宽度自适应
    子元素的宽度自动适应父元素的宽度
    子元素宽度设置为100%。（块元素宽度默认值为auto）
 2）高度自适应
    元素高度自适应窗口高度。设置方法：html，body{height：100%}（写一个满屏页面）
    子元素自适应父元素高度：height：100%；

3）元素具备最小高度的自适应
属性：最小高度；（ie6浏览器不识别该属性）
min-height什么时候用？当元素内容的高度不确定的时候用min-height
！important关键词过滤器，写在属性值的后面，加上此单词，属性具有最高级的优先级，但是ie6不能识别此关键字。

清除浮动

bug：英文臭虫（还有个小故事），是编程过程中遇到的问题

hack：问题的解决方法

    浮动元素父元素高度自适应（父元素不写高度时，所有子元素写了浮动后，父元素会发生高度塌陷）
    hack1：给父元素添加声明overflow:hidden;(缺点：当子元素有定位设置，定位到父元素外面时，不希望溢出父元素部分隐藏时，此方法就不行了)
    hack2：在最后一个浮动元素下方添加空div，并给该元素添加声明：clear:both;height:0;overflow:hidden;(确定：在html结构文档中会形成很多冗余代码)
    hack3:万能清除浮动方法
    父元素选择符：after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

after和before用法

1）:after与content属性一起使用，定义在对象后的内容
如：div:after{content:url(logo.jpg);}    div:after{content:"文本内容";}
2）：before与content属性一起使用，定义在对象前的内容。如：div:before{content:"在其前面加文本内容";}
3）:first-letter：定义对象内第一个字符的样式。
4）:first-line 定义对象内第一行的样式。
说明：（伪类选择器只能用于块级元素）（ie6及以下版本不支持伪对象选择符。）