DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 免费赠送的 200 美元!
CSS 中的 height
属性定义了盒子的 内容高度,并接受任何 长度值。
“内容”区域定义为除了内容本身占用的高度/宽度或大小之外,还包括 填充 和 边框。
不允许使用负值,例如 height: -100px
。height
属性不适用于非替换 内联 元素,包括表格列和列组。
.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
会根据元素的 内容区域 计算,除非明确指定。这意味着基于百分比的值仍然是元素内容区域的值。同样,如果容器的高度设置为百分比值,则子元素的百分比高度仍基于该子元素的内容区域。
高度也可以用作 可动画属性。
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
全部 | 全部 | 全部 | 全部 | 全部 | 全部 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
全部 | 全部 | 全部 | 全部 | 全部 |
“内容”区域定义为元素的填充、边框和边距,这是对的吗?
我认为内容区域由元素的宽度和高度属性定义。
是的,我对那句话也有点困惑。我认为是错误的,或者需要更好地表达。
文章中的那句话显然是错误的。没有人有时间校对(或者查看多年来文章的评论),而且它已经获得了我们的点击量……
见 https://www.w3.org/TR/CSS21/box.html#box-dimensions
与文章链接的 URL 相比,一个更好的“内容高度”参考是 https://www.w3.org/TR/CSS21/visudet.html#the-height-property
‘box-sizing: border-box’ 的存在意味着我们不能无条件地说“内容区域由(或作为)宽度和高度属性定义……”而且“定义为”与“由……定义”并不相同。但对于默认值(相当于 box-sizing: content-box),这已经足够好了。尤其是在“内容区域”在规范中似乎没有明确定义的情况下,因此最好坚持使用已经定义好的东西,比如高度、宽度和填充。我不知道作者到底想写什么,但“内容区域”的概念定义可以是“填充内部的区域”。
:q!
取决于你在 CSS 中的 box-sizing 设置。
如果包含块的高度已指定,并且包含块是绝对定位的,那么高度是如何计算的?
有时,元素的高度与它内部内容的高度完全不同。
包含两个浮动 div 的 div,每个 div 的高度为 100px,div 容器的高度为 0。一个好的解释和演示可以在此链接中找到:https://devserver-002.info/floating_div_scam//floatdemo/
但是你没有继续说明,如果包含块的高度 *已* 定义,会发生什么。当元素的高度设置为 100% 时,会发生什么?