height与width大致是一样的,都是用来限制元素尺寸的,但是,它们在不少地方还是有明显区别的。这是因为CSS的默认渲染方式是水平方向的,宽度是有限的,而高度是无限的。因此高度的分配会根据浏览器差异和不同,高度就显得比较随意。
1.height:auto;
与width:auto;那么多讲究不同,height:auto;在正常情况下子元素多高,或者内容多高,它就多高。
如果子元素具有绝对定位或者浮动这表现会有不同,这需要看具体场景。
2.height:100%;
当你想要设置一张背景图充满整个页面时:
div{ width:100%;/*多余*/ hieght:100%;/*无效*/ background:url(bg.jpg); }
然后发现div的高度确实0,其实这是因为百分比高度值想要生效,其父级必须有一个可以生效的高度值!
此时你就需要加上:
html,body{ height:100%; }
为什么会出现这种情况呢?这是因为如果包含快即父元素的高度没有显示指定(高度由内容决定),并且该元素不是绝对定位,则计算值为auto。而‘auto’*100/100=NaN
当然还有一种方法可以使height生效,就是使用绝对定位:
div{ height:100%; position:absolute; }文章参考张鑫旭《CSS世界》