盒模型简介

在网页中“一切皆是盒子”

盒子

CSS处理网页时，它认为每个元素都包含在一
个不可见的盒子里。
为什么要想象成盒子呢？因为如果把所有的元
素都想象成盒子，那么我们对网页的布局就相
当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的
位置即可完成网页的布局。

盒子模型

一个盒子我们会分成几个部分：

– 内容区(content)
– 内边距(padding)
– 边框(border)
– 外边距(margin)
看一下面的图来感受一下盒模型

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

内容区

内容区指的是盒子中放置内容的区域，也就是元素
中的文本内容，子元素都是存在于内容区中的。
如果没有为元素设置内边距和边框，则内容区大小
默认和盒子大小是一致的。
通过width和height两个属性可以设置内容区的大
小。
width和height属性只适用于块元素

内边距

顾名思义，内边距指的就是元素内容区与边框以内
的空间。
默认情况下width和height不包含padding的大小。
使用padding属性来设置元素的内边距。
例如：
– padding:10px 20px 30px 40px
– 这样会设置元素的上、右、下、左四个方向的内边距。
padding:10px 20px 30px;
– 分别指定上、左右、下四个方向的内边距
padding:10px 20px;
– 分别指定上下、左右四个方向的内边距
padding:10px;
– 同时指定上左右下四个方向的内边距
同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。

边框

可以在元素周围创建边框，边框是元素可见框的最外部。
可以使用border属性来设置盒子的边框：
– border:1px red solid;
– 上边的样式分别指定了边框的宽度、颜色和样式。
也可以使用border-top/left/right/bottom分别指定上右下左
四个方向的边框。
和padding一样，默认width和height并包括边框的宽度。
边框的样式

边框可以设置多种样式

– none（没有边框）
– dotted（点线）
– dashed（虚线）
– solid（实线）
– double（双线）
– groove（槽线）
– ridge（脊线）
– inset（凹边）
– outset（凸边）

外边距

外边距是元素边框与周围元素相距的空间。
• 使用margin属性可以设置外边距。
• 用法和padding类似，同样也提供了四个方向的
margin-top/right/bottom/left。
• 当将左右外边距设置为auto时，浏览器会将左右外
边距设置为相等，所以这行代码margin:0 auto可
以使元素居中。