• Skip to main content
  • Skip to search
  • Skip to select language
MDN Web Docs
  • 参考手册
    • 概述 / Web 技术

      适用于开发者的 Web 技术参考手册

    • HTML

      Web 内容的结构

    • CSS

      用于描述文档样式的代码

    • JavaScript

      通用脚本语言

  • 开发指南
    • 概述 / MDN 学习区

      学习 Web 开发

    • MDN 学习区

      学习 Web 开发

    • HTML

      学习使用 HTML 构建 Web 内容

    • CSS

      学习使用 CSS 设置内容样式

    • JavaScript

      学习在浏览器中运行脚本

  • 更多中文网
  1. 面向开发者的 Web 技术
  2. CSS:层叠样式表
  3. CSS ruby layout

目录

  • Reference
  • Specifications
  • See also
  1. CSS
  2. 教程
  3. CSS 基础知识
  4. CSS 第一步
    1. CSS 第一步概述
    2. 什么是 CSS？
    3. CSS 入门
    4. CSS 的结构如何
    5. CSS 的工作原理
    6. 评估：设计传记页面
  5. CSS 构建块
    1. CSS 构建块概述
    2. CSS 选择器
    3. 类型、类别和 ID 选择器
    4. 属性选择器
    5. 伪类和伪元素
    6. 组合器
    7. 级联、特异性和继承
    8. 级联层
    9. 盒子模型
    10. 背景和边框
    11. 处理不同的文本方向
    12. 内容溢出
    13. CSS 值和单位
    14. 在 CSS 中调整项目大小
    15. 图片、媒体和表单元素
    16. 样式表
    17. 调试 CSS
    18. 组织你的 CSS
    19. 评估：基本 CSS 理解
    20. 评估：制作精美的信头纸
    21. 评估：一个很酷的盒子
  6. 设置文本样式
    1. 设置文本概览样式
    2. 基本文本和字体样式
    3. 样式列表
    4. 设置链接样式
    5. 网页字体
    6. 评估：排版社区学校主页
  7. CSS 布局
    1. CSS 布局概述
    2. CSS 布局简介
    3. 正常流量
    4. 弹性盒
    5. 网格
    6. 花车
    7. 定位
    8. 多列布局
    9. 响应式设计
    10. 媒体查询初学者指南
    11. 传统的布局方法
    12. 支持旧版浏览器
    13. 评估：基本布局理解
  8. 参考
  9. Modules
    1. CSS anchor positioning
    2. CSS animations
    3. CSS backgrounds and borders
    4. CSS basic user interface
    5. CSS box alignment
    6. CSS box model
    7. CSS box sizing
    8. CSS cascade and inheritance
    9. CSS custom properties for cascading variables
    10. CSS color adjustment
    11. CSS colors
    12. CSS compositing and blending
    13. CSS conditional rules
    14. CSS containment
    15. CSS counter styles
    16. CSS display
    17. CSS filter effects
    18. CSS flexible box layout
    19. CSS font loading
    20. CSS fonts
    21. CSS fragmentation
    22. CSS generated content
    23. CSS grid layout
    24. CSS images
    25. CSS lists and counters
    26. CSS logical properties and values
    27. CSS masking
    28. CSS media queries
    29. CSS miscellaneous
    30. CSS motion path
    31. CSS multi-column layout
    32. CSS namespaces
    33. CSS nesting
    34. CSS overflow
    35. CSS overscroll behavior
    36. CSS paged media
    37. CSS positioned layout
    38. CSS properties and values API
    39. CSS pseudo-elements
    40. CSS ruby layout
    41. CSS scoping
    42. CSS scroll-driven animations
    43. CSS scroll snap
    44. CSS scrollbars styling
    45. CSS selectors
    46. CSS shadow parts
    47. CSS shapes
    48. CSS syntax
    49. CSS table
    50. CSS text
    51. CSS text decoration
    52. CSS transforms
    53. CSS transitions
    54. CSS writing modes
    55. CSSOM view
  10. Properties
    1. -moz-*
      1. -moz-float-edge Non-standard Deprecated
      2. -moz-force-broken-image-icon Non-standard Deprecated
      3. -moz-image-region Non-standard
      4. -moz-orient Non-standard
      5. -moz-user-focus Non-standard Deprecated
      6. -moz-user-input Non-standard Deprecated
    2. -webkit-*
      1. -webkit-border-before Non-standard
      2. -webkit-box-reflect Non-standard
      3. -webkit-line-clamp
      4. -webkit-mask-box-image Non-standard
      5. -webkit-mask-composite Non-standard
      6. -webkit-mask-position-x Non-standard
      7. -webkit-mask-position-y Non-standard
      8. -webkit-mask-repeat-x Non-standard
      9. -webkit-mask-repeat-y Non-standard
      10. -webkit-tap-highlight-color Non-standard
      11. -webkit-text-fill-color
      12. -webkit-text-security Non-standard
      13. -webkit-text-stroke
      14. -webkit-text-stroke-color
      15. -webkit-text-stroke-width
      16. -webkit-touch-callout Non-standard
    3. accent-color
    4. align-*
      1. align-content
      2. align-items
      3. align-self
    5. all
    6. anchor-name Experimental
    7. animation-*
      1. animation
      2. animation-composition
      3. animation-delay
      4. animation-direction
      5. animation-duration
      6. animation-fill-mode
      7. animation-iteration-count
      8. animation-name
      9. animation-play-state
      10. animation-range Experimental
      11. animation-range-end Experimental
      12. animation-range-start Experimental
      13. animation-timeline Experimental
      14. animation-timing-function
    8. appearance
    9. aspect-ratio
    10. backdrop-filter
    11. backface-visibility
    12. background-*
      1. background
      2. background-attachment
      3. background-blend-mode
      4. background-clip
      5. background-color
      6. background-image
      7. background-origin
      8. background-position
      9. background-position-x
      10. background-position-y
      11. background-repeat
      12. background-size
    13. block-size
    14. border-*
      1. border
      2. border-block
      3. border-block-color
      4. border-block-end
      5. border-block-end-color
      6. border-block-end-style
      7. border-block-end-width
      8. border-block-start
      9. border-block-start-color
      10. border-block-start-style
      11. border-block-start-width
      12. border-block-style
      13. border-block-width
      14. border-bottom
      15. border-bottom-color
      16. border-bottom-left-radius
      17. border-bottom-right-radius
      18. border-bottom-style
      19. border-bottom-width
      20. border-collapse
      21. border-color
      22. border-end-end-radius
      23. border-end-start-radius
      24. border-image
      25. border-image-outset
      26. border-image-repeat
      27. border-image-slice
      28. border-image-source
      29. border-image-width
      30. border-inline
      31. border-inline-color
      32. border-inline-end
      33. border-inline-end-color
      34. border-inline-end-style
      35. border-inline-end-width
      36. border-inline-start
      37. border-inline-start-color
      38. border-inline-start-style
      39. border-inline-start-width
      40. border-inline-style
      41. border-inline-width
      42. border-left
      43. border-left-color
      44. border-left-style
      45. border-left-width
      46. border-radius
      47. border-right
      48. border-right-color
      49. border-right-style
      50. border-right-width
      51. border-spacing
      52. border-start-end-radius
      53. border-start-start-radius
      54. border-style
      55. border-top
      56. border-top-color
      57. border-top-left-radius
      58. border-top-right-radius
      59. border-top-style
      60. border-top-width
      61. border-width
    15. bottom
    16. box-*
      1. box-align Non-standard Deprecated
      2. box-decoration-break
      3. box-direction Non-standard Deprecated
      4. box-flex Non-standard Deprecated
      5. box-flex-group Non-standard Deprecated
      6. box-lines Non-standard Deprecated
      7. box-ordinal-group Non-standard Deprecated
      8. box-orient Non-standard Deprecated
      9. box-pack Non-standard Deprecated
      10. box-shadow
      11. box-sizing
    17. break-*
      1. break-after
      2. break-before
      3. break-inside
    18. caption-side
    19. caret-color
    20. clear
    21. clip Deprecated
    22. clip-path
    23. color-*
      1. color
      2. color-interpolation
      3. color-scheme
    24. column-*
      1. column-count
      2. column-fill
      3. column-gap
      4. column-rule
      5. column-rule-color
      6. column-rule-style
      7. column-rule-width
      8. column-span
      9. column-width
    25. columns
    26. contain-*
      1. contain
      2. contain-intrinsic-block-size
      3. contain-intrinsic-height
      4. contain-intrinsic-inline-size
      5. contain-intrinsic-size
      6. contain-intrinsic-width
    27. container-*
      1. container
      2. container-name
      3. container-type
    28. content
    29. content-visibility Experimental
    30. counter-*
      1. counter-increment
      2. counter-reset
      3. counter-set
    31. cursor
    32. direction
    33. display
    34. empty-cells
    35. field-sizing
    36. filter
    37. flex-*
      1. flex
      2. flex-basis
      3. flex-direction
      4. flex-flow
      5. flex-grow
      6. flex-shrink
      7. flex-wrap
    38. float
    39. font-*
      1. font
      2. font-family
      3. font-feature-settings
      4. font-kerning
      5. font-language-override
      6. font-optical-sizing
      7. font-palette
      8. font-size
      9. font-size-adjust
      10. font-smooth Non-standard
      11. font-stretch
      12. font-style
      13. font-synthesis
      14. font-synthesis-position
      15. font-synthesis-small-caps
      16. font-synthesis-style
      17. font-synthesis-weight
      18. font-variant
      19. font-variant-alternates
      20. font-variant-caps
      21. font-variant-east-asian
      22. font-variant-emoji
      23. font-variant-ligatures
      24. font-variant-numeric
      25. font-variant-position
      26. font-variation-settings
      27. font-weight
    40. forced-color-adjust
    41. gap
    42. grid-*
      1. grid
      2. grid-area
      3. grid-auto-columns
      4. grid-auto-flow
      5. grid-auto-rows
      6. grid-column
      7. grid-column-end
      8. grid-column-start
      9. grid-row
      10. grid-row-end
      11. grid-row-start
      12. grid-template
      13. grid-template-areas
      14. grid-template-columns
      15. grid-template-rows
    43. hanging-punctuation
    44. height
    45. hyphenate-character
    46. hyphenate-limit-chars
    47. hyphens
    48. image-*
      1. image-orientation
      2. image-rendering
      3. image-resolution Experimental
    49. initial-letter Experimental
    50. inline-size
    51. inset-*
      1. inset
      2. inset-area
      3. inset-block
      4. inset-block-end
      5. inset-block-start
      6. inset-inline
      7. inset-inline-end
      8. inset-inline-start
    52. isolation
    53. justify-*
      1. justify-content
      2. justify-items
      3. justify-self
    54. left
    55. letter-spacing
    56. line-*
      1. line-break
      2. line-height
      3. line-height-step Experimental
    57. list-*
      1. list-style
      2. list-style-image
      3. list-style-position
      4. list-style-type
    58. margin-*
      1. margin
      2. margin-block
      3. margin-block-end
      4. margin-block-start
      5. margin-bottom
      6. margin-inline
      7. margin-inline-end
      8. margin-inline-start
      9. margin-left
      10. margin-right
      11. margin-top
      12. margin-trim Experimental
    59. mask-*
      1. mask
      2. mask-border
      3. mask-border-mode
      4. mask-border-outset
      5. mask-border-repeat
      6. mask-border-slice
      7. mask-border-source
      8. mask-border-width
      9. mask-clip
      10. mask-composite
      11. mask-image
      12. mask-mode
      13. mask-origin
      14. mask-position
      15. mask-repeat
      16. mask-size
      17. mask-type
    60. masonry-auto-flow Experimental
    61. math-*
      1. math-depth
      2. math-shift Experimental
      3. math-style
    62. max-*
      1. max-block-size
      2. max-height
      3. max-inline-size
      4. max-width
    63. min-*
      1. min-block-size
      2. min-height
      3. min-inline-size
      4. min-width
    64. mix-blend-mode
    65. object-fit
    66. object-position
    67. offset-*
      1. offset
      2. offset-anchor
      3. offset-distance
      4. offset-path
      5. offset-position
      6. offset-rotate
    68. opacity
    69. order
    70. orphans
    71. outline-*
      1. outline
      2. outline-color
      3. outline-offset
      4. outline-style
      5. outline-width
    72. overflow-*
      1. overflow
      2. overflow-anchor
      3. overflow-block
      4. overflow-clip-margin
      5. overflow-inline
      6. overflow-wrap
      7. overflow-x
      8. overflow-y
    73. overlay Experimental
    74. overscroll-*
      1. overscroll-behavior
      2. overscroll-behavior-block
      3. overscroll-behavior-inline
      4. overscroll-behavior-x
      5. overscroll-behavior-y
    75. padding-*
      1. padding
      2. padding-block
      3. padding-block-end
      4. padding-block-start
      5. padding-bottom
      6. padding-inline
      7. padding-inline-end
      8. padding-inline-start
      9. padding-left
      10. padding-right
      11. padding-top
    76. page-*
      1. page
      2. page-break-after
      3. page-break-before
      4. page-break-inside
    77. paint-order
    78. perspective
    79. perspective-origin
    80. place-*
      1. place-content
      2. place-items
      3. place-self
    81. pointer-events
    82. position-*
      1. position
      2. position-anchor Experimental
      3. position-try Experimental
      4. position-try-fallbacks Experimental
      5. position-try-order Experimental
      6. position-visibility Experimental
    83. print-color-adjust
    84. quotes
    85. resize
    86. right
    87. rotate
    88. row-gap
    89. ruby-align Experimental
    90. ruby-position
    91. scale
    92. scroll-*
      1. scroll-behavior
      2. scroll-margin
      3. scroll-margin-block
      4. scroll-margin-block-end
      5. scroll-margin-block-start
      6. scroll-margin-bottom
      7. scroll-margin-inline
      8. scroll-margin-inline-end
      9. scroll-margin-inline-start
      10. scroll-margin-left
      11. scroll-margin-right
      12. scroll-margin-top
      13. scroll-padding
      14. scroll-padding-block
      15. scroll-padding-block-end
      16. scroll-padding-block-start
      17. scroll-padding-bottom
      18. scroll-padding-inline
      19. scroll-padding-inline-end
      20. scroll-padding-inline-start
      21. scroll-padding-left
      22. scroll-padding-right
      23. scroll-padding-top
      24. scroll-snap-align
      25. scroll-snap-stop
      26. scroll-snap-type
      27. scroll-timeline Experimental
      28. scroll-timeline-axis Experimental
      29. scroll-timeline-name Experimental
    93. scrollbar-*
      1. scrollbar-color
      2. scrollbar-gutter
      3. scrollbar-width
    94. shape-*
      1. shape-image-threshold
      2. shape-margin
      3. shape-outside
    95. tab-size
    96. table-layout
    97. text-*
      1. text-align
      2. text-align-last
      3. text-combine-upright
      4. text-decoration
      5. text-decoration-color
      6. text-decoration-line
      7. text-decoration-skip Experimental
      8. text-decoration-skip-ink
      9. text-decoration-style
      10. text-decoration-thickness
      11. text-emphasis
      12. text-emphasis-color
      13. text-emphasis-position
      14. text-emphasis-style
      15. text-indent
      16. text-justify
      17. text-orientation
      18. text-overflow
      19. text-rendering
      20. text-shadow
      21. text-size-adjust Experimental
      22. text-spacing-trim Experimental
      23. text-transform
      24. text-underline-offset
      25. text-underline-position
      26. text-wrap
      27. text-wrap-mode
      28. text-wrap-style
    98. timeline-scope Experimental
    99. top
    100. touch-action
    101. transform-*
      1. transform
      2. transform-box
      3. transform-origin
      4. transform-style
    102. transition-*
      1. transition
      2. transition-behavior
      3. transition-delay
      4. transition-duration
      5. transition-property
      6. transition-timing-function
    103. translate
    104. unicode-bidi
    105. user-modify Non-standard Deprecated
    106. user-select
    107. vertical-align
    108. view-*
      1. view-timeline Experimental
      2. view-timeline-axis Experimental
      3. view-timeline-inset Experimental
      4. view-timeline-name Experimental
      5. view-transition-name Experimental
    109. visibility
    110. white-space
    111. white-space-collapse
    112. widows
    113. width
    114. will-change
    115. word-break
    116. word-spacing
    117. writing-mode
    118. z-index
    119. zoom
  11. Selectors
    1. Attribute selectors
    2. Class selectors
    3. ID selectors
    4. & nesting selector
    5. Type selectors
    6. Universal selectors
  12. Combinators
    1. Child combinator
    2. Column combinator Experimental
    3. Descendant combinator
    4. Namespace separator
    5. Next-sibling combinator
    6. Selector list
    7. Subsequent-sibling combinator
  13. Pseudo-classes
    1. :-moz-broken Non-standard
    2. :-moz-drag-over Non-standard
    3. :-moz-first-node Non-standard
    4. :-moz-handler-blocked Non-standard
    5. :-moz-handler-crashed Non-standard
    6. :-moz-handler-disabled Non-standard
    7. :-moz-last-node Non-standard
    8. :-moz-loading Non-standard
    9. :-moz-locale-dir(ltr) Non-standard
    10. :-moz-locale-dir(rtl) Non-standard
    11. :-moz-only-whitespace Non-standard
    12. :-moz-submit-invalid Non-standard
    13. :-moz-suppressed Non-standard
    14. :-moz-user-disabled Non-standard
    15. :-moz-window-inactive Non-standard
    16. :active
    17. :any-link
    18. :autofill
    19. :blank Experimental
    20. :buffering
    21. :checked
    22. :current
    23. :default
    24. :defined
    25. :dir()
    26. :disabled
    27. :empty
    28. :enabled
    29. :first
    30. :first-child
    31. :first-of-type
    32. :focus
    33. :focus-visible
    34. :focus-within
    35. :fullscreen
    36. :future
    37. :has()
    38. :host
    39. :host-context()
    40. :host()
    41. :hover
    42. :in-range
    43. :indeterminate
    44. :invalid
    45. :is()
    46. :lang()
    47. :last-child
    48. :last-of-type
    49. :left
    50. :link
    51. :local-link
    52. :modal
    53. :muted
    54. :not()
    55. :nth-child()
    56. :nth-last-child()
    57. :nth-last-of-type()
    58. :nth-of-type()
    59. :only-child
    60. :only-of-type
    61. :optional
    62. :out-of-range
    63. :past
    64. :paused
    65. :picture-in-picture
    66. :placeholder-shown
    67. :playing
    68. :popover-open
    69. :read-only
    70. :read-write
    71. :required
    72. :right
    73. :root
    74. :scope
    75. :seeking
    76. :stalled
    77. :state() Experimental
    78. :target
    79. :target-within Experimental
    80. :user-invalid
    81. :user-valid
    82. :valid
    83. :visited
    84. :volume-locked
    85. :where()
  14. Pseudo-elements
    1. ::-moz-color-swatch Non-standard
    2. ::-moz-focus-inner Experimental
    3. ::-moz-list-bullet Non-standard
    4. ::-moz-list-number Non-standard
    5. ::-moz-progress-bar Non-standard
    6. ::-moz-range-progress Non-standard
    7. ::-moz-range-thumb Non-standard
    8. ::-moz-range-track Non-standard
    9. ::-webkit-inner-spin-button Non-standard
    10. ::-webkit-meter-bar Non-standard
    11. ::-webkit-meter-even-less-good-value Non-standard
    12. ::-webkit-meter-inner-element Non-standard
    13. ::-webkit-meter-optimum-value Non-standard
    14. ::-webkit-meter-suboptimum-value Non-standard
    15. ::-webkit-progress-bar Non-standard
    16. ::-webkit-progress-inner-element Non-standard
    17. ::-webkit-progress-value Non-standard
    18. ::-webkit-scrollbar Non-standard
    19. ::-webkit-search-cancel-button Non-standard
    20. ::-webkit-search-results-button Non-standard
    21. ::-webkit-slider-runnable-track Experimental
    22. ::-webkit-slider-thumb Experimental
    23. ::after
    24. ::backdrop
    25. ::before
    26. ::cue
    27. ::file-selector-button
    28. ::first-letter
    29. ::first-line
    30. ::grammar-error
    31. ::highlight()
    32. ::marker
    33. ::part()
    34. ::placeholder
    35. ::selection
    36. ::slotted()
    37. ::spelling-error
    38. ::target-text Experimental
    39. ::view-transition Experimental
    40. ::view-transition-group Experimental
    41. ::view-transition-image-pair Experimental
    42. ::view-transition-new Experimental
    43. ::view-transition-old Experimental
  15. At-rules
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @document Non-standard Deprecated
    6. @font-face
    7. @font-feature-values
    8. @font-palette-values
    9. @import
    10. @keyframes
    11. @layer
    12. @media
    13. @namespace
    14. @page
    15. @position-try Experimental
    16. @property
    17. @scope
    18. @starting-style Experimental
    19. @supports
    20. @view-transition
  16. Functions
    1. -moz-image-rect Non-standard Deprecated
    2. abs()
    3. acos()
    4. anchor-size()
    5. anchor()
    6. asin()
    7. atan()
    8. atan2()
    9. attr()
    10. blur()
    11. brightness()
    12. calc()
    13. circle()
    14. clamp()
    15. color-contrast() Experimental
    16. color-mix()
    17. color()
    18. conic-gradient()
    19. contrast()
    20. cos()
    21. counter()
    22. counters()
    23. cross-fade()
    24. device-cmyk()
    25. drop-shadow()
    26. element() Experimental
    27. ellipse()
    28. env()
    29. exp()
    30. fit-content()
    31. grayscale()
    32. hsl()
    33. hue-rotate()
    34. hwb()
    35. hypot()
    36. image-set()
    37. image()
    38. inset()
    39. invert()
    40. lab()
    41. lch()
    42. light-dark()
    43. linear-gradient()
    44. log()
    45. matrix()
    46. matrix3d()
    47. max()
    48. min()
    49. minmax()
    50. mod()
    51. oklab()
    52. oklch()
    53. opacity()
    54. paint()
    55. palette-mix() Experimental
    56. path()
    57. perspective()
    58. polygon()
    59. pow()
    60. radial-gradient()
    61. ray()
    62. rect()
    63. rem()
    64. repeat()
    65. repeating-conic-gradient()
    66. repeating-linear-gradient()
    67. repeating-radial-gradient()
    68. rgb()
    69. rotate()
    70. rotate3d()
    71. rotateX()
    72. rotateY()
    73. rotateZ()
    74. round()
    75. saturate()
    76. scale()
    77. scale3d()
    78. scaleX()
    79. scaleY()
    80. scaleZ()
    81. scroll() Experimental
    82. sepia()
    83. shape()
    84. sign()
    85. sin()
    86. skew()
    87. skewX()
    88. skewY()
    89. sqrt()
    90. symbols()
    91. tan()
    92. translate()
    93. translate3d()
    94. translateX()
    95. translateY()
    96. translateZ()
    97. url()
    98. var()
    99. view() Experimental
    100. xywh()
  17. Types
    1. <absolute-size>
    2. <alpha-value>
    3. <angle>
    4. <angle-percentage>
    5. <basic-shape>
    6. <blend-mode>
    7. <box-edge>
    8. <calc-keyword>
    9. <calc-sum>
    10. <color-interpolation-method>
    11. <color>
    12. <custom-ident>
    13. <dashed-ident>
    14. <dimension>
    15. <display-box>
    16. <display-inside>
    17. <display-internal>
    18. <display-legacy>
    19. <display-listitem>
    20. <display-outside>
    21. <easing-function>
    22. <filter-function>
    23. <flex>
    24. <frequency>
    25. <frequency-percentage>
    26. <generic-family>
    27. <gradient>
    28. <hex-color>
    29. <hue>
    30. <hue-interpolation-method>
    31. <ident>
    32. <image>
    33. <inset-area>
    34. <integer>
    35. <length>
    36. <length-percentage>
    37. <line-style>
    38. <named-color>
    39. <number>
    40. <overflow>
    41. <percentage>
    42. <position>
    43. <ratio>
    44. <relative-size>
    45. <resolution>
    46. <shape> Deprecated
    47. <string>
    48. <system-color>
    49. <time>
    50. <time-percentage>
    51. <transform-function>
  18. 指南
  19. 动画
    1. 使用 CSS 动画
  20. 背景和边框
    1. 使用多个背景
    2. 调整背景图片大小
  21. 框对齐
    1. 块布局中的框对齐
    2. 弹性框中的框对齐
    3. 网格布局中的框对齐
    4. 多列布局中的框对齐
  22. 框模型
    1. CSS 基本盒模型简介
    2. 掌握边距折叠
  23. 颜色
    1. 将颜色应用于 HTML 元素
    2. Color values
    3. Using relative colors
    4. Using color wisely
    5. 可访问性：了解颜色和亮度
    6. 可访问性：颜色对比度
  24. 列
    1. 基本 Multicol 的概念
    2. 设置列样式
    3. 跨越和平衡
    4. 处理 Multicol 中的溢出
    5. Multicol 中的内容中断
  25. 条件规则
    1. 使用功能查询
  26. 包含
    1. Using CSS containment
    2. CSS container queries
    3. Using container size and style queries
  27. CSSOM 视图
    1. 坐标系
  28. 弹性盒
    1. Flexbox 的基本概念
    2. 与其他布局方法的比较
    3. 在弹性容器中对齐项目
    4. 订购弹性项目
    5. 控制弹性项目比率
    6. 掌握弹性项目的封装
    7. 典型用例 Flexbox
  29. 流布局
    1. 正常流中的块和内联布局
    2. 在流中和流外
    3. 解释格式化上下文
    4. 流布局和书写模式
    5. 流布局和溢出
  30. 字体
    1. OpenType 字体功能指南
    2. 可变字体指南
  31. 网格
    1. 网格布局的基本概念
    2. 与其他布局方法的关系
    3. 基于线路的布局
    4. 网格模板区域
    5. 使用命名网格线的布局
    6. 网格布局中的自动放置
    7. 网格布局中的框对齐
    8. 网格、逻辑值和书写模式
    9. 网格布局和可访问性
    10. 网格布局和渐进增强
    11. 使用网格实现常见布局
    12. 子网格
    13. 砌体布局
  32. 图片
    1. 使用 CSS 渐变
  33. 列表和计数器
    1. 使用 CSS 计数器
    2. 一致的列表缩进
  34. 逻辑属性
    1. 基本概念
    2. 浮动和定位
    3. 边距、边框和填充
    4. 大小
  35. 数学函数
    1. 使用 CSS 数学函数
  36. 媒体查询
    1. 使用媒体查询
    2. 使用媒体查询实现可访问性
    3. 以编程方式测试媒体查询
    4. 打印
  37. 嵌套样式规则
    1. 使用 CSS 嵌套
    2. 嵌套规则
    3. 嵌套和特异性
  38. 定位
    1. 了解 CSS z-index
  39. 滚动捕捉
    1. 滚动捕捉的基本概念
  40. 形状
    1. 形状概述
    2. 来自框值的形状
    3. 基本形状
    4. 来自图片的形状
  41. 文本
    1. 换行和拆分文本
  42. 变换
    1. 使用变换
  43. 过渡
    1. 使用过渡
  44. 布局手册
    1. 媒体对象
    2. 列
    3. 居中元素
    4. 粘性页脚
    5. 拆分导航
    6. 面包屑导航
    7. 带有徽章的列表组
    8. 分页
    9. 卡片
    10. 网格封装器
  46. 工具
    1. 颜色选择器
    2. 框阴影生成器
    3. 边框图片生成器
    4. 边框半径生成器

目录

  • Reference
  • Specifications
  • See also

CSS ruby layout

The CSS ruby layout module provides the rendering model and formatting controls related to the display of ruby annotation. Ruby annotation is a form of interlinear annotation, consisting of short runs of text alongside the base text. They are typically used in East Asian documents to indicate pronunciation or to provide a short annotation.

Reference

Properties

  • ruby-align
  • ruby-position

Specifications

Specification
CSS Ruby Annotation Layout Module Level 1

See also

  • <ruby>
MDN Web 中文网 - 粤ICP备13048890号