CSS中的百分比

結論：

• 標準流中的元素，看其屬性有沒有繼承性。對於width和margin-left，它是能夠繼承的，它會參照父元素或者祖先元素（實際上是包含塊）；對於height，它沒有繼承性，父元素或者祖先元素會自適應其全部子元素的高度和（這點是須要注意的）。
• 絕對定位參照的是離它最近的父元素或祖先元素，若是沒有父元素或祖先元素，那麼參照的是初始包含塊（不一樣的瀏覽器可能不同，由於W3C沒有規定瀏覽器具體如何去實現）。但實際上，大部分瀏覽器將可視區看成絕對定位的包含塊。
• 固定定位參照可視區

width設置成百分比

通常子元素一般將繼承父元素計算過的值看成百分比的參照，對於不可繼承的屬性和根元素，則使用初始值做爲參照

好比.box沒有設置寬度，但默認繼承了body計算過的值，又由於.box是.item的父元素，所以.item又繼承了.box計算過的值。當一個塊級元素不設置寬度時，則它的寬度默認爲全屏，就是由於它繼承了包含塊的寬度。

height設置成百分比

結論

高度設置成百分比時，高度不像寬度同樣會繼承父元素或者祖先元素，相反，父元素或者祖先元素會根據子元素的實際高度（高度計算值）來自適應，通常爲全部子元素的內容加起來的高度和。而子元素會根據文字行高來設置高度具體值（在子元素高度不設置具體值的狀況下）。對於有absolute定位的元素，其高度爲百分比時會參照父元素或祖先元素的高度，絕對定位參照的是離它最近的父元素或祖先元素，若是沒有父元素或祖先元素，那麼參照的是初始包含塊（不一樣的瀏覽器可能不同，由於W3C沒有規定瀏覽器具體要如何實現）。但實際上，大部分瀏覽器將可視區看成絕對定位的包含塊。

咱們通常喜歡將寬度設置成百分比，但在將高度設置成百分比的時候要注意。

<style>
        body,div{
            margin:0;
            padding：0；
        }
        .box{
            width:100px;
            height:100%;
            background-color: #58d3e2;
        }
    </style>
<div class="box">height 100%</div>

html爲何會出現height等於21呢？是否是這21是從祖先元素繼承過來的？當咱們把body的高度設置成100%結果仍是同樣。其實這裏的高度爲行高的高度，也就是說，在高度爲0或者不設置高度的狀況下，高度是文字的行高，當咱們在.box中加上line-height:20px;時，box,body和html的高度都會變成20px;當咱們把.box高度設置成具體值時：

<style>
        body,div{
            margin:0;
            padding：0；
        }
        .box{
            width:100px;
            height:100px;
            background-color: #58d3e2;
        }
    </style>
<div class="box">height 100%</div>

能夠發現，body和html居然跟.box高度同樣爲100px.因此能夠得出父元素在不設置高度的狀況下，是自適應子元素高度的（在不設置高度的狀況下，html和body的高度是全部內容加起來的高度），若是父元素設置了高度，則是另一種狀況了:

<style>
        body,div{
            margin:0;
            padding:0;
        }

        .d{
            height: 100px;
            width: 200px;
            background-color: #9d9d9d;
        }
        .box{
            width:100px;
            height:100px;
            background-color: #58d3e2;
        }
    </style>
<div class="d">
<div class="box">height</div>
</div>

能夠發現d,body,html的高度都變成了100px(原本應該是200px),說明父元素或祖先元素時被動自適應子元素高度的，它們的高度值不會繼承給自元素。

當有absolute定位時

1.絕對定位沒有定位的祖先元素

這時絕對定位參照的是一個視口的高度，注意視口這個概念。

<style>
        body,div{
            margin:0;
            padding：0；
        }
        .box{
            position：absolute;
            width:100px;
            height:100%;//改變百分比爲50%
            background-color: #58d3e2;
        }
    </style>
<div class="box">height 100%</div>

​

改變height分別爲100%和50%，能夠發現html的高度爲0，並無自適應div的高度，由於div已經完全脫離標準流了，咱們說過，若是絕對定位沒有定位的祖先元素，則包含塊爲初始包含塊，這裏的初始包含塊即爲可視區，因此這裏的百分比是參照可視區的大小來計算的。因此爲50%時佔視口的一半。注意這只是一個視口的高度，把滾動條往下拉拉就知道了。

2.絕對定位的元素在另一個定位元素裏面（除static外）

這時百分比參照的是父元素生成的包含塊計算出來的值

因此想讓定位元素的高度佔滿整個屏幕，能夠：

body{
  position:relative;
}

margin-left設置成百分比

<style>
        body,div{
            margin:0;
            padding：0；
        }
        .box{
            position:absolute;
            width:100px;
            height:100px;
            margin-left: 100%;
            background-color: #58d3e2;
        }
    </style>
<div class="box">margin-left</div>

這時出現了滾動條，這是由於將div的margin-left設置成了100%，而百分比是參照其包含塊body的寬度，body又是參照的html（某些瀏覽器將它看成初始包含塊）。而html的初始包含塊是可視區，因此可視區的寬度再加上元素的100%，天然就超出了屏幕了。

解決方法：

（1）利用calc函數

<style>
        body,div{
            margin:0;
            padding：0；
        }
        .box{
            position:absolute;
            width:100px;
            height:100px;
            margin-left: calc(100%-100px);
            background-color: #58d3e2;
        }
    </style>
<div class="box">margin-left</div>

（2）讓body的寬度減去100px,由於div的百分比是參照其父元素的寬度計算的，所以這裏將它的父元素的寬度減少，那麼它的margin-left的100%天然就小了

<style>
        body,div{
            margin:0;
            padding：0；
        }
         body{
             margin-right；100px;
        }
        .box{
            position:absolute;
            width:100px;
            height:100px;
            margin-left: 100%;
            background-color: #58d3e2;
        }
    </style>
<div class="box">margin-left</div>