CSS盒子模型

html-css023

CSS盒子模型,第1张

在“CSS盒子模型”理论中，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。

每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。

记住，是所有的元素都可以看出一个盒子！

下图为一个CSS盒子模型的内部结构：

目前盒子模型分为两种。（1）w3c标准盒子模型 （2）ie盒模型

盒子模型分为 内容content + 内边距padding + 边框border + 外边距margin 四部分。

w3c标准盒子模型 与 ie盒模型 的区别：

标准盒子模型的 宽度width 和 高度 height 只包含 content内容部分，不包含padding内边距 和 边框border。

ie盒子模型 宽度width 和 高度 height 包含 内容+内边距+边框三部分。