文章目录
height 属性
auto的计算规则
行内非替换元素
常规流中的行内替换元素，块级替换元素，替换的inline-block元素和浮动替换元素
overflow为visible的常规流中的块级非替换元素
绝对定位的非替换元素
绝对定位的替换元素
生成BFC的元素的height:auto
height 属性
在标准盒模型中，height指定了盒的内容高度(content height)
属性
取值
可选值
指定长 / 百分比 / auto / inherit
默认值
auto
适用元素
除非替换的行内元素，表格行和行组(row group) 外的所有元素
可继承性
否
取值含义：
取值
含义
auto
高度取决于其它属性的值
指定长度
用具体长度指定内容区高度，负值非法。
百分比
参照元素生成盒的包含块高度，以百分比形式指定当前盒高度。注意：1.如果包含块的高度取决于该元素高度，且本元素不是绝对定位的，则计算值为auto。2.html根元素的百分比是相对初始包含看的。3.绝对定位元素的百分比参考的是第一个非static祖先元素的padding box。
注：绝对定位元素的包含块的高度独立于该元素本身的大小，因此绝对定位元素的百分比高度总是能计算出来的。然而，若包含块的高度取决于其它元素，则需要其它元素撑开包含块，绝对定位元素才能得到高度，否则 0 * X% = 0，高度同样为0。
示例：
指定高度的常规流兄弟元素为蓝色块，实验元素为橙色块。
如下，当实验元素为非绝对定位时，设置height:100%，并无高度，元素无法显示。
设置绝对定位后，元素高度被赋值，元素显示。
.container{
position: relative;
}
.ab{
position: absolute;
width: 100px;
height: 100%;
background: orange
}
.normal{
width: 100px;
height: 100px;
background: royalblue
}
div>
auto的计算规则
行内非替换元素
height属性不适用。行内非替换元素的内容区高度是基于字体的。
常规流中的行内替换元素，块级替换元素，替换的inline-block元素和浮动替换元素
若margin-top或margin-bottom为auto，其应用值为0
若height为auto，且元素还具有固有高度，那么这个固有高度就是height的应用值
若height的计算值为auto，并且该元素具有固有比例，width应用值存在，那么height的应用值为：
(宽度的应用值) / (固有比例)
否则，若height计算值为auto，但上述条件都不满足，那么height的应用值必须设置为比例为2:1，高度不超过150px并且宽度不超过视口宽度的最大矩形的高度
overflow为visible的常规流中的块级非替换元素
若margin-top或margin-bottom为auto，则其应用值为0。
若height为auto，内容高度取决于该元素的常规流内的子元素高度。(即不包含浮动和绝对定位元素。)
绝对定位的非替换元素
与绝对定位元素横向类似的，静态位置上的元素top值为 包含块的padding box 上边界 - 元素的margin box 上边界的距离，bottom值类似。
对于绝对定位的元素，垂直方向的应用值满足恒等式：
top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 包含块的高度
若top，height和bottom都是auto，则把top设置为静态位置值，相当于height,bottom为auto，top不为auto的情况。
若top，height和bottom都不是auto，
当margin-top和margin-bottom都是auto时，解方程时要添上额外的约束：2个margin值相等。
示例：
我们可以通过这条计算规则
.container{
position: relative;
height: 200px;
width: 20px;
margin: 50px;
background: skyblue
}
.ab{
position: absolute;
top:10px;
bottom:10px;
height: 20px;
margin: auto 0;
width: 20px;
background: orangered
}
当margin-top或margin-bottom有一个是auto时，直接解方程求出这个值。
若margin-top和margin-bottom都不是auto，则存在过度约束，则top指定值生效，而忽略bottom指定值。
示例：
在将上例中的margin-top和margin-bottom均设为20px，则产生过度约束，top指定值生效，bottom由恒等式重新计算得出。
除上述情况，则均把值为auto的margin-top与margin-bottom设为0：
若top,bottom中仅有一个值为auto,而height不为auto，则直接通过恒等式得到该auto值
若top,bottom为auto，height不为auto，则将top设置为静态位置值，根据恒等式求出bottom值。
若height为auto，则高度将根据下面“生成新BFC时的情况”进行计算，再讲top，bottom中的auto值带入恒等式，计算得出。
绝对定位的替换元素
与非替换元素类似，只是元素具有固有高度。
生成BFC的元素的height:auto
overflow不为visiblie的块级非替换元素，inline-block，浮动和绝对定位元素等会产生新的BFC。这些元素在计算高度时，首先将值为auto的margin-top或margin-bottom设为0。若height为auto，则其高度取决于元素的后代：
(知识回顾: 一个块盒中要么只有块盒，要么建立IFC而只包含行内级盒)
若它只含有行内级盒，高度就是最高的行框的顶端与最低的行框的底端之间的距离
若它只含有块级盒，高度就是最高的块级盒的上外边距边界到最低的块级盒的下外边距边界之间的距离
绝对定位盒会被忽略，相对定位的盒不考虑其偏移。
浮动元素的高度将被考虑在内
示例：
绝对定位元素会生成新的BFC，则在计算height：auto时会考虑浮动元素的高度。
.container{
position: absolute;
width: 200px;
background: skyblue;
margin: 40px;
}
.pre{
width: 100px;
height: 150px;
background: royalblue
}
.fl{
float: left;
height: 100px;
width: 100px;
background: olivedrab
}
div>
149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
