盒子模式之边框属性

一、边框属性

1. 什么是边框？

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

2. 边框属性的格式

• 1. 连写. 同时设置四条边的边框的属性。

1. border:边框的宽度 边框的样式 边框的颜色；

1.2.快捷键：bd+

1.3. 注意点：
1.3.1 连写格式中颜色属性可以省略，省略之后默认就是黑色
1.3.2 连写格式中样式不能省略，省略之后就看不到边框了。
1.3.3 连写格式中，宽度可以省略，省略之后还是可以看到边框

• 2. 连写 分别设置四条边的边框

border-top:边框的宽度 边框的样式 边框的颜色；
border-right:边框的宽度 边框的样式 边框的颜色；
border-left:边框的宽度 边框的样式 边框的颜色；
border-bottom:边框的宽度 边框的样式 边框的颜色；
快捷键：bt+ ： border-top:1px solid #000:

二、边框属性下

1. 连写 分别设置四条边的边框

border-width：上 右 下 左
border-style: 上 右 下 左
border-color:上 右 下 左

注意点：

这三个属性的取值是按照顺时针来赋值，也就是按照上右下左来赋值。
这三个属性的取值省略时的规律：
1.1 上 右 下 左（省略左） > 上 右 下>左边的取值和右边的一样
1.2 上 右 > 左边的取值和右边一样，下面的取值和上面的一样
1.3 上>右边，左边， 和下，和上边的一样。

2. 不是连写（方向+要素）

可以分别写上右下左的属性。

三、什么是内边距

1. 什么是内边距？

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

2. 格式
   2.1 非连写

padding-top:
padding-right::
padding-bottom:
padding-left:

2.2 连写的方式：
padding： 上 右 下 左

3. 注意点：

这三个属性的取值是按照顺时针来赋值，也就是按照上右下左来赋值。
这三个属性的取值省略时的规律：
1.1 上 右 下 左（省略左） > 上 右 下>左边的取值和右边的一样
1.2 上 右 > 左边的取值和右边一样，下面的取值和上面的一样
1.3 上>右边，左边， 和下，和上边的一样。
给标签设置内边距之后，标签占有的宽度和高度会发生变化。
内边距也会有背景颜色。

四、外边距

1. 什么是外边距？

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

2. 格式
   2.1 非连写

margin-top:
margin-right;
margin-bottom:
margin-right:

2.2 连写

margin:上 右 下 左;

注意点：

这三个属性的取值是按照顺时针来赋值，也就是按照上右下左来赋值。
这三个属性的取值省略时的规律：
1.1 上 右 下 左（省略左） > 上 右 下>左边的取值和右边的一样
1.2 上 右 > 左边的取值和右边一样，下面的取值和上面的一样
1.3 上>右边，左边， 和下，和上边的一样。

注意点：

• 外边距是没有背景颜色的。

五、外边距的合并现象

1. 什么是外边距合并现象？

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