深入理解CSS的height:100%和height:inherit之間的使用區(qū)別
我要評論inherit確實是個好東西，不僅節(jié)約代碼，尤其與background之流打交道；而且還利于維護(hù)。
注意，如果想要繼承background的圖片，不能這樣縮寫，會顯得很天真：
- background: #fff inherit left top;
可以這樣子：
- background-image: inherit;
1. 兼容性差異
height:100% IE6+ √
height:inherit IE8+ √
2. 大多數(shù)情況作用是一樣的
除去兼容性，大多數(shù)情況下，兩者作用是一樣的，甚至都很難想出不一樣的理由。
① 父容器height: auto，無論height:100%或者h(yuǎn)eight:inherit表現(xiàn)都是auto.
② 父容器定高h(yuǎn)eight: 100px，無論height:100%或者h(yuǎn)eight:inherit表現(xiàn)都是100px高.
難道沒有差異嗎？難道沒有使用height:inherit的理由嗎？當(dāng)然有，記住，江湖上所發(fā)生的一切事情，都絕非偶然！
3. 絕對定位大不同
當(dāng)子元素為絕對定位元素，同時，父容器的position值為static的時候，呵呵呵，height:100%和height:inherit的差異就可以明顯體現(xiàn)出來了！
您可以狠狠地點擊這里：height:100%和height:inherit差異demo
CSS如下：
- .outer {
- display: inline-block;
- height: 200px; width: 40%;
- border: 5px solid #cd0000;
- }
- .height-100 {
- position: absolute;
- height: 100%; width: 200px;
- background-color: #beceeb;
- }
- .height-inherit {
- position: absolute;
- height: inherit; width: 200px;
- background-color: #beceeb;
- }
HTML如下：
- <div class="outer"><div class="height-100"></div></div>
- <div class="outer"><div class="height-inherit"></div></div>
結(jié)果，height:100%的沖破云霄，哦，不對，是深入地域地獄：
而height:inherit卻完美高度自適應(yīng)沒有定位特性的父級元素：
對絕對定位有所了解的應(yīng)該都知道原因，我就不解釋了。
總之，這里，height:inherit的強(qiáng)大好用可見一斑?；仡^，容器高度變化了，里面的絕對定位元素依然高度自適應(yīng)。這是很贊的特性，因為如果頁面很復(fù)雜，避免使用position: relative會讓你少去很多z-index混亂層級覆蓋的麻煩。
相關(guān)文章
CSS中height:100vh和height:100%的區(qū)別
本文主要介紹了CSS中height:100vh和height:100%的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2023-04-06