CSS学习记录4/什么是边框/利用边框画倒三角/什么是内边距/什么是外边距/外边距合并现象

什么是边框？

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

边框样式取值：

连写格式：
1、同时设置四条边的边框
border:边框的宽度 边框的样式 边框的颜色:
缩写格式例：border: 1px solid #000;
连写快捷键：bd+
注意点：连写格式颜色可以省略，默认为黑色；样式不能省略，省略之后就看不见边框了；宽度可以省略，仍可看到边框。

2、分别设置四条边的边框
border-top:边框的宽度 边框的样式 边框的颜色: bt+
border-right:边框的宽度 边框的样式 边框的颜色: br+
border-bottom:边框的宽度 边框的样式 边框的颜色: bb+
border-left:边框的宽度 边框的样式 边框的颜色: bl+
注意点：连写格式颜色可以省略，默认为黑色；样式不能省略，省略之后就看不见边框了；宽度可以省略，仍可看到边框。

3、（连写）分别设置四条边的边框
格式：
border-width:上 右 下 左;
border-style:上 右 下 左;
border-color:上 右 下 左;
注意点：
1、属性值赋值一定要按照上右下左来赋值，即顺时针。
2、属性取值省略时的规律：
上 右 下 左 >上 右 下>左边的取值和右边一样
上 右 下 左 >上 右>左边的取值和右边一样 下边的取值和上边一样
上 右 下 左 >上 右 下>右下左取值都和上边一样

两种分别设置案例：

.a{
            width: 80px;
            height: 80px;
            background: aqua;
            border-bottom: 2px dotted yellow;
            border-right: 3px solid blue;
            border-left: 3px double palevioletred;
            border-top: 2px solid darkorange;

        }
        .b{
            width: 80px;
            height: 80px;
            background: aqua;
            border-width: 2px 3px 2px 3px;
            border-color: darkorange blue yellow palevioletred;
            border-style: solid solid dotted double;
        }

非连写格式：
border-top/right/left/bottom-width/color/style:值;

利用边框画倒三角：

 .h{
            width: 0px;
            height: 0px;
            border-width: 30px;
            border-color: darkorange white white;
            border-style: solid;
            border-bottom: none;
        }

结果：

什么是内边距？

边框与内容之间的距离就是内边距。
非连写格式：

padding-top:值;
padding-right:值;
padding-bottom:值;
padding-left:值;

注意点：
1、给标签设置内边距之后，标签占有的宽度和高度会发生变化。
2.内边距也有背景颜色。
连写格式：
padding: 上 右 下 左 ;
注意点：
1、属性值赋值一定要按照上右下左来赋值，即顺时针。
2、属性取值省略时的规律：
上 右 下 左 >上 右 下>左边的取值和右边一样
上 右 下 左 >上 右>左边的取值和右边一样 下边的取值和上边一样
上 右 下 左 >上 右 下>右下左取值都和上边一样

什么是外边距？

标签和标签之间的距离。

非连写格式：

margin-top:值;
margin-right:值;
margin-bottom:值;
margin-left:值;

连写格式：
margin: 上 右 下左;

注意点：
1、属性值赋值一定要按照上右下左来赋值，即顺时针。
2、属性取值省略时的规律：
上 右 下 左 >上 右 下>左边的取值和右边一样
上 右 下 左 >上 右>左边的取值和右边一样 下边的取值和上边一样
上 右 下 左 >上 右 下>右下左取值都和上边一样
3、外边距那一部分是没有背景颜色的。

外边距合并现象：

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

快速创建由内容有选择器的标签快捷键：

标签选择器${内容}*个数
例：span.box${内容}*6