随便打开任何一个网站，都会发现，网站内的所有元素无论是搜索框、导航栏，还是任意一个icon图标，无一例外均为一个个大小不等的矩形，我们把这样的矩形称为“盒子”。盒子模型（Box Model）是CSS中至关重要的布局模式。

盒子模型的组成

盒子模型从内到外由内容部分（content），内边距（padding），边框（border）和外边距（margin）组成。

由示意图可以看出，

盒子的宽度=margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

盒子的高度=margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

盒子模型就是一个类似于俄罗斯套娃的嵌套结构，活用盒子模型的属性和特性，是前端开发中极其重要的一部分。

六大属性

在上一部分中，笔者从较为宏观的角度，统述了盒子模型的组成部分。在这一部分，会对其中重要的几大属性做更为深入的学习讲解。

margin即元素与元素间的距离，可以定义top、right、bottom、left四个值。

使用例

margin-bottom:20px;

居中小技巧

margin的left和right可以赋值auto，auto会让左边距和右边距尽可能地大，所以，我们便可以如此设置实现在父元素中水平居中。

margin-left:auto;
margin-right:auto;

border即边框，有top、right、bottom、left四个边框，可以设置边框样式、粗细程度和颜色。

使用例

border: 5px solid black;

padding即内边距，可以理解为内容到盒子四周的距离，也有top、right、bottom、lefts四个部分组成。

使用例

 padding: 200px;

width和height是盒子内容的两大属性，其值决定了内容的面积。

使用例

    width: 200px;
    height: 60px;

background即背景，会填充内容、padding和border，可以设置背景颜色、背景图片等。

    background-image: url("../img/timg.jpg");

在上一部分，笔者简略描述了盒子模型的六大属性，但是前端知识较为零碎繁杂，盒子模型也是如此，除了六大属性之外，还有这些我们必须知道。

六大属性并不是对所有盒子都适用：

对于行内元素来说，width、height值无法定义，行内元素总是严谨地固守着自己的一亩三分地，无法通过设置宽高改变其面积。不仅如此，行内元素margin和padding也只有左右起作用，上下的值无法对其产生影响。

对于块级元素来说，所有属性均可正常运行。

对于行内块元素来说，属性均适用。

当两个块级元素垂直排列时，会发生margin重叠现象。上方的盒子的margin-bottom会和下方盒子的margin-top重叠在一起，例如：

我们将上盒子的margin-bottom设为100px，将下盒子的margin-top设为110px，按照人们的思维习惯，两个盒子的距离应该时210px，可事实如此吗？

    margin-bottom:100px;  //上盒子

    margin-top:110px;     //下盒子

最后的结果为

其间的距离为110px，这种现象就是margin的重叠。

当满足重叠条件时，两盒子的距离为margin值较大的那一方。

为了避免margin重叠现象的发生，我们可以采取一些措施：

与同级元素相似，父子元素之间也会发生margin重叠，对于父子元素，也有一些避免此现象的办法：

还是那句话，前端的知识凌乱繁杂，本文仅为本人学习过程的总结，难免有疏漏错误之处。

关于盒子模型的相关知识绝不止本文所述，虽不够全面，但也足以让读者对其管中窥豹，我也会在以后的学习中不断完善本文。