你不知道的height常识

前言

本文将总结一些height中你不知道的常识内容，希望能给你的前端编码带来一些不一样的思想以及更好的理解前端盒模型。

height:auto

高度自动是默认配置，解释为盒子的高度随着内容的增多自动增加，不用额外配置。所以那些给元素加高度自动的童鞋要注意了，那是无用代码。

div{
height:auto;//多余代码
}

height：100%

height设置具体高度（px非百分比）这里就不多讲了，肯定是生效的。这里分析的是设置高度为百分比的情况。为了更好的查看效果，我们给元素增加了红色边框来查看高度的生效效果。 备注：作为常识大家要清楚html,body默认也是height:auto的。 – 默认情况：普通文档流，父元素height：auto 这种情况下，父元素也就是body，html高度均为自动，子元素高度设置height:100%无任何效果，原因也很简单。auto*100% 无法计算，当然是0。这点与宽度是不同的，父元素宽度为auto的时候，子元素也可以拿到宽度。

高度模型1

• 普通文档流，父元素设置高度100% 特殊的元素html,body 元素设置百分比的时候参考为屏幕高度，此时html,body的任何直接子元素设置高度百分比都有效。作为常识要清楚这一点。 ~~~ html,body{ height:100%; } .par2{ border:1px solid red; height:50%; margin-top:20px; .par-sub{ height:100%; border:1px solid gray; } } ~~~
• 普通文档流，父元素设置高度:600px 父元素设置具体高度值时，子元素高度100%可以取到对应的父元素高度。没有任何疑问。

• 父子元素有绝对定位关系，父元素height:auto .par4{ border:1px solid red; margin-top:20px; position:relative; .par-sub{ position:absolute; height:50%; border:1px solid gray; width:100%; } .extra-cont{ height:200px; } }

max min特性

超越最大

作为常识我们知道!important的权重是很大的，而min- max- 设置的值比width height中设置的important还要大。

//最终生效的样式为50px
.demo{
height:100px!important;
max-height:50px;
}

流体特性

流体特性主要体现在了宽度上，在我们做流体或者自适应布局的时候，通常希望设置边界。媒体查询也是部分依赖了这个原理。 下面的容器保证了主体容器100%的布局，同时也控制了边界，当容器在1000px-1400px时使用百分比，使用pc版布局,同时设定了临界高度布局。

.container{
min-width:1000px;
max-width:1400px;
min-height:700px;}

图片具有不确定宽高的特性，尤其在移动端我们需要友好的显示同时不会出现布局错乱。所以你经常会看到下面的代码。其中height：auto!important是为了避免图片本身有高度时宽度百分比导致变形。

img{
max-width:100%;
height:auto!important;}

参考案例

• 本文heightDemo案例地址