css学习

[whitejy]

css学习

[whitejy]

二、盒子模型
1、css盒子模型 ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
2、两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。（普通文档流）
3、标准盒模型：只包含内容宽度。
IE盒模型：包含border+padding+内容；
4、可以通过box-sizing设置，也可以直接在html文件中设置！DocType来默认设置文档为标准盒模型。

[whitejy]

三、清除浮动
1、对父级元素设置适当的高度，可以撑开父级元素；
2、在浮动后面增加一个空元素，设置样式为clear：both；

<div class="divcss5"> 
    <div class="divcss5-left">left浮动</div> 
    <div class="divcss5-right">right浮动</div> 
    <div class="clear"></div> 
</div> 

缺点：margin不生效
3、父级div定义 overflow:hidden或auto，需要设置宽度或者zoom：1（IE浏览器专有）
为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。

4、父元素里面定义伪类after
after里面设置clear：both，content为空。设置zoom为1可以兼容IE6、7