css盒子模型

CSS盒子模型

 

 一个区块元素所占的空间总大小：

X轴：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Y轴：margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

(1)两个相邻元素若都指定了间距，那么间距会进行合并，合并后的值是二者指定的间距中的较大值。

(2)outline、box-shadow不会占用页面空间，故也不计入盒子模型的计算。

(3)float会对间距的合并产生影响

(4)区块若想在父元素中水平居中，margin: 0  auto;由浏览器自动计算左右间距——平均分配

(5)为了屏蔽浏览器默认值造成的兼容性问题，页面布局时可以添加 *{margin:0; padding:0}