CSS的属性大全

WEI_Gaot
157 阅读9分钟

核心分类与常用属性列表：

(请注意：很多属性都有对应的简写 (shorthand) 属性和拆分的具体 (longhand) 属性)

1. 盒模型 (Box Model)

  • width, height: 设置内容区域的宽度和高度。

  • padding (简写): 设置内边距。

    • padding-top, padding-right, padding-bottom, padding-left

  • margin (简写): 设置外边距。

    • margin-top, margin-right, margin-bottom, margin-left

  • border (简写): 设置边框。

    • border-width, border-style, border-color (及其各方向 longhands: border-top-width, etc.)
    • border-radius (及其各角落 longhands: border-top-left-radius, etc.): 设置边框圆角。

  • box-sizing: 定义如何计算元素的总宽度和高度 (content-box | border-box)。

2. 布局 (Layout)

  • Display & Visibility:

    • display: 定义元素的显示类型 ( block, inline, inline-block, none, flex, grid, table, list-item, flow-root, etc.)。
    • visibility: 设置元素是否可见 (visible | hidden | collapse)。
    • opacity: 设置元素的不透明度 (0 to 1)。

  • Positioning:

    • position: 设置元素的定位方式 (static | relative | absolute | fixed | sticky)。
    • top, right, bottom, left: 配合 position 使用，定义元素的位置。
    • z-index: 设置定位元素的堆叠顺序。

  • Overflow:

    • overflow: 控制内容溢出元素框时的处理方式 (visible | hidden | scroll | auto | clip)。
    • overflow-x, overflow-y: 分别控制水平和垂直方向的溢出。

  • Float & Clear: (传统布局方式)

    • float: 使元素浮动 (left | right | none)。
    • clear: 指定元素旁边是否允许浮动元素 (none | left | right | both)。

3. Flexbox 布局 (Flexible Box Layout)

  • 容器属性 (Container Properties):

    • display: flex or inline-flex
    • flex-direction: 设置主轴方向 (row | row-reverse | column | column-reverse)。
    • flex-wrap: 控制项目是否换行 (nowrap | wrap | wrap-reverse)。
    • flex-flow (简写 for flex-direction and flex-wrap)。
    • justify-content: 定义项目在主轴上的对齐方式。
    • align-items: 定义项目在交叉轴上的对齐方式 (单行)。
    • align-content: 定义多行项目在交叉轴上的对齐方式。
    • gap, row-gap, column-gap: 设置项目之间的间距。

  • 项目属性 (Item Properties):

    • order: 定义项目的排列顺序。
    • flex-grow: 定义项目的放大比例。
    • flex-shrink: 定义项目的缩小比例。
    • flex-basis: 定义项目在分配多余空间前的默认大小。
    • flex (简写 for flex-grow, flex-shrink, flex-basis)。
    • align-self: 允许单个项目覆盖容器的 align-items 属性。

4. Grid 布局 (Grid Layout)

  • 容器属性 (Container Properties):

    • display: grid or inline-grid
    • grid-template-columns, grid-template-rows: 定义网格的列宽和行高。
    • grid-template-areas: 定义网格区域。
    • grid-template (简写)。
    • gap, row-gap, column-gap: 设置网格线之间的间距。
    • justify-items: 定义单元格内容在行轴（水平）方向的对齐方式。
    • align-items: 定义单元格内容在列轴（垂直）方向的对齐方式。
    • place-items (简写 for align-items and justify-items)。
    • justify-content: 定义整个网格在容器行轴（水平）方向的对齐方式。
    • align-content: 定义整个网格在容器列轴（垂直）方向的对齐方式。
    • place-content (简写 for align-content and justify-content)。
    • grid-auto-columns, grid-auto-rows: 定义隐式网格轨道的尺寸。
    • grid-auto-flow: 定义自动布局算法如何工作 (row | column | dense)。
    • grid (复杂的简写)。

  • 项目属性 (Item Properties):

    • grid-column-start, grid-column-end, grid-row-start, grid-row-end: 定义项目占据的网格线。
    • grid-column (简写)。
    • grid-row (简写)。
    • grid-area: 给项目命名或定义其占据的行列。
    • justify-self: 定义单个项目覆盖容器的 justify-items。
    • align-self: 定义单个项目覆盖容器的 align-items。
    • place-self (简写 for align-self and justify-self)。

5. 字体与文本 (Typography)

  • Font:

    • font-family: 设置字体族。
    • font-size: 设置字体大小。
    • font-weight: 设置字体粗细 (normal | bold | 100-900)。
    • font-style: 设置字体样式 (normal | italic | oblique)。
    • font-variant: 设置小型大写字母等变体。
    • line-height: 设置行高。
    • font (简写 for multiple font properties)。
    • @font-face: 引入自定义字体。
    • font-stretch, font-size-adjust, font-kerning, font-optical-sizing, etc. (更细致的字体控制)

  • Text:

    • color: 设置文本颜色。

    • text-align: 设置文本水平对齐方式 (left | right | center | justify)。

    • vertical-align: 设置元素的垂直对齐方式 (常用于 inline 或 table-cell 元素)。

    • text-decoration: 设置文本装饰 (none | underline | overline | line-through)。

      • text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness (更细致控制)。

    • text-transform: 控制文本大小写 (none | capitalize | uppercase | lowercase)。

    • text-indent: 设置首行缩进。

    • letter-spacing: 设置字符间距。

    • word-spacing: 设置单词间距。

    • white-space: 控制如何处理元素内的空白 (normal | nowrap | pre | pre-wrap | pre-line)。

    • text-shadow: 给文本添加阴影。

    • text-overflow: 控制溢出内容的显示方式 (clip | ellipsis)。

    • word-break: 控制单词如何断行 (normal | break-all | keep-all)。

    • overflow-wrap (or word-wrap): 允许在长单词或 URL 内部断行 (normal | break-word)。

    • direction: 设置文本方向 (ltr | rtl)。

    • unicode-bidi: 配合 direction 使用。

    • writing-mode: 设置文本的书写方向 (水平或垂直)。

    • text-orientation: 配合垂直 writing-mode 使用。

6. 背景与颜色 (Backgrounds & Colors)

  • background-color: 设置背景颜色。
  • background-image: 设置背景图片。
  • background-repeat: 控制背景图片如何重复 (repeat | repeat-x | repeat-y | no-repeat | space | round)。
  • background-position: 设置背景图片的起始位置。
  • background-size: 设置背景图片的尺寸 (auto | cover | contain | | )。
  • background-attachment: 设置背景图片是否随滚动移动 (scroll | fixed | local)。
  • background-clip: 指定背景绘制区域 (border-box | padding-box | content-box | text)。
  • background-origin: 指定 background-position 属性的原点 (border-box | padding-box | content-box)。
  • background-blend-mode: 设置背景层之间的混合模式。
  • background (简写 for multiple background properties)。
  • color: (见文本部分) 设置前景色（主要是文本颜色）。

7. 列表 (Lists)

  • list-style-type: 设置列表项标记的类型 (disc, circle, square, decimal, none, etc.)。
  • list-style-image: 使用图片作为列表项标记。
  • list-style-position: 设置列表项标记的位置 (inside | outside)。
  • list-style (简写)。

8. 表格 (Tables)

  • border-collapse: 控制表格边框是合并还是分离 (collapse | separate)。
  • border-spacing: 当 border-collapse 为 separate 时，设置单元格间距。
  • caption-side: 设置表格标题的位置 (top | bottom)。
  • empty-cells: 控制是否显示空单元格的边框和背景 (show | hide)。
  • table-layout: 控制表格布局算法 (auto | fixed)。

9. 过渡与动画 (Transitions & Animations)

  • Transitions:

    • transition-property: 指定应用过渡效果的 CSS 属性名称。
    • transition-duration: 指定过渡效果花费的时间。
    • transition-timing-function: 指定过渡效果的速度曲线 (linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(), steps())。
    • transition-delay: 指定过渡效果何时开始。
    • transition (简写)。

  • Animations:

    • animation-name: 指定 @keyframes 动画的名称。
    • animation-duration: 指定动画完成一个周期花费的时间。
    • animation-timing-function: 指定动画的速度曲线。
    • animation-delay: 指定动画何时开始。
    • animation-iteration-count: 指定动画播放次数 (infinite | )。
    • animation-direction: 指定动画是否反向播放 (normal | reverse | alternate | alternate-reverse)。
    • animation-fill-mode: 指定动画结束后元素的状态 (none | forwards | backwards | both)。
    • animation-play-state: 指定动画是运行还是暂停 (running | paused)。
    • animation (简写)。
    • @keyframes: 定义动画的关键帧。

10. 用户界面 (User Interface)

  • cursor: 设置鼠标指针悬停时的样式。

  • outline: 在元素周围绘制一条轮廓线（不影响布局）。

    • outline-width, outline-style, outline-color, outline-offset

  • resize: 控制用户是否可以调整元素尺寸 (none | both | horizontal | vertical)。

  • user-select: 控制用户是否能选择元素内的文本 (none | auto | text | all)。

  • pointer-events: 控制元素在什么情况下成为鼠标事件的目标 (auto | none | etc.)。

  • appearance: 允许改变元素的默认平台原生外观 (none | auto | etc.)。

  • caret-color: 设置输入框光标的颜色。

  • scroll-behavior: 控制滚动是瞬时还是平滑 (auto | smooth)。

11. 滤镜与混合模式 (Filters & Blend Modes)

  • filter: 应用模糊、亮度、对比度等图形效果。
  • backdrop-filter: 对元素背后的区域应用图形效果。
  • mix-blend-mode: 设置元素内容与其父元素内容或元素背景的混合模式。
  • background-blend-mode: (见背景部分) 设置背景层之间的混合模式。

12. 变换 (Transforms)

  • transform: 对元素进行 2D 或 3D 变换 ( translate, rotate, scale, skew, matrix, etc.)。
  • transform-origin: 设置变换的原点。
  • transform-style: 设置子元素如何在 3D 空间中呈现 (flat | preserve-3d)。
  • perspective: 为 3D 变换元素设置透视效果 (应用于父元素)。
  • perspective-origin: 设置 perspective 属性的基点。
  • backface-visibility: 定义当元素背面朝向观察者时是否可见 (visible | hidden)。

13. 多列布局 (Multi-column Layout)

  • column-count: 指定元素的列数。

  • column-width: 指定列的理想宽度。

  • columns (简写 for column-width and column-count)。

  • column-gap: 设置列之间的间距。

  • column-rule: 设置列之间的分隔线 (类似 border)。

    • column-rule-width, column-rule-style, column-rule-color

  • column-span: 指定元素应跨越多少列 (none | all)。

  • break-before, break-after, break-inside: 控制元素前后或内部的列或页面中断。

14. 变量 (Custom Properties / Variables)

  • --* (e.g., --main-color): 定义 CSS 变量。
  • var(): 使用 CSS 变量。

15. 内容生成与计数器 (Generated Content & Counters)

  • content: 与 ::before 和 ::after 伪元素配合使用，插入生成的内容 (字符串, attr(), url(), counter(), etc.)。
  • quotes: 定义嵌套引用的引号类型。
  • counter-reset: 创建或重置一个或多个计数器。
  • counter-increment: 增加一个或多个计数器的值。
  • counter-set: 设置一个或多个计数器的值。

16. 形状与遮罩 (Shapes & Masking)

  • clip-path: 创建一个剪切区域，仅显示区域内的部分。
  • mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, mask-composite: 使用图像或 SVG 作为遮罩。
  • mask (简写)。
  • shape-outside: 定义一个形状，让内联内容可以环绕它。
  • shape-margin: 设置 shape-outside 的外边距。
  • shape-image-threshold: 设置从图像提取形状时的透明度阈值。

17. 其他重要属性/概念

  • 逻辑属性 (Logical Properties): 例如 margin-inline-start, padding-block-end, border-start-start-radius 等。它们是基于书写模式 (writing-mode) 的，比物理方向 (left, right, top, bottom) 更灵活。
  • 滚动捕捉 (Scroll Snap): scroll-snap-type, scroll-snap-align, scroll-padding, scroll-margin 等，用于创建平滑的滚动捕捉效果。
  • 包含 (Containment): contain: 向浏览器指示元素的子树是独立的，用于性能优化 (none | strict | content | size | layout | style | paint)。
  • Will Change: will-change: 提前告知浏览器元素将要发生哪些变化，以便浏览器进行优化。

重要的 @ 规则 (At-Rules):

这些不是属性，但与 CSS 紧密相关：

  • @import: 导入其他样式表。
  • @media: 应用媒体查询，实现响应式设计。
  • @font-face: 定义自定义字体。
  • @keyframes: 定义动画的关键帧。
  • @supports: 基于浏览器是否支持某个 CSS 特性来应用样式（特性查询）。
  • @charset: 指定样式表的字符编码。
  • @namespace: 定义 XML 命名空间。
  • @page: 用于打印样式，设置页面的尺寸、边距等。
  • @layer: 定义级联层，更好地控制样式优先级。

这个列表虽然很长，但仍然可能遗漏一些非常特定或实验性的属性。强烈建议 查阅权威的 CSS 参考文档，例如 MDN Web Docs (Mozilla Developer Network) ，它是学习和查找 CSS 属性最全面、最准确的资源。

avatar
文章
阅读
粉丝