CSS 知识点总结
一、文本装饰（text-decoration）
- 作用：设置文本的装饰样式。
- 可选值：
none：无装饰，文本无额外线条。underline：添加下划线。overline：添加上划线。line-through：添加删除线。
二、首行缩进（text-indent）
- 作用：设置段落首行的缩进距离。
- 通常以长度单位（如
px、em）或百分比表示缩进量。例如2em表示缩进两个字符宽度。
三、字符间距（letter-spacing）
- 作用：调整字符之间的间距。
- 以长度单位表示，如
1px表示字符间距为 1 像素，0.5em表示字符间距为 0.5 个字符宽度。
四、背景裁剪（background-clip）
- 作用：指定背景的绘制区域。
- 可选值：
padding-box：背景被裁剪到内边距区域。border-box：背景被裁剪到边框区域。content-box：背景被裁剪到内容区域。
五、盒模型（box-sizing）
- 作用：控制元素的盒模型计算方式。
- 可选值：
content-box：宽度和高度只计算内容区域，不包括边框和内边距。border-box：宽度和高度包括内容、内边距和边框。
六、溢出处理（overflow）
- 作用：当内容超出元素尺寸时，决定如何处理溢出内容。
- 可选值：
visible：内容会超出元素边界显示。hidden：超出部分被隐藏。scroll：无论内容是否超出，都会显示滚动条。auto：根据需要自动显示滚动条。
七、单词换行（word-break）
- 作用：控制单词在何处断开以适应容器。
- 可选值：
normal：使用默认的断行规则。break-all：允许在单词内任意位置断行。keep-all：中文和英文单词都不能在中间断开。
八、空白处理（white-space）
- 作用：控制元素内的空白处理方式。
- 可选值：
normal：默认值，合并空白并允许文本在需要时换行。nowrap：不换行，文本在同一行显示。pre：保留空白和换行，如同 HTML 中的<pre>标签。
九、文本截断（text-overflow）
- 作用：当文本溢出时，决定如何显示。
- 通常与特定的属性组合使用。
- 可选值：
ellipsis：显示省略号表示溢出的文本。
十、图片适配（object-fit）
- 作用：控制图片在其容器中的适配方式。
- 可选值：
contain：图片会被缩放，以保证图片完整显示，可能会在容器内留下空白。cover：图片会被缩放，以完全覆盖容器，可能会裁剪部分图片。fill：图片会被拉伸以填满容器，可能会导致图片变形。none：图片保持其原始大小，可能会超出容器。scale-down：图片会被缩放，直到不超过容器的尺寸，类似于contain，但会选择较小的尺寸。
单行文本截断组合
当同时使用 white-space: nowrap;、overflow: hidden; 和 text-overflow: ellipsis; 时，可以实现单行文本截断并显示省略号的效果。
white-space: nowrap;强制文本在同一行内显示，不换行。overflow: hidden;隐藏超出容器的部分。text-overflow: ellipsis;在文本溢出时显示省略号。这一组合在网页设计中常用于处理标题、标签等简短文本的溢出情况，以保持页面整洁美观。
