首頁  >  文章  >  web前端  >  CSS中百分比的問題解析

CSS中百分比的問題解析

不言
不言原創
2018-06-09 15:41:381354瀏覽

這篇文章主要介紹了淺談CSS中的百分比,在定義CSS樣式的時候經常會用的“%”這個長度單位,但是這個百分比到底是相對於誰的百分比呢

本文介紹了淺談CSS中的百分比,分享給大家,具體如下:

結論:

  1. 標準流中的元素,看其屬性有沒有繼承性。對於width和margin-left,它是可以繼承的,它會參照父元素或祖先元素(其實是包含塊);對於height,它沒有繼承性,父元素或者祖先元素會自適應其所有子元素的高度和(這點是需要注意的)。

  2. 絕對定位參考的是離它最近的父元素或祖先元素,如果沒有父元素或祖先元素,那麼參照的是初始包含區塊(不同的瀏覽器可能不一樣,因為W3C沒有規定瀏覽器具體如何去實作)。但實際上,大部分瀏覽器將視覺區當作絕對定位的包含塊。

  3. 固定定位參考視覺區

#width設定成百分比

一般子元素通常將繼承父元素計算過的值當作百分比的參照,對於不可繼承的屬性和根元素,則使用初始值作為參照

例如.box沒有設定寬度,但預設繼承了body計算過的值,又因為.box是.item的父元素,因此.item又繼承了.box計算過的值。當一個區塊級元素不設定寬度時,則它的寬度預設為全屏,就是因為它繼承了包含區塊的寬度。

height設定成百分比

結論

高度設定成百分比時,高度不像寬度一樣會繼承父元素或祖先元素,相反,父元素或祖先元素會根據子元素的實際高度(高度計算值)來自適應,一般為所有子元素的內容加起來的高度和。而子元素會根據文字行高來設定高度具體值(在子元素高度不設定具體值的情況下)。對於有absolute定位的元素,其高度為百分比時會參照父元素或祖先元素的高度,絕對定位參照的是離它最近的父元素或祖先元素,如果沒有父元素或祖先元素,那麼參照的是初始包含塊(不同的瀏覽器可能不一樣,因為W3C沒有規定瀏覽器具體要如何實現)。但實際上,大部分瀏覽器將視覺區當作絕對定位的包含塊。

我們一般喜歡將寬度設定成百分比,但在將高度設定成百分比的時候要注意。

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

html為什麼會出現height等於21呢?是不是這21是從祖先元素繼承過來的?當我們把body的高度設定成100%結果還是一樣。其實這裡的高度為行高的高度,也就是說,在高度為0或不設定高度的情況下,高度是文字的行高,當我們在.box中加上line-height:20px;時,box ,body和html的高度都會變成20px;當我們把.box高度設定成具體值時:

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

##可以發現,body和html竟然跟.box高度一樣為100px.所以可以得出父元素在不設定高度的情況下,是自適應子元素高度的(在不設定高度的情況下,html和body的高度是所有內容加起來的高度),如果父元素設定了高度,則是另外一種情況了:

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

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

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

當有absolute定位時

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

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

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

#

改变height分别为100%和50%,可以发现html的高度为0,并没有自适应p的高度,因为p已经彻底脱离标准流了,我们说过,如果绝对定位没有定位的祖先元素,则包含块为初始包含块,这里的初始包含块即为可视区,所以这里的百分比是参照可视区的大小来计算的。所以为50%时占视口的一半。注意这只是一个视口的高度,把滚动条往下拉拉就知道了。

2.绝对定位的元素在另外一个定位元素里面(除static外)

这时百分比参照的是父元素生成的包含块计算出来的值

所以想让定位元素的高度占满整个屏幕,可以:

body{
  position:relative;
}

margin-left设置成百分比

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

这时出现了滚动条,这是因为将p的margin-left设置成了100%,而百分比是参照其包含块body的宽度,body又是参照的html(某些浏览器将它当作初始包含块)。而html的初始包含块是可视区,所以可视区的宽度再加上元素的100%,自然就超出了屏幕了。

解决方法:

(1)利用calc函数

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

(2)让body的宽度减去100px,因为p的百分比是参照其父元素的宽度计算的,因此这里将它的父元素的宽度减小,那么它的margin-left的100%自然就小了

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

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

CSS实现页面九宫格布局的简单示范

HTML5标签大全

以上是CSS中百分比的問題解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn