本文介绍了H5盒模型的基础知识，作为前端布局的重要组成部分，盒模型包括width、height、background、padding、border和margin等属性。详细阐述了属性值的设置方式，如padding和margin的简写形式，并通过示例解释了盒模型的实际效果。同时提到了内容区大小受padding影响，以及margin负值的使用场景。
学过前端的都知道，盒模型可以说是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&
最低0.47元/天 解锁文章
扫一扫
1275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
