CSS 常用样式集锦
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 中的
标签。九、文本截断（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; 在文本溢出时显示省略号。这一组合在网页设计中常用于处理标题、标签等简短文本的溢出情况，以保持页面整洁美观。