CSS深入研究:偷窥beautyGirl身材 - height

这位妹纸，你在偷窥什么？你不知道螳螂捕蝉，黄雀在后吗？我是一只善良犀利的黄雀，不敢独自偷窥，愿与大家一同偷窥，当然，此次偷窥为了不然我们黄雀家族丢脸，我们必须偷窥出境界，偷窥出格调。

当我在偷窥这位beautyGirl的时候，我想到了一个严肃的问题：她父母是谁？

各位请把你们大跌的眼镜扶正，我不是要去见这位beautyGirl的家长，然后提亲，咳... 我在想的是，她父母的height如何，这将直接影响到我的下一步计划，为什么这么说呢，因为父母的height将会影响未来beautyGirl的height。

一、父元素对height的影响

height用px作为单位，大家最熟悉不了，px为单位基本上就给元素板上钉钉了。那么，我们来探索一下height:auto 和 height:100%在不同情况下的不同表现。

让我们来看一个height:100%失效demo：

<style type="text/css"> .parent{} .beautyGirl{ height: 100%; background: #fcf59b;} </style> <div class="parent"> <div class="beautyGirl"> <img src="//images0.cnblogs.com/blog/187508/201212/27220727-de39774232d64f509a356835481d82fd.jpg" alt="" /> </div> </div> 运行

 

demo中明明设置了beautyGirl的高度为100%，为什么不起作用呢？经过一番逻辑推理，深思熟虑，我明白了原来是未设置父元素的高度导致的。所以当我们堆砌页面的时候，有时候碰到height:100%不起作用了，很可能就是因为这个原因引起的。为了从根本上解决这个问题。我们给祖先元素加上height:100%.修改后CSS如下：

<style type="text/css">
            html,body{height:100%; margin:0;}
            .parent{height: 100%;}
            .beautyGirl{ height: 100%; background: #fcf59b;}
</style>

再一看demo:

哇，beautyGirl高挑了身姿，挺拔了...咳，经过这一分析，童鞋们应该明白我为什么要了解beatyGirl的父母了吧，基因的好坏能直接影响妹纸的成长啊。

下面我们来探讨偷窥角度的问题，因为偷窥的角度直接影响到了偷窥的质量，俗话说从门缝里看人会把人看扁，这回我们来个诡异的角度，怎么看？上，不是，下，太邪恶了吧。这回我们来个文艺的角度，脱离地心引力的诡异角度来看这位beautyGirl吧，漂浮吧，beautyGirl！

二、float与绝对定位(position:absolute)对父元素height的影响

 修改CSS如下:

<style type="text/css">
            html,body{height:100%; margin:0;}
            .parent{background: #fcf59b;}
            .beautyGirl{ float: left; }
</style>

运行demo:

果然，那.parent元素的黄色没有出现。这是为什么呢？

当元素beautyGirl 浮动或者是绝对定位的时候，就造成了父元素的高度塌陷。然后，父元素的height就为0了，至于，为什么会发生这种事情，请移步后花园偷窥详情。移步后花园后，你可以Ctrl+F 输入高度塌陷，来快速定位这一问题，如果没看过此作品，强烈建议您观赏。

不过浮动和绝对定位对beautyGirl的影响是不同的。如果说浮动是叛逆，那么绝对定位就是大逆不道啊。请看demo：

float CSS:

<style type="text/css">
            html,body{height:100%; margin:0;}
            .parent{ width:400px; height:300px; border:1px solid #f00;}
            .beautyGirl{ float: left; width:100%; height: 100%; background: #fcf59b;}
</style>

效果图：

绝对定位CSS:

<style type="text/css">
            html,body{height:100%; margin:0;}
            .parent{ width:400px; height:300px; border:1px solid #f00;}
            .beautyGirl{ position: absolute; width:100%; height: 100%; background: #fcf59b;}
</style>

效果图：

从图中可以看出，浮动的元素设置 height和width为100%后，子元素填满了父元素的空间，而绝对定位元素却完全不受parent元素的控制，子元素将会以窗口大小为参照，来进行计算height和width，当然有一种情况例外，那就是存在“干爹”元素的时候。子元素只受绝对或者相对定位的“干爹”元素控制。

可恶的干爹毒害了多少beautyGirl啊，又间接残害了多少良好男青年啊，下面我们来看一个罩杯问题，至于为什么是这个名字，请广大好青年自思。

三、line-height对height的影响

这个问题相对简单，就一句话，IE6下，当line-height大于height时，元素的实际高度等于line-height。在很多情况下，这个因素就是高度超出，导致边框不对齐的原因。overflow:hidden有时候能帮上忙。其他浏览器则由height来决定元素的高度。

既然决定对这个beautyGirl有一些想法，那么我们还需要了解一下beautyGirl的姊妹。嘿嘿，也许姐姐更合适也说不定哦。

四、min-height和max-height

说到这两个属性，就又要和IE6纠缠不清了。其它浏览器下，没什么好说的，不过也许，也不是你想的那样哦。下面提几个问题

1、.beautyGirl{min-height:30px; height:60px; max-height:90px;}  //beautyGirl1 60px;beautyGirl2 60px;

2、.beautyGirl{min-height:60px; height:30px; max-height:90px;}  //beautyGirl1 60px;beautyGirl2 60px;

3、.beautyGirl{min-height:60px; height:120px; max-height:90px;}  //beautyGirl1 90px;beautyGirl2 90px;

4、.beautyGirl{min-height:60px; max-height:90px;}  //beautyGirl1 60px;beautyGirl2 <90px;达到max-height效果

1、2、3、4的实际height到底是多少呢？同学们可以亲测一下。懒人助手：用鼠标选中问题部分，答案就在后面。

最后献上IE6下min-height和max-height的模拟代码：

    .min-height{ min-height:60px; _height:60px}
    .max-height{ max-height:90px; _height: expression(this.offsetHeight> 90 ? 90 : true); overflow: hidden;}

 结束语

偷窥需勇气，码字不容易，abcd敲对敲错又看运气，如果你觉得还可以，[推荐]or[顶]随便你。