Css 框架模型(Box Model)

最近，想设计一个web界面，就了解 下Css 盒子模型。

Css盒子模型有什么用处吗？Css 框架模型（Box Model)主要是规定元素框，处理元素内容，内边距，外边距和边框的方式。



由图看出：

元素最内部的是实际内容(Content).

直接包容内容的是内边框(Padding).

内边距的边缘是边框(border). 

边框以外的是外边距(margin).

提示：背景应用于内容，内边框，边框所组成的区域。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

我们看一个实例:

假设框的每一个边上有10个像素外边距，5个像素内边距。现在我们要设置元素框达到100个像素，那么内容的宽度设置为70像素。

如图：



今天就了解到这里，后面再深入了解。