目录

盒模型的定义“盒子”的类型"盒子"的组成部分-以块级盒子为例内容 conter内边距 padding边框 Border外边距 margin 总结 在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。

盒模型的定义

CSS盒模型(Box Model)：盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内容content 、 内边距padding、边框border、外边距margin。 下面的图片展示了标准的盒子模型：

“盒子”的类型

在CSS中我们一般使用较多的是以下两种“盒子”：

块级盒子（block box）：也叫块盒，每个盒子都会换行，浏览器默认了样式为display为block。除非特殊指定，诸如标题（h）和段落（p）默认情况下都是块级的盒子。内联盒子（inline box)：也叫行盒，盒子不会产生换行，浏览器默认了样式为display为inline.用做链接的 a 元素、span、em 以及strong都是默认处于 inline 状态的。

"盒子"的组成部分-以块级盒子为例

内容 conter

内容盒（conter box）：这个区域是由内容边界限制，容纳着元素的“真实”内容，大小可以通过设置 width 和 height。 如下为一个宽高均为100像素的盒子写法：

div{ width:100px; height:100px; }

内边距 padding

Padding box : 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距; 大小通过 padding 相关属性设置. 即 padding top：上边距；padding right：右边距 ； padding buttom：下边距； padding left：左边距 。 但是一般日常使用过程中我们一般使用简写比较多，即padding：上 右 下 左，边距书写顺序为上边距，右边距，下边距，左边距，依靠顺时针顺序

有时候我们经常会看到padding:10px;代表每个方向的边距都为10px。有时候我们经常会看到padding:10px 20px;代表上边距为10px,右边距为20px，因为下边距和左边距没有，即默认为对边边距值，即下边距为10px,左边距为20px。同理padding中有三个值也是一样，如果按顺时针顺序转哪一边没有，默认取对边。 如果padding中没有四个值，如果按顺时针顺序转哪一边没有，默认取对边；如果只有一个值，默认四边值一样

如下演示一个上边距为10px,右边距为20px，下边距为15px,左边距为20px的盒子的写法

div{ padding:10px 20px 15px; }

边框 Border

Border box: 边框盒包裹内容和内边距,是由边框边界限制，扩展自内边距区域，是容纳边框的区域；大小通过 border 相关属性设置。 它一般由三部分组成：

边框样式（border-style） 一般常见的边框样式为solid实线，dotted虚线，double两条实线，更多常见样式可以查询w3.org.边框宽度（border-width）边框颜色（border-color ） 需要注意的是：如果设置了边框颜色，颜色即为边框颜色；边框颜色如果不设置就和字体颜色一致。

当然，你也可以通过设置样式为 none 或 hidden 来明确地移除边框，或者设置边框颜色为 transparent 来让边框不可见，后者不会改变布局。 如果一次只指定某一个方向的边框，就用属性： border-top， border-right， border-bottom， border-left。 这些属性可以指定某个方向上的边框，或者不同方向上的不同边框，规则和padding相似。 如下演示一个边框宽度为像素,实线，颜色为红色的的盒子的写法：

div{ border:1px solid red }

值得一提的是，现在利用border属性我们可以实现一些基础的效果，比如三角形，梯形等图形的绘制。

外边距 margin

Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域，它由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素；大小通过 margin 相关属性设置。

外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制，规则和padding相似。如下演示一个外边距都为10px的盒子的写法： div{ margin:10px; }

外边距折叠 ：在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。一般两个块盒外边距重合时，外边距将合并为一个外边距，此时取最大的单个外边距的大小。

总结

一个被定义成块级的（block）盒子会表现出以下行为:

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽每个盒子都会换行width 和 height 属性可以发挥作用内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”。

如果一个盒子对外显示为 inline，那么他的行为如下:

盒子不会产生换行。width 和 height 属性将不起作用。垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。水平方向的内边距、外边距以及边框会被应用而且也会把其他处于 inline 状态的盒子推开。

注意 我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。因此在实际应用中，当我们需要给行盒加上相应属性： display为inline- block将他变为行块盒。他一般不独占一行，但是盒模型所有尺寸都有效。 更多请见w3.org官网