height

Avatar of Sara Cope
Sara Cope on

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 免费赠送的 200 美元!

CSS 中的 height 属性定义了盒子的 内容高度,并接受任何 长度值

“内容”区域定义为除了内容本身占用的高度/宽度或大小之外,还包括 填充边框

不允许使用负值,例如 height: -100pxheight 属性不适用于非替换 内联 元素,包括表格列和列组。

.wrap {
  height: auto;    /* auto keyword */

  height: 120px;   /* length values */
  height: 10em;
  height: 0;       /* unit-less length is OK for zero */

  height: 75%;     /* percentage value */

  height: inherit; /* inherited value from parent element */
}
Check out this Pen!

如果包含块的高度未明确指定,且元素未绝对定位,则其高度值将计算为 auto(它将与内部内容一样高,如果没有任何内容则为零)。如果元素的 内容部分 需要比分配的值提供的垂直空间更多,则元素的行为将由 overflow 属性定义。

使用 auto 关键字时,height 会根据元素的 内容区域 计算,除非明确指定。这意味着基于百分比的值仍然是元素内容区域的值。同样,如果容器的高度设置为百分比值,则子元素的百分比高度仍基于该子元素的内容区域。

高度也可以用作 可动画属性

浏览器支持

IEEdgeFirefoxChromeSafariOpera
全部全部全部全部全部全部
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
全部全部全部全部全部
来源: caniuse