1.CSS盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距。
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距。
小实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS简单学习</title>
<style type="text/css">
div {
background-color: lightgray;
border: 25px solid green;
width: 300px;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型小实例</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>
2.CSS边框属性（border）
CSS边框属性允许你指定一个元素边框的样式和颜色。
有关border（简写属性）、border-width（边框宽度）、border-style（边框样式）、border-color（边框颜色）的相关内容，可以参考这篇博文：https://blog.csdn.net/weixin_43823808/article/details/113251320
2.1 border-width属性（边框宽度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">这是一个段落。</p>
<p class="two">这是一个段落。</p>
<p class="three">这是一个段落。</p>
<p><b>注意：</b>"border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>
</html>
2.2 border-color属性（边框颜色）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: blue;
}
p.three {
border-style: solid;
border-color: green;
}
</style>
</head>
<body>
<p class="one">实线红色边框</p>
<p class="two">实线蓝色边框</p>
<p class="three">实线绿色边框</p>
<p><b>注意：</b>"border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置边框。</p>
</body>
</html>
2.3 border-style属性（边框样式）
border-top-style、border-bottom-style、border-left-style、border-right-style四个属性可以简写为：border-style。
border-style属性可以有1-4个值：
- border-style: a b c d;
- 上边框是 a
- 右边框是 b
- 底边框是 c
- 左边框是 d
- border-style: a b c;
- 上边框是 a
- 左、右边框是 b
- 底边框是 c
- border-style: a b;
- 上、底边框是 a
- 右、左边框是 b
- border-style: a;
- 四面边框是 a
① border-style：属性1，属性2，属性3，属性4：上->右->下->左
② border-style：属性1，属性2，属性3：上->左右->下
③ border-style：属性1，属性2：上下->左右
④ border-style：属性1：上下左右属性相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
p {
border-top-style: dotted;
border-bottom-style: dotted;
border-left-style: solid;
border-right-style: solid;
}
</style>
</head>
<body>
<p>这里设置了两种不同的边框样式</p>
</body>
</html>
3.CSS轮廓属性（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
| 属性 | 说明 | 值 | CSS |
|---|---|---|---|
| outline | 在一个声明中设置所有的轮廓属性 | outline-color outline-style outline-width inherit | 2 |
| outline-color | 设置轮廓的颜色 | color-name hex-number rgb-number invert inherit | 2 |
| outline-style | 设置轮廓的样式 | none dotted dashed solid double groove ridge inset outset inherit | 2 |
| outline-width | 设置轮廓的宽度 | thin medium thick length inherit | 2 |
3.1 outline-style属性（轮廓样式）
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。
outline-style属性指定outline的样式。
| 值 | 描述 |
|---|---|
| none | 默认。定义无轮廓。 |
| dotted | 定义点状的轮廓。 |
| dashed | 定义虚线轮廓。 |
| solid | 定义实线轮廓。 |
| double | 定义双线轮廓。双线的宽度等同于 outline-width 的值。 |
| groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 |
| ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 |
| inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 |
| outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 |
| inherit | 规定应该从父元素继承轮廓样式的设置。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
p {border: 1px solid red;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<p class="dotted">轮廓样式</p>
<p class="dashed">轮廓样式</p>
<p class="solid">轮廓样式</p>
<p class="double">轮廓样式</p>
<p class="groove">轮廓样式</p>
<p class="ridge">轮廓样式</p>
<p class="inset">轮廓样式</p>
<p class="outset">轮廓样式</p>
</body>
</html>
3.2 outline-width属性（轮廓宽度）
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。
outline-width指定轮廓的宽度。
注意： 请始终在outline-width属性之前声明outline-style属性。元素只有获得轮廓以后才能改变其轮廓的宽度。
| 值 | 描述 |
|---|---|
| thin | 规定细轮廓。 |
| medium | 默认。规定中等的轮廓。 |
| thick | 规定粗的轮廓。 |
| length | 允许您规定轮廓粗细的值。 |
| inherit | 规定应该从父元素继承轮廓宽度的设置。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
p.one {
border: 3px solid red;
outline-style: double;
outline-width: thick;
}
p.two {
border: 3px solid red;
outline-style: dotted;
outline-width: 5px;
}
</style>
</head>
<body>
<p class="one">这个段落设置了轮廓宽度和轮廓样式</p>
<p class="two">这个段落设置了轮廓宽度和轮廓样式</p>
</body>
</html>
3.3 outline-color属性（轮廓颜色）
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。
outline-color属性指定轮廓颜色。
注意： 请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
| 值 | 描述 |
|---|---|
| color | 指定轮廓颜色。 |
| invert | 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。 |
| inherit | 规定应该从父元素继承轮廓颜色的设置。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
p {
border: 3px solid red;
outline-style: dashed;
outline-color: #0000FF;
}
</style>
</head>
<body>
<p>这个段落的边框和轮廓拥有不同的颜色</p>
</body>
</html>
3.4 outline属性
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline简写属性在一个声明中设置所有的轮廓属性。
可以设置的属性分别是（按顺序）：outline-color，outline-style，outline-width（顺序正好与border相反）
如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
p {
border: 3px solid red;
outline: green dashed 3px;
}
</style>
</head>
<body>
<p>这个段落的边框和轮廓均使用"border"和"outline"简写属性进行设置。</p>
</body>
</html>
