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