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
<!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-color |
2 |
|
设置轮廓的颜色 |
color-name |
2 |
|
设置轮廓的样式 |
none |
2 |
|
设置轮廓的宽度 |
thin |
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>
