Skip to main content

元素高度 height

Docs

height | MDN (mozilla.org)

height CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 box-sizing 设置为 border-box , 这个属性决定的将是边框区域（border area）的高度。

/* Keyword value */
height: auto;

/* <length> values */
height: 120px;
height: 10em;

/* <percentage> value */
height: 75%;

/* Global values */
height: inherit;
height: initial;
height: unset;

取值​

  • <length>: 将高度定义为一个绝对值。

  • <percentage>: 将高度定义为相对包含块高度的百分比。

  • border-box: 如果设置该值，则 <length> 或者 <percentage> 会设置为该元素的 border box。

  • content-box: 如果设置该值，则 <length> 或者 <percentage> 会设置为该元素的 content box。

  • auto: 由浏览器为元素计算并选择一个高度。

  • fill: 根据文字方向，使用 fill-available 作为行大小或者块大小。

  • max-content: 设置为允许的最大高度。

  • min-content: 设置为允许的最小高度。

  • available: 包含块高度减去当前元素的边距，边框和填充。

  • fit-content: 将 fill-content 公式中的可用位置替换为特定的参数以进行使用，如：min(max-content, max(min-content, ))

语法​

height =
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

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

示例​

Loading Github Gist ...