對height 100%和inherit的總結(jié)

Tychio 發(fā)布于2019-08-30 14:07 / 1951人閱讀

摘要：就算父元素未定位也是相對于直接父元素進行高度計算的。如果在絕對定位脫離文檔流中，等于最近已定位父元素的的高度。下一步目前只是闡述和總結(jié)了現(xiàn)象，還未解釋原理，希望大神能在留言區(qū)指點一下。接下來需要繼續(xù)學(xué)習(xí)知識，弄明白這些現(xiàn)象背后的原因。

對height 100%和inherit的總結(jié)

歡迎大家來我的博客留言：
https://sxq222.github.io/CSS%...
博客主頁：
https://sxq222.github.io

正文：

之前看到一篇相關(guān)的文章：http://www.zhangxinxu.com/wor...

在看這個文章的demo時發(fā)現(xiàn)一些問題，下面來總結(jié)歸納一下:

代碼如下




    
    demo

效果大致是這個樣子：

其中，左邊的是height 100%，右邊的是height inherit。

下面我們進行一下改動：

其實就是給兩個子元素加上絕對定位。效果如圖：

我們發(fā)現(xiàn)，100%的元素的高度計算是相對于父元素的了。這也比較容易理解，因為絕對定位的元素，他的計算規(guī)則是相對于他最近的position不為static的元素。就算父元素未定位inherit也是相對于直接父元素進行高度計算的。

我們在outer上加上position relative 試一試：

        .outer{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;;
        }

看來確實是這樣的，現(xiàn)在100%和inherit效果是一樣的.

再對css進行改動：

        .outer{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            box-sizing: border-box;
        }
        .in{
            background: #6aa;
        }
        .full{
            height: 100%;
        }
        .inherit{
            height: inherit;
        }

我們給父元素加上了boxsizing border box，讓父元素的高度計算規(guī)則改變，下面看看效果：

我們看到 inherit元素的高度變成了父元素的高度，而100%的元素。

我們再給父元素加上padding：

        .outer{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            box-sizing: border-box;
            padding: 10px;
        }

效果圖：

可以看到inherit的高度會與父元素的高度相等，而100%的高度會與父元素content相等。

下面我們給子元素加上絕對定位看看：

        .outer{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            box-sizing: border-box;
            padding: 10px;
        }
        .in{
            left: 0;
            top: 0;
            position: absolute;
            width: 50px;
            background: #6aa;
        }
        .full{
            height: 100%;
        }
        .inherit{
            height: inherit;
        }

效果圖：

我們看到，當加上絕對定位時，100%的子元素的高度為：父元素的（content + padding），而inherit的高度就是等于父元素的border-box高度。

下面我們將父元素outer的borde -box 改回去：

        .outer{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            /* box-sizing: border-box; */
            padding: 10px;
        }

效果圖：

可以看到，inherit的高度變?yōu)楦冈豤ontent-box的高度。

下面看一看固定定位：

        .outer{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #400;
            border: 10px solid #444;
            /* box-sizing: border-box; */
            padding: 10px;
        }
        .in{

            position: fixed;
            width: 50px;
            background: #6aa;
        }
        .full{
            left:300px;
            top: 0;
            height: 100%;
        }
        .inherit{
            left: 0;
            top: 0;
            height: inherit;
        }

可以看到，inherit的高度還是等于父元素盒子模型的高度，而100%的高度變?yōu)榱艘暱诘母叨取?/p> 總結(jié)

height:inherit的高度，總是等于父元素的盒子模型（content-box、border-box）的高度。

heighe:100%的高度，在文檔流中，就等于父元素的content的高度。如果在絕對定位（脫離文檔流）中，等于最近已定位父元素的content + padding的高度。在固定定位中，等于視口的高度。

下一步

目前只是闡述和總結(jié)了現(xiàn)象，還未解釋原理，希望大神能在留言區(qū)指點一下。

一開始覺得自己很熟悉CSS的定位、盒子模型，但是現(xiàn)在發(fā)現(xiàn)很多東西都是不明白的，這方面的只是還需要深入理解。接下來需要繼續(xù)學(xué)習(xí)CSS知識，弄明白這些現(xiàn)象背后的原因。