CSS盒子组成

1.盒子属性

margin(外边距)：代表盒子四周的属性，标签和标签之间的距离，相邻元素的边距会被合并

border(边框)：界于margin内边缘和padding外边缘之间的区域，默认为0

padding(内边距)：在任何定义的边界内的元素内容周围生成空间

盒子一般指的是块元素，盒子是我们布局的重要机制。一个盒子由外边距、边框、内边距、内容组成。

width:内容宽度，块级元素默认100%，单位可以是px em %

height:内容高度，默认为0，高度由子元素填充，单位可以是px em %

还可以定义max-width和min-height属性对其宽高设限定条件 

2边框属性格式

border-width:宽度

border-style:solid 边框样式，以下为取值代表含义：

none 定义无边框

hidden 与“none”相同，但用于表时用于解决边框冲突

dashed 虚线

solid 实线

border-color 边框颜色

简写格式：border:1px solid #000

省略颜色默认为黑色

连写设置四条边的边框：border-width: 上 右 下 左; ​ border-style: 上 右 下 左; ​ border-color: 上 右 下 左;

属性省略时取值规律：

 1.上 右 下 左 > 上 右 下 -   左边的取值和右边的一样

​ 2.上 右 下 左 > 上 右 -    左边和右边的一样 ，下边和上边一样

 3.上 右 下 左 > 上 -        各边和上边一样

border-radius:圆角边框半径取值 绝对值 px  cm  mm 相对值 em  rem%

3外边距属性

margin-top/bottom/right/left

连写时：上 右 下 左

取值规律：

上 右 下> 左边取值和右边一样

上 右 > 下和上，左和右一样

上 > 全都一样

4内边距属性

padding-top/bottom/right/left

连写时：上 右 下 左

取值规律：

上 右 下> 左边取值和右边一样

上 右 > 下和上，左和右一样

上 > 全都一样