框模型 (盒模型)
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：
- 内容 - 框的内容，其中显示文本和图像。
- 内边距 - 清除内容周围的区域。内边距是透明的。
- 边框 - 围绕内边距和内容的边框。
- 外边距 - 清除边界外的区域。外边距是透明的。 框模型允许我们在元素周围添加边框，并定义元素之间的空间。 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。
提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
fill-available：充分利用可用空间，例如div、p这些元素的宽度是默认100%于父级容器的。但是width: auto却不同于width: 100%，这是很多人不理解的地方。如果你设置了width: 100%，这里指的是内容区域100%，即css3中的content-box，这时如果你设置了padding、border或者margin，元素都会撑破父元素，从而破坏布局。你当然可以设置box-sizing: border-box，但可惜的是css3中没有margin-box，这时候你如果设置了margin，依然会撑破父元素，但是width: auto却不会
fit-content：收缩到合适，典型代表浮动、绝对定位（有例外，设置了对立属性：left、right、top、bottom时，宽度和高度由祖先元素position非static的元素决定，但是替换元素除外：img、video、canvas等）、inline-block、table。利用这个特性我们可以实现，文字整体居中，多行则居左显示
min-content：收缩到最小。在表格中最常见，当每一列空间都不够的时候，文字能断则断，中文随便断，英文单词不能断。可以根据这个特性实现凹凸图形等效果
max-content：超出容器限制，内容很长的连续英文或数字，或者内联元素被设置为了white-space: nowrap。
轮廓
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。 CSS 拥有如下轮廓属性：
- outline-style 轮廓的样式
- outline-color 颜色
- outline-width 宽度
- outline-offset
- outline
outline-style 属性指定轮廓的样式
- dotted - 定义点状的轮廓。
- dashed - 定义虚线的轮廓。
- solid - 定义实线的轮廓。
- double - 定义双线的轮廓。
- groove - 定义 3D 凹槽轮廓。
- ridge - 定义 3D 凸槽轮廓。
- inset - 定义 3D 凹边轮廓。
- outset - 定义 3D 凸边轮廓。
- none - 定义无轮廓。
- hidden - 定义隐藏的轮廓。
p {outline-color: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;}
outline-width 属性指定轮廓的宽度
- thin（通常为 1px）
- medium（通常为 3px）
- thick （通常为 5px）
- 特定尺寸（以 px、pt、cm、em 计）
outline-style: solid;
outline-color: red;
outline-width: thin;
outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。
文本
文本对齐 text-align
属性用于设置文本的水平对齐方式。 文本可以左对齐或右对齐，或居中对齐。
当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的
文本方向 direction 和 unicode-bidi 属性可用于更改元素的文本方向：
垂直对齐 vertical-align 属性设置元素的垂直对齐方式。
文字装饰
text-decoration 属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线：
文本转换text-transform 属性用于指定文本中的大写和小写字母。
它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
文字间距 text-indent
用于指定文本第一行的缩进：
text-indent: 50px; 首行缩进50个字符
字母间距 letter-spacing
用于指定文本中字符之间的间距。
letter-spacing: 3px; 字符之间间隔3px
行高 line-height
line-height:10px
用来表示行间距
字间距 word-spacing
文本中单词之间的间距
word-spacing:10px
空白 white-space
指定元素内部空白的处理方式。
white-space: nowrap
文字阴影效果 text-shadow
给文字添加阴影效果。
h1 {
text-shadow: 2px 2px 5px red;
}
字体样式
font-style 用于指定斜体文本。
此属性可设置三个值：
- normal - 文字正常显示
- italic - 文本以斜体显示
- oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
font-weight 属性指定字体的粗细：
- normal - 文字正常显示
- lighter - 文字更细
- bold - 文字加粗
- 900 - 指定文字粗细大小
font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。
在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。
