H5知识点（一）盒模型

学过前端的都知道，盒模型可以说是H5的基石，当我们在设计一个简单的网页时，首先要先做的就是分区布局，分区布局的目的是要确定内容，即文本、图片或者列表等的位置，进而将页面内容的位置属性相似的部分提取出来，建立模型，从而达到减少重复工作，提高效率的目的。而我们提取出的具有相同属性的一个个模板，在H5中就被成为一个个具体的盒模型，可以说建立盒模型的过程就是布局的过程。

盒模型一般具有以下6个属性值
width: /* 定义元素的宽*/
height /* 定义元素的高*/
background: /* 定义元素的背景*/
padding /* 显示在border区和内容之间的空白区*/
border /显示在padding区以外的边框/
margin /盒模型的外边距/
其中padding、margin、border均可以分别设置四个方向的属性，如
Padding：padding-top padding-right padding-bottom padding-left
Margin：margin-top margin-right margin-bottom margin-left
当左右方向的属性值相同时可以写为3个值的样式：
padding：padding-top padding-right& padding-left padding-bottom；
margin：margin-top margin-right& margin-left margin-bottom；
当上下方向和左右方向的属性值分别相同时可以写为2个值的样式：
padding：padding-top& padding-bottom padding-right&