CSS深入研究:偷窺beautyGirl身材 – height

這位妹紙，你在偷窺什嗎？你不知道螳螂捕蟬，黃雀在後嗎？我是一隻善良犀利的黃雀，不敢獨自偷窺，願與大家一同偷窺，當然，此次偷窺為了不然我們黃雀家族丟臉，我們必須偷窺出境界，偷窺出格調。

當我在偷窺這位beautyGirl的時候，我想到了一個嚴肅的問題：她父母是誰？

各位請把你們大跌的眼鏡扶正，我不是要去見這位beautyGirl的家長，然後提親，咳... 我在想的是，她父母的height如何，這將直接影響到我的下一步計劃，為什麼這麼說呢，因為父母的height將會影響未來beautyGirl的height。

一、父元素對height的影響

height用px作為單位，大家最熟悉不了，px為單位基本上就給元素板上DingTalk了。那麼，我們來探索一下height:auto 和 height:100%在不同情況下的不同表現。

讓我們來看一個height:100%失效demo：

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

 

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[頂]隨便你。