快速理解盒模型

盒模型是web界面的一个重要概念，理解盒模型后将会对web前端有更加深刻的理解。

1.盒模型包括：content、padding、border、margin四部分。

（1）content：本身元素，即元素真实内容所占的区域；with，height，min-width，max-with等就是控制content的大小。将盒模型比作人，那么content就是人的身体

（2）padding：内边距,包括有padding-left,padding-right,padding-top和padding-bottom。padding的大小就是人的肥胖程度，top和bottom是纵向高度，left和right是横向肥胖程度。

（3）border：边框。border相当于在人身体外面包裹一层内容，内容的厚度可以控制。

（4）margin：外边框，包括margin-top,margin-bottom,margin-left,margin-right。margin的大小就是人外面的衣服，margin越大衣服越多。

2.应用：

（1）content :with,height,min-with,min-height,max-with,max-height可以控制元素大小，通常单位是PX，也可以设置为百分比（%）；编写页面自适应的时候，常用的一种方法就是with和height设置为百分比，同时利用min-with,min-height,max-with,max-height进行页面控制。

（2）padding：可以控制包在同一个box的两个元素间的距离，在同一个box中，属于内部，所以用padding内边距。

（3）border：给内容设置边框。

（4）margin：常用来设置外部元素间的距离，两个不在同一个box的元素的距离。