这是我参与【第五届青训营】伴学笔记创作活动的第十天。
注意：边框的大小会影响到整个盒子的大小
-
border-width边框的宽度：默认 3pxborder-top-width上边框的宽度border-right-width右边框的宽度border-bottom-width下边框的宽度border-left-width左边框的宽度
-
border-color边框的颜色：默认使用 color 的颜色值 -
border-top-color上边框的颜色 -
border-right-color右边框的颜色 -
border-bottom-color下边框的颜色 -
border-left-color左边框的颜色 -
border-style边框的样式：没有默认值，必须指定border-top-style上边框的样式border-right-style右边框的样式border-bottom-style下边框的样式border-left-style左边框的样式
示例
.box1 {
border-width: 10px;
border-color: red;
/*
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
*/
border-style: solid;
}
效果（solid）
效果（dotted）
效果（dashed）
效果（double）
不论是border-width 、 border-color 、border-style 还是其衍生出来的属性写法，都可以指定每个方向的边框情况
设定几个值就决定了对应方向的宽度、颜色或样式
- 四个值：
上 右 下 左 - 三个值：
上 左右 下 - 两个值：
上下 左右 - 一个值：
上下左右
其实不管设置几个值，只要记住：其顺序是按顺时针方向设置的，剩下的可以由矩形的对称性推导出来
border：简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
border-top上边框的宽度、颜色和样式border-right右边框的宽度、颜色和样式border-bottom下边框的宽度、颜色和样式border-left左边框的宽度、颜色和样式
.box1 {
border: 10px red solid;
}
内边距(padding）
内边距，也叫填充，是内容区和边框之间的空间
padding-top上内边距padding-right右内边距padding-bottom下内边距padding-left左内边距
padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和边框中属性值设置一样
注意：内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上
示例
<style>
.outer {
width: 200px;
height: 200px;
border: 10px orange solid;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: greenyellow;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
效果
可以看出，当内外 div 宽度和高度一样时，由于 outer 设置了一个 padding 属性，其盒子大小被“撑大了”
盒子可见框的大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算
外边距（margin）
外边距，也叫空白边，位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是 CSS 布局的一个重要手段
注意：外边距不会影响盒子可见框的大小，但是外边
