盒子模型要注意的问题

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负责内容的视觉位置。

转载于:https://www.cnblogs.com/samwu/archive/2012/07/23/2604368.html