盒子模型要注意的问题

0.默认块级元素会自动向右伸展,块级元素设置width属性后,盒子所占屏幕宽度是width+padding+border+margin

1.标准DOM流里,相邻块级元素之间的竖直距离不是margin-bottom和margin-top的总和,而是两者中的较大者。

2.父子关系的盒子,子盒子的margin以父块的content作为参考。(如果子元素的高度超过父盒子的height值,IE和Firefox出现不同效果)

3.当一个盒子设置了float属性,表面它摆脱了标准流,它的弟弟盒子会取代它的位置。但是它的弟弟盒子的content会围绕整个哥哥盒子。

4.设置浮动的盒子只影响弟弟元素,不影响哥哥元素。

 

5.默认父div视觉上不包含浮动子div(如果子div全部都是浮动),要想视觉上包含它们,在浮动div后面再增加一个div,并要覆盖父div的margin,padding,border的设置。

6.absolute定位,会脱离标准流,以最近的设置为relative的祖先元素为基准。

 

x.HTML负责内容的逻辑位置,CSS负责内容的视觉位置。


posted @ 2012-07-23 08:42  草珊瑚  阅读(346)  评论(0编辑  收藏  举报