CSS中height和min-height的區(qū)別

發(fā)布時(shí)間：2016-05-04 11:22:37 作者：佚名

這篇文章主要為大家詳細(xì)介紹了CSS中height和min-height的區(qū)別，從簡(jiǎn)單實(shí)例出發(fā)為大家進(jìn)行分析，感興趣的小伙伴們可以參考一下

做為Web前端新人，需要了解height、min-height的區(qū)別

瀏覽器參照基準(zhǔn)：Firefox, Chrome, Safari, Opera, IE；

* IE6不支持CSS min-height屬性。最小高度的定義：1. 元素?fù)碛心J(rèn)高度；2. 當(dāng)內(nèi)容超出元素的默認(rèn)高度時(shí)，元素的高度隨內(nèi)容增加而增加

Figure 1:如下圖的需求

* 如上圖，兩個(gè)區(qū)域的高度不一樣。這就是 min-height 的效果演示。元素?fù)碛幸粋€(gè)默認(rèn)的高度，當(dāng)內(nèi)容超出該默認(rèn)高度時(shí)，元素的高度同時(shí)隨內(nèi)容而增加。

eg1:

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<style>
.test{
float:left;
width:200px;
margin:0 5px;
padding:10px;
border-radius:10px;
background:#eee;
}
.test{
min-height:80px; /* 實(shí)現(xiàn)最小高度代碼 */
}
</style>
<div class="test">喝水為什么會(huì)中毒？</div>
<div class="test">喝水為什么會(huì)中毒？<br>日前有媒體報(bào)道稱日飲用3升水年輕10歲，于是有人真開始喝了，可喝了4天后，尿血了。水是生命之源，但是不是喝水越多越好呢？喝水多了又會(huì)發(fā)生什么呢？</div>

* 如上代碼，我們只需要一行代碼 min-height:80px; 就可以實(shí)現(xiàn)非IE6瀏覽器的最小高度。

CSS Code復(fù)制內(nèi)容到剪貼板

將 min-height:80px; 改成 height:80px; 在IE6下查看這個(gè)樣式。你可能發(fā)現(xiàn)了奇跡，是的，你沒看錯(cuò)。這個(gè)DEMO的表現(xiàn)與eg1的demo在高級(jí)瀏覽器下的表現(xiàn)一致，即最小高度的效果。

但這還不是大獲全勝的時(shí)候，因?yàn)槟銜?huì)發(fā)現(xiàn)本例在高級(jí)瀏覽器下都GameOver了？別著急，作為一個(gè)合格的coder，你肯定會(huì)想各種辦法來搞定它。

你是一個(gè)前端工程師，所以你必須要知道一些瀏覽器專屬的CSS Hack，雖然大多數(shù)情況下不推薦使用。我們想辦法讓高級(jí)瀏覽器仍然使用min-height，而ie6使用height，這樣似乎就可以達(dá)成目的了，動(dòng)手吧。

Figure 4:大獲全勝的場(chǎng)景

CSS Code復(fù)制內(nèi)容到剪貼板

ok, 我們實(shí)現(xiàn)了包含ie6在內(nèi)的min-height效果。

記住，千萬別加overflow除visible之外的值，否則你的ie6又要悲劇demo。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片