1、盒模型概念
盒模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
-
盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
-
盒子里面的文字和图片等元素是内容区域。
2、两种盒模型
盒模型由box-sizing属性指定，box-sizing属性的值包括：content-box（内容盒）和border-box（边框盒）两种：
两者只有同时指定padding、border、width/height时才能看出区别。
- content-box（内容盒）
内容是盒子的边界，它的宽度=内容宽度
- border-box（边框盒）
边框是盒子的边界，它的宽度=内容宽度+padding+border
示例：
3、盒模型的属性
3.1 border（边框）
border : border-width || border-style || border-color
边框的样式：
-
none：没有边框即忽略所有边框的宽度（默认值）
-
solid：边框为单实线(最为常用的)
-
dashed：边框为虚线
-
dotted：边框为点线
border可以单独设置上下左右边框。
3.2 padding （内边距）
padding属性用于设置内边距。
同样可以单独设置上下左右内边距，是边框与内容之间的距离。
- 设置1个值
padding：上下左右内边距;
- 设置两个值
padding: 上下内边距 左右内边距 ；
- 设置三个值
padding：上内边距 左右内边距 下内边距；
- 设置四个值
padding: 上内边距 右内边距 下内边距 左内边距 ；
3.3 margin （外边距）
margin属性用于设置外边距。margin就是控制盒子和盒子之间的距离。
margin也可以设置上下左右外边距。
它的写法和padding一样。
