屬性設置百分比時的計算參考匯總

Moxmi 發布于2019-04-23 11:56 / 959人閱讀

摘要：對象脫離常規流，偏移定位是以窗口為參考絕對定位的元素，在，，，屬性未設置時，會緊隨在其前面的兄弟元素之后，但在位置上不影響常規流中的任何元素。例如設置百分比時，子元素繼承是父元素乘以百分百之后的具體數值，所以可能會出現重疊現象。

元素寬高

width,min-width,max-width等元素寬度設置百分比，以包含塊的寬度為標準進行計算；
height,min-height,max-height等元素寬度設置百分比，以包含塊的高度為標準進行計算；

內外邊距

margin,padding設置百分比時，在默認（水平）書寫模式下，以包含塊的寬度為標準進行計算，其他情況以包含塊的高度進行計算。所以正常情況下，margin-top,padding-top 等垂直方向上的內外邊距也都是以包含塊的寬度進行計算的

定位

left,right是以包含塊的寬度為標準進行計算的；
top,bottom是以包含塊的高度為標準進行計算的；

需要注意這里的包含塊是和設置的position有關的：

absolute：對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素（position非static的元素），如果沒有定位的祖先元素，則一直回溯到body元素。
fixed：對象脫離常規流，偏移定位是以窗口為參考

絕對定位的元素，在top，right，bottom，left屬性未設置時，會緊隨在其前面的兄弟元素之后，但在位置上不影響常規流中的任何元素。

字體

font-size設置百分比時，以父元素的字體大小的標準進行計算

行高

line-height設置為百分比是，以自身字體大小為標準進行計算

邊框圓角

border-radius使用百分數定義圓形半徑或橢圓的半長軸，半短軸。水平半軸相對于盒模型的寬度；垂直半軸相對于盒模型的高度

平移變換

translate()即：translatex(),translatey()使用百分比定義，分別是以自身的寬度和高度進行計算

注意

注意：只有計算值是可以繼承的。所以，即使一個百分比值用于父屬性，一個真正的值，比如具體像素寬度的值，將訪問繼承的屬性，而不是百分比的值。

例如line-height設置百分比時，子元素繼承是父元素乘以百分百之后的具體數值，所以可能會出現重疊現象。而設置為乘積因子就不會出現這種情況，子元素的行高為自身的font-size乘以乘積因子

云服務器 GPU云服務器設置OSS文件被訪問時的HTTP頭設置屬性屬性設置批量設置屬性

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

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

【CSS深入】設置不同塊級流方向時的屬性百分比計算

摘要：簡言之，塊級流方向包含兩種一種是水平流，一種是垂直流。對百分比計算的影響首先，先明確這里要討論的是塊級元素的水平流和垂直流對的百分比屬性值的計算值的影響。百分比在屏幕自適應是我們常用，但是很多時候某個CSS屬性的百分比計算值，并非如我們所想象的那樣子。前段時間有位同學分享了一篇關于margin/padding自適應布局的文章，看完后我去w3.org查了下margin和padding百...

Yujiaao 2019-08-28 18:29 評論0 收藏0
04.Android之動畫問題

摘要：動畫占用大量內存，如何優化使用動畫的注意事項有哪些問題這個問題主要出現在幀動畫中，當圖片數量較多且圖片較大時就極易出現，這個在實際開發中要尤其注意，盡量避免使用幀動畫。目錄介紹 4.0.0.1 Android中有哪幾種類型的動畫，屬性動畫和補間動畫有何區別？補間動畫和屬性動畫常用的有哪些？ 4.0.0.2 View動畫為何不能真正改變View的位置？而屬性動畫為何可以？屬性動畫是如...

Muninn 2019-08-16 14:20 評論0 收藏0
YCProgress自定義百分比進度條

摘要：目錄介紹本庫優勢亮點使用介紹圓環百分比進度條直線百分比進度條仿殺毒類型百分比進度條注意要點效果展示其他介紹本庫優勢亮點圓環百分比進度條簡便且小巧，支持設置多種屬性。避免開發者使用造成其他問題。返回真正的進度值。目錄介紹 1.本庫優勢亮點 2.使用介紹 2.1 圓環百分比進度條 2.2 直線百分比進度條 2.3 仿殺毒類型百分比進度條 3.注意要點 4.效果展示 5.其他介紹...

Kahn 2019-08-16 13:55 評論0 收藏0
360前端星計劃學習-HTML + CSS

摘要：設計思想兼容已有內容避免不必要的復雜性解決現實問題優雅降級尊重事實標準變化新增語義化標簽去除純表示性的標簽拖拽離線語法標簽不區分大小寫推薦小寫空標簽可以不閉合屬性不必引號。遇到這種情況時，會生成匿名塊級盒來包含行級盒。瀏覽器瀏覽器渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

lpjustdoit 2019-08-29 12:27 評論0 收藏0
360前端星計劃學習-HTML + CSS

摘要：設計思想兼容已有內容避免不必要的復雜性解決現實問題優雅降級尊重事實標準變化新增語義化標簽去除純表示性的標簽拖拽離線語法標簽不區分大小寫推薦小寫空標簽可以不閉合屬性不必引號。遇到這種情況時，會生成匿名塊級盒來包含行級盒。瀏覽器瀏覽器渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

mumumu 2019-08-01 16:41 評論0 收藏0