盒子一般指的是块元素，盒子是我们布局的重要机制。一个盒子应该由外边距、边框、内边距、内容组成。
属性
margin
外边距 代表盒子四周的区域。相邻元素的边距会合并（margin collapsing）
border
设定介于padding的外边缘与margin的内边缘之间，默认值为0
padding
内间距 在任何定义的边界内的元素内容周围生成空间
width & height
用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。
width
内容宽度，块级元素默认 100%，单位可以：px em %
height
内容高度，默认 0 ，由子元素填充，单位可以： px em %
max-width
定义元素的最大宽度。该属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不 能比其宽。不允许指定负值。
min-height
属性设置元素的最小高度。该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高， 但不能比其矮。不允许指定负值。
边框属性
边框就是环绕在标签宽度和高度周围的线条
格式
边框宽度
border-width: 5px;
边框样式 border-style: solid;
边框样式取值：
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
边框颜色
border-color: red;
连写(同时设置四条边的边框)
border: 边框的宽度 边框的样式 边框的颜色;
快捷键
bd+ border: 1px solid #000;
【注意】
- 连写格式中颜色属性可以省略, 省略之后默认就是黑色
- 连写格式中样式不能省略, 省略之后就看不到边框了
- 连写格式中宽度可以省略, 省略之后还是可以看到边框
border-radius
为元素指定圆角边框的半径取值：
- 绝对值 px、mm 、cm
- 相对值 em 、rem 、%
外边距属性
标签和标签之间的距离就是外边距
格式
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
浏览器是默认左对齐的。看起来margin-right没有生效，其实有效果的，只是在默认即标准流的情 况的下显示不出来效果，可以加右浮动脱离标准流。
外边距合并现象
在默认(标准流)布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的。 水平方向上的外边距会叠加.
内边距属性
边框和内容之间的距离就是内边距
格式
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
连写
padding: 上 右 下 左;
【注意】
- 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
- 给标签设置内边距之后, 内边距也会有背景颜色
