【CSS盒模型】

1.盒子组成

盒子属性：文档中的每个元素都可以被看作是一个矩形盒子。

margin 外边距 代表盒子周围的区域。相邻元素的边距会合并（margin collapsing)

border 设定介于padding的外边距与margin的内边距之间，默认值为0

padding 内边距，在任何定义的边界内的元素周围生成空间

width&height 用于设置内容区的宽高，盒子高度默认为内容的高度

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

width & height

max-width 定义元素的最大宽度  元素可以比指定值窄，但不能比其宽。不允许指定负值。

min-height 属性设置元素的最小高度 元素可以比指定值高，但不能比其矮。不允许指定负值。

边框属性

边框就是环绕在标签宽度和高度周围的线条

格式：边框宽度 border-width: 5px; 

 边框样式 border-style: solid;

样式取值 none 定义无边框

hidden 与 "none" 相同,不过应用于表时除外，对于表，hidden 用于解决边框冲突

dotted 定义点状边框。在大多数浏览器中呈现为实线

dashed 定义虚线。在大多数浏览器中呈现为实线 ​

solid 定义实线

double 定义双线。双线的宽度等于 border-width 的值

边框颜色 ​ border-color: red;

连写1（同时设置四条边的边框)

border: 边框的宽度 边框的样式 边框的颜色;

注意：连写格式中颜色可省略，默认黑色 

          宽度可省略，省略之后还可以看到边框

         样式不能省略，省略之后就看不到边框了

连写2(分别设置四条边的边框)

border-top:宽度 样式 颜色; border-right    border-bottom       border-left

连写3(分别设置四条边的边框)

border-width: 上 右 下 左; ​ border-style: 上 右 下 左; ​ border-color: 上 右 下 左;

这三个属性的取值省略时的规律 ​ 

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

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

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

非连写(方向+要素)

border-left-width: 20px;

​ border-left-style: double;

​ border-left-color: pink;

border-radius为元素指定圆角边框的半径取值：绝对值 px、mm 、cm 相对值 em 、rem

外边距属性

外边距 标签和标签之间的距离就是外边距

格式   非连写 ​ margin-top: ; ​ margin-right: ;margin-bottom: ; ​ margin-left: ;

连写 margin: 上 右 下 左;

这三个属性的取值省略时的规律（与边框的一致）

外边距合并现象 在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的,水平方向会叠加.

内边距属性

内边距：边框和内容之间的距离就是内边距

格式:padding-top: ;  padding-right: ;   padding-bottom: ; ​   padding-left: ;

注意点: ​ 1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化 ​ 2.给标签设置内边距之后, 内边距也会有背景颜色

连写 ​ padding: 上 右 下 左;

这三个属性的取值省略时的规律（与上面一样）