← 返回首页
margin-top - CSS：层叠样式表 | MDN
HTML

HTML: Markup language

HTML reference HTML guides Markup languages
CSS

CSS: Styling language

CSS reference CSS guides Layout cookbook
JavaScriptJS

JavaScript: Scripting language

JS reference JS guides
Web APIs

Web APIs: Programming interfaces

Web API reference Web API guides
All

All web technology

Technologies Topics
Learn

Learn web development

Frontend developer course Learn HTML Learn CSS Learn JavaScript
Tools

Discover our tools

About

Get to know MDN better

Blog
切换侧边栏
  1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. 属性
  5. margin-top
主题
  • 跟随系统
  • 浅色
  • 深色
中文 (简体)
记住语言 了解更多

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

margin-top

基线 广泛可用 *

自 2015年7月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

* 此特性的某些部分的支持程度可能有所不同。

margin-top CSS 属性用于设置元素的顶部外边距外边距区域。正值使它离相邻元素更远，而负值使它更靠近相邻元素。

本文内容

尝试一下

margin-top: 1em;
margin-top: 10%;
margin-top: 10px;
margin-top: 0;
<section id="default-example"> <div id="container"> <div class="row"></div> <div class="row transition-all" id="example-element"></div> <div class="row"></div> </div> </section>
#container { width: 300px; height: 200px; display: flex; align-content: flex-start; flex-direction: column; justify-content: flex-start; } .row { height: 33.33%; display: inline-block; border: solid #ce7777 10px; background-color: #2b3a55; flex-shrink: 0; } #example-element { border: solid 10px #ffbf00; background-color: #2b3a55; }

此属性对于不可替换的内联元素没有效果，比如 <span> 或 <code>。

语法

css
/* <length> 值 */ margin-top: 10px; /* 绝对长度 */ margin-top: 1em; /* 相对与文本的大小 */ margin-top: 5%; /* 相对于最近的块容器的宽度 */ /* 关键字值 */ margin-top: auto; /* 全局关键字值 */ margin-top: inherit; margin-top: initial; margin-top: revert; margin-top: revert-layer; margin-top: unset;

margin-top 属性可以用关键字 auto、<length> 或 <percentage> 来设置。其值可以是正值、负值或零。

值

<length>

设置固定边距大小。

<percentage>

相对于包含块的内联尺寸（对于竖排语言则是宽度，这由 writing-mode 定义）的百分比边距大小。

auto

浏览器选择一个合适的值来使用。参见 margin。

形式语法

margin-top =
<length-percentage> |
auto |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
此语法反映了基于 CSS Anchor Positioning Module Level 1, CSS Box Model Module Level 4, CSS Values and Units Module Level 4 的最新标准。并非所有浏览器都已实现全部内容。有关支持信息，请参阅浏览器兼容性。

示例

将上边距设置为正值和负值

css
.content { margin-top: 5%; } .sidebox { margin-top: 10px; } .logo { margin-top: -5px; } #footer { margin-top: 1em; }

规范

规范
CSS Box Model Module Level 3
# margin-physical

浏览器兼容性

启用 JavaScript 以查看此浏览器兼容性表。

参见

帮助改进 MDN

此页面对您有帮助吗？
是 否
了解如何参与贡献

此页面最后更新于 2025年11月10日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题
清除筛选输入
  1. CSS
  2. 指南
  3. 模块
    1. Anchor positioning
    2. CSS 动画
    3. CSS 背景和边框
    4. CSS Basic User Interface
    5. Borders and box decorations
    6. CSS 盒子对齐
    7. CSS 基础框盒模型
    8. Box sizing
    9. Cascading and inheritance
    10. CSS 颜色调整
    11. CSS 颜色
    12. Compositing and blending
    13. Conditional rules
    14. CSS 局限
    15. CSS 计数器样式
    16. CSS 对象模型视图
    17. Custom functions and mixins
    18. Custom highlight API
    19. Custom properties for cascading variables
    20. 显示
    21. Easing functions
    22. Environment variables
    23. Filter effects
    24. CSS 弹性盒子布局
    25. Font loading
    26. CSS 字体
    27. CSS 片段
    28. Gaps
    29. CSS 生成内容
    30. 网格布局
    31. Images
    32. Inline layout
    33. CSS 列表与计数器
    34. CSS 逻辑属性与逻辑值
    35. CSS Masking
    36. 媒体查询
    37. Motion path
    38. CSS 多列布局
    39. Namespaces
    40. CSS 嵌套
    41. Overflow
    42. Overscroll behavior
    43. CSS 分页媒体
    44. CSS 定位布局
    45. Properties and values API
    46. Pseudo-elements
    47. Round display
    48. Ruby layout
    49. Scoping
    50. Scroll anchoring
    51. CSS 滚动吸附
    52. Scroll-driven animations
    53. CSS Scrollbars
    54. CSS 选择器
    55. CSS 影子部件
    56. CSS 形状
    57. Syntax
    58. CSS Table
    59. CSS 文本
    60. CSS 文本装饰
    61. CSS Transforms
    62. CSS 过渡
    63. CSS 值和单位
    64. CSS 视图过渡
    65. Viewport
    66. WebXR DOM overlays
    67. CSS 书写模式
  4. 锚点定位
    1. Using anchor positioning
    2. Handling overflow
    3. Anchored container queries
  5. 动画
    1. 动画性 CSS 属性
    2. 使用 CSS 动画
  6. 背景和边框
    1. 多个背景的应用
    2. 调整背景图片的大小
    3. SVG 背景缩放
  7. 盒对齐
    1. Overview
    2. 区块、绝对定位和表格布局中的盒子对齐
    3. 弹性盒布局中的盒对齐方式
    4. In grid layout
    5. In multi-column layout
  8. 盒模型
    1. CSS 基础框盒模型介绍
    2. 掌握外边距折叠
  9. Box sizing
    1. Aspect ratios
  10. 层叠
    1. CSS 层叠
    2. 继承
    3. 优先级
    4. 属性值处理
    5. CSS 的简写属性
  11. Cascading variables
    1. 使用 CSS 自定义属性（变量）
  12. 颜色
    1. 使用 CSS 为 HTML 元素应用颜色
    2. 颜色值
    3. Using relative colors
    4. 恰当运用颜色
    5. 无障碍：理解颜色和亮度
    6. Web 无障碍：色彩对比度
  13. 多列
    1. Basic Concepts of Multicol
    2. 多列布局的样式
    3. 使用 CSS 的多列布局
    4. Spanning and balancing columns
    5. 处理 Multicol 中的溢出
    6. Handling content breaks
  14. 条件规则
    1. 使用特性查询
    2. Using container scroll-state queries
  15. CSS 局限
    1. CSS 容器查询
    2. 使用 CSS 局限
    3. Using container size and style queries
  16. 计数器
    1. 使用 CSS 计数器
  17. CSS 对象模型视图
    1. Coordinate systems (API)
    2. 视口概念
  18. Custom functions and mixins
    1. Using CSS custom functions
  19. 流式布局
    1. 常规流中的块和内联布局
    2. CSS 流式布局
    3. 流式布局和溢出
    4. 流式布局和书写模式
    5. 应用或脱离流式布局
    6. 布局和包含块
    7. 格式化上下文
    8. 区块格式化上下文
    9. 行内格式化上下文
    10. Using multi-keyword syntax
    11. 视觉格式化模型
  20. Environment variables
    1. Using environment variables
  21. 滤镜效果
    1. Using filter effects
  22. 弹性盒布局
    1. flex 布局的基本概念
    2. 弹性盒子与其他布局方法的联系
    3. 对齐弹性容器中的项目
    4. Flex 项排序
    5. 控制弹性元素在主轴上的比例
    6. 掌握弹性物件的包装
    7. 弹性盒子的典型用例
  23. 字体
    1. OpenType 字体特性指南
    2. Variable fonts guide
    3. Web 开放字体格式（WOFF）
  24. 网格布局
    1. 网格布局的基本概念
    2. 网格布局和其他布局方法的联系
    3. CSS 网格中基于线的定位
    4. 网格模板区域
    5. 使用具名网格线布局
    6. CSS 网格布局中的自动定位
    7. 网格布局中的元素对齐
    8. CSS 网格，逻辑值和书写模式
    9. CSS 网格布局和无障碍
    10. 利用 CSS 网格布局实现常用布局
    11. Subgrid
    12. 瀑布流布局
  25. 图片
    1. 使用 CSS 渐变
    2. Using object-view-box
    3. 可替换元素
    4. 在 CSS 中实现图像合并
  26. 列表
    1. 使列表缩进一致
  27. 逻辑属性
    1. 逻辑属性与逻辑值的基本概念
    2. 用于浮动和定位的逻辑属性
    3. 用于外边距、边框和内边距的逻辑属性
    4. 逻辑尺寸属性
  28. Masking
    1. Introduction
    2. Clipping
    3. Multiple masks
    4. Mask properties
  29. 媒体查询
    1. 使用媒体查询
    2. For accessibility
    3. 使用编程方法测试媒体查询
    4. 打印
  30. 嵌套样式规则
    1. CSS at 规则嵌套
    2. CSS 嵌套与优先级
    3. 使用 CSS 嵌套
  31. 溢出
    1. Creating carousels
  32. 定位
    1. 层叠上下文
    2. 层叠与浮动
    3. 理解 CSS 的 z-index 属性
    4. 使用 z-index
    5. 堆叠时不使用 z-index 属性
  33. Properties and Values API
    1. CSS Houdini
    2. Registering custom properties in CSS
  34. 滚动锚定
    1. Overview
  35. Scroll-driven animations
    1. Scroll-driven animation timelines
    2. Understanding timeline insets
    3. Understanding timeline range names
  36. 滚动吸附
    1. 滚动吸附的基本概念
    2. Using scroll snap events
  37. 选择器
    1. Selectors and combinators
    2. Selector structure
    3. 隐私与:visited 选择器
    4. 使用 :target
  38. 形状
    1. CSS 的图形（Shape）概览
    2. 使用 box 值指定形状
    3. Image-based shapes
    4. Using shape-outside
    5. 形状生成器
  39. 语法
    1. 语法
    2. CSS 注释
    3. At 规则
    4. Error handling
  40. 文本
    1. Wrapping and breaking text
    2. 处理空白字符
  41. Text decoration
    1. Text shadows
  42. 变换
    1. 使用 CSS 变换
  43. 过渡
    1. 使用 CSS 过渡
  44. 值和单位
    1. CSS 属性值定义语法
    2. Numeric data types
    3. Textual data types
    4. Using math functions
    5. Using typed arithmetic
  45. Writing modes
    1. Introduction
    2. Vertical form controls
  46. How to
  47. Layout cookbook
    1. 指南：媒体对象
    2. 列布局
    3. 居中一个元素
    4. 粘性页脚
    5. 分离式导航菜单
    6. 面包屑导航
    7. List group with badges
    8. Pagination
    9. 卡片
    10. Grid wrapper
    11. Contribute a recipe
      1. 手册模版
  48. 工具
    1. Border-image 生成器
    2. 圆角边框生成器
    3. Box-shadow 生成器
    4. 颜色格式转换器
    5. 颜色混合器
    6. 形状生成器
  50. CSS 参考
  51. 属性
    1. -moz-*
      1. -moz-float-edge
      2. -moz-force-broken-image-icon
      3. -moz-orient
      4. -moz-user-focus
      5. -moz-user-input
    2. -webkit-*
      1. -webkit-border-before
      2. -webkit-box-reflect
      3. -webkit-mask-box-image
      4. -webkit-mask-composite
      5. -webkit-mask-position-x
      6. -webkit-mask-position-y
      7. -webkit-mask-repeat-x
      8. -webkit-mask-repeat-y
      9. -webkit-tap-highlight-color
      10. -webkit-text-fill-color
      11. -webkit-text-security
      12. -webkit-text-stroke
      13. -webkit-text-stroke-color
      14. -webkit-text-stroke-width
      15. -webkit-touch-callout
    3. 自定义属性（--*）：CSS 变量
    4. accent-color
    5. align-*
      1. align-content
      2. align-items
      3. align-self
    6. alignment-baseline
    7. all
    8. anchor-name
    9. anchor-scope
    10. animation-*
      1. animation-composition
      2. animation-delay
      3. animation-direction
      4. animation-duration
      5. animation-fill-mode
      6. animation-iteration-count
      7. animation-name
      8. animation-play-state
      9. animation-range
      10. animation-range-end
      11. animation-range-start
      12. animation-timeline
      13. animation-timing-function
    11. animation
    12. appearance
    13. aspect-ratio
    14. backdrop-filter
    15. backface-visibility
    16. background-*
      1. background-attachment
      2. background-blend-mode
      3. background-clip
      4. background-color
      5. background-image
      6. background-origin
      7. background-position
      8. background-position-x
      9. background-position-y
      10. background-repeat
      11. background-repeat-x
      12. background-repeat-y
      13. background-size
    17. background
    18. baseline-shift
    19. baseline-source
    20. block-size
    21. border-*
      1. border-block
      2. border-block-color
      3. border-block-end
      4. border-block-end-color
      5. border-block-end-style
      6. border-block-end-width
      7. border-block-start
      8. border-block-start-color
      9. border-block-start-style
      10. border-block-start-width
      11. border-block-style
      12. border-block-width
      13. border-bottom
      14. border-bottom-color
      15. border-bottom-left-radius
      16. border-bottom-right-radius
      17. border-bottom-style
      18. border-bottom-width
      19. border-collapse
      20. border-color
      21. border-end-end-radius
      22. border-end-start-radius
      23. border-image
      24. border-image-outset
      25. border-image-repeat
      26. border-image-slice
      27. border-image-source
      28. border-image-width
      29. border-inline
      30. border-inline-color
      31. border-inline-end
      32. border-inline-end-color
      33. border-inline-end-style
      34. border-inline-end-width
      35. border-inline-start
      36. border-inline-start-color
      37. border-inline-start-style
      38. border-inline-start-width
      39. border-inline-style
      40. border-inline-width
      41. border-left
      42. border-left-color
      43. border-left-style
      44. border-left-width
      45. border-radius
      46. border-right
      47. border-right-color
      48. border-right-style
      49. border-right-width
      50. border-spacing
      51. border-start-end-radius
      52. border-start-start-radius
      53. border-style
      54. border-top
      55. border-top-color
      56. border-top-left-radius
      57. border-top-right-radius
      58. border-top-style
      59. border-top-width
      60. border-width
    22. border
    23. bottom
    24. box-*
      1. box-align
      2. box-decoration-break
      3. box-direction
      4. box-flex
      5. box-flex-group
      6. box-lines
      7. box-ordinal-group
      8. box-orient
      9. box-pack
      10. box-shadow
      11. box-sizing
    25. break-*
      1. break-after
      2. break-before
      3. break-inside
    26. caption-side
    27. caret-*
      1. caret-animation
      2. caret-color
      3. caret-shape
    28. caret
    29. clear
    30. clip-path
    31. clip-rule
    32. clip
    33. color-*
      1. color-interpolation
      2. color-interpolation-filters
      3. color-scheme
    34. color
    35. column-*
      1. column-count
      2. column-fill
      3. column-gap
      4. column-height
      5. column-rule
      6. column-rule-color
      7. column-rule-style
      8. column-rule-visibility-items
      9. column-rule-width
      10. column-span
      11. column-width
      12. column-wrap
    36. columns
    37. contain-*
      1. contain-intrinsic-block-size
      2. contain-intrinsic-height
      3. contain-intrinsic-inline-size
      4. contain-intrinsic-size
      5. contain-intrinsic-width
    38. contain
    39. container-name
    40. container-type
    41. container
    42. content-visibility
    43. content
    44. corner-*
      1. corner-block-end-shape
      2. corner-block-start-shape
      3. corner-bottom-left-shape
      4. corner-bottom-right-shape
      5. corner-bottom-shape
      6. corner-end-end-shape
      7. corner-end-start-shape
      8. corner-inline-end-shape
      9. corner-inline-start-shape
      10. corner-left-shape
      11. corner-right-shape
      12. corner-shape
      13. corner-start-end-shape
      14. corner-start-start-shape
      15. corner-top-left-shape
      16. corner-top-right-shape
      17. corner-top-shape
    45. counter-*
      1. counter-increment
      2. counter-reset
      3. counter-set
    46. cursor
    47. cx
    48. cy
    49. d
    50. direction
    51. display
    52. dominant-baseline
    53. dynamic-range-limit
    54. empty-cells
    55. field-sizing
    56. fill-opacity
    57. fill-rule
    58. fill
    59. filter
    60. flex-*
      1. flex-basis
      2. flex-direction
      3. flex-flow
      4. flex-grow
      5. flex-shrink
      6. flex-wrap
    61. flex
    62. float
    63. flood-color
    64. flood-opacity
    65. font-*
      1. font-family
      2. font-feature-settings
      3. font-kerning
      4. font-language-override
      5. font-optical-sizing
      6. font-palette
      7. font-size
      8. font-size-adjust
      9. font-smooth
      10. font-stretch
      11. font-style
      12. font-synthesis
      13. font-synthesis-position
      14. font-synthesis-small-caps
      15. font-synthesis-style
      16. font-synthesis-weight
      17. font-variant
      18. font-variant-alternates
      19. font-variant-caps
      20. font-variant-east-asian
      21. font-variant-emoji
      22. font-variant-ligatures
      23. font-variant-numeric
      24. font-variant-position
      25. font-variation-settings
      26. font-weight
      27. font-width
    66. font
    67. forced-color-adjust
    68. gap
    69. grid-*
      1. grid-area
      2. grid-auto-columns
      3. grid-auto-flow
      4. grid-auto-rows
      5. grid-column
      6. grid-column-end
      7. grid-column-start
      8. grid-row
      9. grid-row-end
      10. grid-row-start
      11. grid-template
      12. grid-template-areas
      13. grid-template-columns
      14. grid-template-rows
    70. grid
    71. hanging-punctuation
    72. height
    73. hyphenate-character
    74. hyphenate-limit-chars
    75. hyphens
    76. image-*
      1. image-orientation
      2. image-rendering
      3. image-resolution
    77. initial-letter
    78. inline-size
    79. inset-*
      1. inset-block
      2. inset-block-end
      3. inset-block-start
      4. inset-inline
      5. inset-inline-end
      6. inset-inline-start
    80. inset
    81. interactivity
    82. interest-*
      1. interest-delay
      2. interest-delay-end
      3. interest-delay-start
    83. interpolate-size
    84. isolation
    85. justify-*
      1. justify-content
      2. justify-items
      3. justify-self
    86. left
    87. letter-spacing
    88. lighting-color
    89. line-*
      1. line-break
      2. line-clamp
      3. line-height
      4. line-height-step
    90. list-*
      1. list-style
      2. list-style-image
      3. list-style-position
      4. list-style-type
    91. margin-*
      1. margin-block
      2. margin-block-end
      3. margin-block-start
      4. margin-bottom
      5. margin-inline
      6. margin-inline-end
      7. margin-inline-start
      8. margin-left
      9. margin-right
      10. margin-top
      11. margin-trim
    92. margin
    93. marker-*
      1. marker-end
      2. marker-mid
      3. marker-start
    94. marker
    95. mask-*
      1. mask-border
      2. mask-border-mode
      3. mask-border-outset
      4. mask-border-repeat
      5. mask-border-slice
      6. mask-border-source
      7. mask-border-width
      8. mask-clip
      9. mask-composite
      10. mask-image
      11. mask-mode
      12. mask-origin
      13. mask-position
      14. mask-repeat
      15. mask-size
      16. mask-type
    96. mask
    97. math-*
      1. math-depth
      2. math-shift
      3. math-style
    98. max-*
      1. max-block-size
      2. max-height
      3. max-inline-size
      4. max-width
    99. min-*
      1. min-block-size
      2. min-height
      3. min-inline-size
      4. min-width
    100. mix-blend-mode
    101. object-*
      1. object-fit
      2. object-position
      3. object-view-box
    102. offset-*
      1. offset-anchor
      2. offset-distance
      3. offset-path
      4. offset-position
      5. offset-rotate
    103. offset
    104. opacity
    105. order
    106. orphans
    107. outline-*
      1. outline-color
      2. outline-offset
      3. outline-style
      4. outline-width
    108. outline
    109. overflow-*
      1. overflow-anchor
      2. overflow-block
      3. overflow-clip-margin
      4. overflow-inline
      5. overflow-wrap
      6. overflow-x
      7. overflow-y
    110. overflow
    111. overlay
    112. overscroll-*
      1. overscroll-behavior
      2. overscroll-behavior-block
      3. overscroll-behavior-inline
      4. overscroll-behavior-x
      5. overscroll-behavior-y
    113. padding-*
      1. padding-block
      2. padding-block-end
      3. padding-block-start
      4. padding-bottom
      5. padding-inline
      6. padding-inline-end
      7. padding-inline-start
      8. padding-left
      9. padding-right
      10. padding-top
    114. padding
    115. page-*
      1. page-break-after
      2. page-break-before
      3. page-break-inside
    116. page
    117. paint-order
    118. perspective-origin
    119. perspective
    120. place-*
      1. place-content
      2. place-items
      3. place-self
    121. pointer-events
    122. position-*
      1. position-anchor
      2. position-area
      3. position-try
      4. position-try-fallbacks
      5. position-try-order
      6. position-visibility
    123. position
    124. print-color-adjust
    125. quotes
    126. r
    127. reading-flow
    128. reading-order
    129. resize
    130. right
    131. rotate
    132. row-gap
    133. row-rule-visibility-items
    134. ruby-*
      1. ruby-align
      2. ruby-overhang
      3. ruby-position
    135. rule-visibility-items
    136. rx
    137. ry
    138. scale
    139. scroll-*
      1. scroll-behavior
      2. scroll-initial-target
      3. scroll-margin
      4. scroll-margin-block
      5. scroll-margin-block-end
      6. scroll-margin-block-start
      7. scroll-margin-bottom
      8. scroll-margin-inline
      9. scroll-margin-inline-end
      10. scroll-margin-inline-start
      11. scroll-margin-left
      12. scroll-margin-right
      13. scroll-margin-top
      14. scroll-marker-group
      15. scroll-padding
      16. scroll-padding-block
      17. scroll-padding-block-end
      18. scroll-padding-block-start
      19. scroll-padding-bottom
      20. scroll-padding-inline
      21. scroll-padding-inline-end
      22. scroll-padding-inline-start
      23. scroll-padding-left
      24. scroll-padding-right
      25. scroll-padding-top
      26. scroll-snap-align
      27. scroll-snap-stop
      28. scroll-snap-type
      29. scroll-target-group
      30. scroll-timeline
      31. scroll-timeline-axis
      32. scroll-timeline-name
    140. scrollbar-*
      1. scrollbar-color
      2. scrollbar-gutter
      3. scrollbar-width
    141. shape-*
      1. shape-image-threshold
      2. shape-margin
      3. shape-outside
      4. shape-rendering
    142. speak-as
    143. stop-color
    144. stop-opacity
    145. stroke-*
      1. stroke-dasharray
      2. stroke-dashoffset
      3. stroke-linecap
      4. stroke-linejoin
      5. stroke-miterlimit
      6. stroke-opacity
      7. stroke-width
    146. stroke
    147. tab-size
    148. table-layout
    149. text-*
      1. text-align
      2. text-align-last
      3. text-anchor
      4. text-autospace
      5. text-box
      6. text-box-edge
      7. text-box-trim
      8. text-combine-upright
      9. text-decoration
      10. text-decoration-color
      11. text-decoration-inset
      12. text-decoration-line
      13. text-decoration-skip
      14. text-decoration-skip-ink
      15. text-decoration-style
      16. text-decoration-thickness
      17. text-emphasis
      18. text-emphasis-color
      19. text-emphasis-position
      20. text-emphasis-style
      21. text-indent
      22. text-justify
      23. text-orientation
      24. text-overflow
      25. text-rendering
      26. text-shadow
      27. text-size-adjust
      28. text-spacing-trim
      29. text-transform
      30. text-underline-offset
      31. text-underline-position
      32. text-wrap
      33. text-wrap-mode
      34. text-wrap-style
    150. timeline-scope
    151. top
    152. touch-action
    153. transform-*
      1. transform-box
      2. transform-origin
      3. transform-style
    154. transform
    155. transition-*
      1. transition-behavior
      2. transition-delay
      3. transition-duration
      4. transition-property
      5. transition-timing-function
    156. transition
    157. translate
    158. unicode-bidi
    159. user-modify
    160. user-select
    161. vector-effect
    162. vertical-align
    163. view-*
      1. view-timeline
      2. view-timeline-axis
      3. view-timeline-inset
      4. view-timeline-name
      5. view-transition-class
      6. view-transition-name
      7. view-transition-scope
    164. visibility
    165. white-space
    166. white-space-collapse
    167. widows
    168. width
    169. will-change
    170. word-break
    171. word-spacing
    172. writing-mode
    173. x
    174. y
    175. z-index
    176. zoom
  52. 选择器
    1. & 嵌套选择器
    2. 属性选择器
    3. 类选择器
    4. ID 选择器
    5. Keyframe selectors
    6. 命名空间分隔符
    7. 选择器列表
    8. 类型选择器
    9. 通配选择器
  53. 关系选择器
    1. 子组合器
    2. 列组合器
    3. 后代选择器
    4. 接续兄弟组合器
    5. 后续兄弟选择器
  54. 伪类
    1. :-moz-*
      1. :-moz-broken
      2. :-moz-drag-over
      3. :-moz-first-node
      4. :-moz-handler-blocked
      5. :-moz-handler-crashed
      6. :-moz-handler-disabled
      7. :-moz-last-node
      8. :-moz-loading
      9. :-moz-locale-dir(ltr)
      10. :-moz-locale-dir(rtl)
      11. :blank
      12. :-moz-submit-invalid
      13. :-moz-suppressed
      14. :-moz-user-disabled
      15. :-moz-window-inactive
    2. :active-view-transition
    3. :active-view-transition-type()
    4. :active
    5. :any-link
    6. :autofill
    7. :blank
    8. :buffering
    9. :checked
    10. :current
    11. :default
    12. :defined
    13. :dir()
    14. :disabled
    15. :empty
    16. :enabled
    17. :first-child
    18. :first-of-type
    19. :first
    20. :focus-visible
    21. :focus-within
    22. :focus
    23. :fullscreen
    24. :future
    25. :has-slotted
    26. :has()
    27. :heading
    28. :heading()
    29. :host-context()
    30. :host
    31. :host()
    32. :hover
    33. :in-range
    34. :indeterminate
    35. :interest-source
    36. :interest-target
    37. :invalid
    38. :is()
    39. :lang()
    40. :last-child
    41. :last-of-type
    42. :left
    43. :link
    44. :local-link
    45. :modal
    46. :muted
    47. :not()
    48. :nth-*
      1. :nth-child()
      2. :nth-last-child
      3. :nth-last-of-type
      4. :nth-of-type
    49. :only-child
    50. :only-of-type
    51. :open
    52. :optional
    53. :out-of-range
    54. :past
    55. :paused
    56. :picture-in-picture
    57. :placeholder-shown
    58. :playing
    59. :popover-open
    60. :read-only
    61. :read-write
    62. :required
    63. :right
    64. :root
    65. :scope
    66. :seeking
    67. :stalled
    68. :state()
    69. :target-*
      1. :target-after
      2. :target-before
      3. :target-current
    70. :target
    71. :user-invalid
    72. :user-valid
    73. :valid
    74. :visited
    75. :volume-locked
    76. :where()
    77. :xr-overlay
  55. 伪元素
    1. ::-moz-*
      1. ::-moz-color-swatch
      2. ::-moz-focus-inner
      3. ::-moz-list-bullet
      4. ::-moz-list-number
      5. ::-moz-meter-bar
      6. ::-moz-progress-bar
      7. ::-moz-range-progress
      8. ::-moz-range-thumb
      9. ::-moz-range-track
    2. ::-webkit-*
      1. ::-webkit-inner-spin-button
      2. ::-webkit-meter-bar
      3. ::-webkit-meter-even-less-good-value
      4. ::-webkit-meter-inner-element
      5. ::-webkit-meter-optimum-value
      6. ::-webkit-meter-suboptimum-value
      7. ::-webkit-progress-bar
      8. ::-webkit-progress-inner-element
      9. ::-webkit-progress-value
      10. ::-webkit-scrollbar
      11. ::-webkit-search-cancel-button
      12. ::-webkit-search-results-button
      13. ::-webkit-slider-runnable-track
      14. ::-webkit-slider-thumb
    3. ::after
    4. ::backdrop
    5. ::before
    6. ::checkmark
    7. ::column
    8. ::cue (:cue)
    9. ::details-content
    10. ::file-selector-button
    11. ::first-letter
    12. ::first-line (:first-line)
    13. ::grammar-error
    14. ::highlight()
    15. ::marker
    16. ::part()
    17. ::picker-icon
    18. ::picker()
    19. ::placeholder
    20. ::scroll-*
      1. ::scroll-button()
      2. ::scroll-marker
      3. ::scroll-marker-group
    21. ::search-text
    22. ::selection
    23. ::slotted()
    24. ::spelling-error
    25. ::target-text
    26. ::view-*
      1. ::view-transition
      2. ::view-transition-group
      3. ::view-transition-image-pair
      4. ::view-transition-new
      5. ::view-transition-old
  56. At 规则
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @custom-media
    6. @document
    7. @font-face
    8. @font-feature-values
    9. @font-palette-values
    10. @function
    11. @import
    12. @keyframes
    13. @layer
    14. @media
    15. @namespace
    16. @page
    17. @position-try
    18. @property
    19. @scope
    20. @starting-style
    21. @supports
    22. @view-transition
  57. Values
    1. !important
    2. fit-content
    3. inherit
    4. initial
    5. max-content
    6. min-content
    7. revert
    8. revert-layer
    9. revert-rule
    10. unset
  58. 类型
    1. <absolute-size>
    2. <alpha-value>
    3. <angle-percentage>
    4. <angle>
    5. <axis>
    6. <baseline-position>
    7. <basic-shape>
    8. <blend-mode>
    9. <box-edge>
    10. <calc-keyword>
    11. <calc-sum>
    12. <color-interpolation-method>
    13. <color>
    14. <content-distribution>
    15. <content-position>
    16. <corner-shape-value>
    17. <custom-ident>
    18. <dashed-function>
    19. <dashed-ident>
    20. dimension
    21. <display-box>
    22. <display-inside>
    23. <display-internal>
    24. <display-legacy>
    25. <display-listitem>
    26. <display-outside>
    27. <easing-function>
    28. <filter-function>
    29. <flex>
    30. <frequency-percentage>
    31. <frequency>
    32. <generic-family>
    33. <gradient>
    34. <hex-color>
    35. <hue-interpolation-method>
    36. <hue>
    37. <ident>
    38. <image>
    39. <integer>
    40. <length-percentage>
    41. <length>
    42. <line-style>
    43. <named-color>
    44. <number>
    45. <overflow-position>
    46. <overflow>
    47. <percentage>
    48. <position-area>
    49. <position>
    50. <ratio>
    51. <relative-size>
    52. <resolution>
    53. <rule-list>
    54. <self-position>
    55. <shape>
    56. <string>
    57. <system-color>
    58. <text-edge>
    59. <time-percentage>
    60. <time>
    61. <timeline-range-name>
    62. transform-function
    63. <url>
  59. 函数
    1. -moz-image-rect
    2. abs()
    3. acos()
    4. alpha()
    5. anchor-size()
    6. anchor()
    7. asin()
    8. atan()
    9. atan2()
    10. attr()
    11. blur()
    12. brightness()
    13. calc-size()
    14. calc()
    15. circle()
    16. clamp()
    17. color-mix()
    18. color()
    19. conic-gradient()
    20. contrast-color()
    21. contrast()
    22. cos()
    23. counter()
    24. counters()
    25. cross-fade()
    26. cubic-bezier()
    27. device-cmyk()
    28. drop-shadow()
    29. dynamic-range-limit-mix()
    30. element()
    31. ellipse()
    32. env()
    33. exp()
    34. fit-content()
    35. grayscale()
    36. hsl()
    37. hue-rotate()
    38. hwb()
    39. hypot()
    40. if()
    41. image-set()
    42. image()
    43. inset()
    44. invert()
    45. lab()
    46. lch()
    47. light-dark()
    48. linear-gradient()
    49. linear()
    50. log()
    51. matrix()
    52. matrix3d()
    53. max()
    54. min()
    55. minmax()
    56. mod()
    57. oklab()
    58. oklch()
    59. opacity()
    60. paint()
    61. path()
    62. perspective()
    63. polygon()
    64. pow()
    65. progress()
    66. radial-gradient()
    67. random()
    68. ray()
    69. rect()
    70. rem()
    71. repeat()
    72. repeating-conic-gradient()
    73. repeating-linear-gradient()
    74. repeating-radial-gradient()
    75. rgb()
    76. rotate()
    77. rotate3d()
    78. rotateX()
    79. rotateY()
    80. rotateZ()
    81. round()
    82. saturate()
    83. scale()
    84. scale3d()
    85. scaleX()
    86. scaleY()
    87. scaleZ()
    88. sepia()
    89. shape()
    90. sibling-count()
    91. sibling-index()
    92. sign()
    93. sin()
    94. skew()
    95. skewX()
    96. skewY()
    97. sqrt()
    98. steps()
    99. superellipse()
    100. symbols()
    101. tan()
    102. translate()
    103. translate3d()
    104. translateX()
    105. translateY()
    106. translateZ()
    107. type()
    108. url()
    109. var()
    110. xywh()

构建更美好互联网的蓝图。

MDN 参与贡献 开发者

本内容的部分版权归 mozilla.org 贡献者所有，©1998–2026。内容依据知识共享许可协议提供。