CSS中的百分比

CKJOKER 發布于2019-08-26 12:00 / 3192人閱讀

摘要：我們一般喜歡將寬度設置成百分比，但在將高度設置成百分比的時候要注意。解決方法利用函數讓的寬度減去因為的百分比是參照其父元素的寬度計算的，因此這里將它的父元素的寬度減小，那么它的的自然就小了

結論：

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

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

固定定位參照可視區

width設置成百分比

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

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

height設置成百分比

結論

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

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

 
height 100%

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

 
height 100%

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

 

height

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

當有absolute定位時

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

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

 
height 100%

改變height分別為100%和50%，可以發現html的高度為0，并沒有自適應div的高度，因為div已經徹底脫離標準流了，我們說過，如果絕對定位沒有定位的祖先元素，則包含塊為初始包含塊，這里的初始包含塊即為可視區，所以這里的百分比是參照可視區的大小來計算的。所以為50%時占視口的一半。注意這只是一個視口的高度，把滾動條往下拉拉就知道了。

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

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

所以想讓定位元素的高度占滿整個屏幕，可以：

body{
  position:relative;
}

margin-left設置成百分比

  
margin-left

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

解決方法：

（1）利用calc函數


margin-left

（2）讓body的寬度減去100px,因為div的百分比是參照其父元素的寬度計算的，因此這里將它的父元素的寬度減小，那么它的margin-left的100%自然就小了


margin-left

云服務器 GPU云服務器 js中的乘百分之百百分比百分比布局 html百分比

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108014.html

深入學習CSS屬性中的百分比

摘要：同理相當于，相當于基于元素本身的寬度但此值只能應用在塊元素上，所設置百分值將使用背景圖片大小根據所在元素的寬度的百分比來計算面試題：css中的單位都有哪些？可以取百分數的單位有哪些？這些百分比是如何計算的？ css中的單位絕對單位 in-英寸；cm；mm；pt-磅；pc-pica 相對單位 em-與元素字號掛鉤；ex-與元素字體的x高度掛鉤；rem-與根元素字號掛鉤；px...

icattlecoder 2019-08-29 13:04 評論0 收藏0
CSS屬性中經常出現的百分比

摘要：絕對單位英寸磅相對單位與元素字號掛鉤與元素字體的高度掛鉤與根元素字號掛鉤與像素掛鉤另一屬性值的百分比。定義基于父元素寬度的百分比的縮進。參考權威教程節樣式可以使用百分比的屬性總結淺析屬性之中經常出現的百分比起源：一道面試題（貓眼電影）問題：css中的單位都有哪些？可以取百分數的單位有哪些？其中margin-top取百分數時是相對于誰來計算的？回答：（1）css中的單位：CSS規...

mylxsw 2019-08-29 11:11 評論0 收藏0
CSS通用數據類型

摘要：相反的，通用數據類型并不和任何特定的屬性相關聯。本文，我將整體講述一下所有的通用數據類型。這樣以來就能夠避免和字符串數據類型混淆。距離距離數據類型表示距離的單位，有兩種長度單位。漸變函數使用數據類型來定義。 CSS中屬性的值有著許多種格式。為了讓用戶代理（即瀏覽器）能夠識別一個值是否有效，則需要確認該值是否符合該類值支持的格式的其中一種。這些屬性值所支持的格式叫做數據類型，在規范中用的...

Elle 2019-08-02 16:15 評論0 收藏0
CSS通用數據類型

摘要：相反的，通用數據類型并不和任何特定的屬性相關聯。本文，我將整體講述一下所有的通用數據類型。這樣以來就能夠避免和字符串數據類型混淆。距離距離數據類型表示距離的單位，有兩種長度單位。漸變函數使用數據類型來定義。 CSS中屬性的值有著許多種格式。為了讓用戶代理（即瀏覽器）能夠識別一個值是否有效，則需要確認該值是否符合該類值支持的格式的其中一種。這些屬性值所支持的格式叫做數據類型，在規范中用的...

Markxu 2019-08-29 18:46 評論0 收藏0
詳述css中的百分比值

摘要：很多屬性的取值都可以是百分比值。這就是百分比值的意義。可用百分比值的常見屬性寬和高在使用百分比值時，其參照都是元素的包含塊，詳情。百分比值的繼承請注意，當百分比值用于可繼承屬性時，只有結合參照值計算后的絕對值會被繼承，而不是百分比值本身。很多css屬性的取值都可以是百分比值。雖然形式上來說，百分比值都是數字后跟%的形式（注意數字和%之間不可以有空格），但在不同的使用場合下，其意義會有...

flyer_dev 2019-08-28 17:57 評論0 收藏0