資訊專欄INFORMATION COLUMN
摘要：絕對單位英寸磅相對單位與元素字號掛鉤與元素字體的高度掛鉤與根元素字號掛鉤與像素掛鉤另一屬性值的百分比。定義基于父元素寬度的百分比的縮進。參考權威教程節樣式可以使用百分比的屬性總結淺析屬性之中經常出現的百分比
起源：一道面試題（貓眼電影） 問題：css中的單位都有哪些？可以取百分數的單位有哪些？其中margin-top取百分數時是相對于誰來計算的？ 回答：
（1）css中的單位：CSS規定了兩種類型的單位，一種是絕對單位，另一種是與其他屬性掛鉤的相對單位。
絕對單位：in-英寸；cm；mm；pt-磅；pc-pica
相對單位：em-與元素字號掛鉤；ex-與元素字體的“x高度”掛鉤；rem-與根元素字號掛鉤；px-與CSS像素掛鉤；%-另一屬性值的百分比。
（2）CSS中可以取百分比的樣式單位
定位：top,right,bottom,left;
盒模型：width,height,margin,padding;
背景：backgroud-position,background-size;
文本：text-indent;
字體：font-size;
（3）margin-top是相對于父級元素的width屬性（不是height屬性）來計算的。
總結：CSS中屬性取值百分比 1.百分比單位基于包含塊的寬度來計算的屬性：margin，padding，width，max-width，min-width，left，right，text-indent.
注意
1.margin-top，margin-bottom，padding-top和padding-bottom都是基于包含塊的width屬性來計算的。
2.text-indent：定義基于父元素寬度的百分比的縮進。當外層不指定寬度時，ie下會基于瀏覽器寬度。
基于包含塊的高度來計算的屬性：top，bottom，height，max-height，min-height
注意
關于包含塊（containing block）的概念，不能簡單地理解成是父元素。如果是靜態定位和相對定位，包含塊一般就是其父元素。但是對于絕對定位的元素，包含塊應該是離它最近的 position 為 absolute、relative、或者 fixed 的祖先元素。對固定定位的元素，它的包含塊是視口（viewport）。
基于當前字體大小來計算的屬性：line-height
關于line-heigt的詳細解釋，請移步這里css行高line-height的用法與計算原理
基于line-height來計算的屬性：vertical-align
background-position：背景圖像的位置，分別設置水平方向和垂直方向上的兩個值，如果使用百分比，那么百分比值會同時應用于元素和圖像。例如 50% 50% 會把圖片的（50%, 50%）這一點與框的（50%, 50%）處對齊，相當于設置了 center center。同理 0% 0% 相當于 left top，100% 100% 相當于 right bottom。
backgroud-size:設置背景圖像的大小。兼容IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 屬性。 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 “auto”。
注意
2.百分比繼承background-size還可以取預定義的值：contain，cover，auto。
如果某個元素設置了百分比的屬性，則后代元素繼承的是計算后的值。例如：
p { font-size: 10px } p { line-height: 120% } / 120% of "font-size" / 那么p的子元素繼承到的值是 line-height: 12px，而不是 line-height: 120%。
補充：
參考關于css中的繼承：
樣式層疊與繼承是樣式表中兩個關鍵概念，瀏覽器會根據層疊和繼承規則確定顯示一個元素時各種樣式屬性采用的值。
并非所有的CSS屬性都可以繼承，這這方面有條經驗可以參考：與元素外觀（文字，顏色，字體等）相關的樣式會被繼承；與元素在頁面上的布局相關的樣式不會繼承。此外，還可以使用inherit強行實施繼承。
1.HTML5權威教程（4.2.3節）
2.css樣式可以使用百分比的屬性--總結
3.淺析CSS 屬性之中經常出現的百分比
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111479.html
摘要：我們會在組合選擇器中來了解為什么權重值要加連字符。組合選擇器中的權重值會分別對不同類型的選擇器進行計數。對比兩組選擇器，第二組選擇器有兩個選擇器，擁有更高的權重值。 CSS是一門復雜的語言，擁有相當的大能力。 它我們允許為頁面添加布局和設計，允許多個元素甚至多個頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎點。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...
摘要：我們會在組合選擇器中來了解為什么權重值要加連字符。組合選擇器中的權重值會分別對不同類型的選擇器進行計數。對比兩組選擇器，第二組選擇器有兩個選擇器，擁有更高的權重值。 CSS是一門復雜的語言，擁有相當的大能力。 它我們允許為頁面添加布局和設計，允許多個元素甚至多個頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎點。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...
摘要：元素框相對于之前正常文檔流中的位置發生偏移，并且原先的位置仍然被占據。這些相對于布局來說是基礎的，同時也是非常重要的。可以看到，浮動元素，其實對于布局來說，是特別危險的。 前言 現在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁面仔。或許是職責越來越大，整體的前端井噴式的發展，使我們只關注了js，而疏遠了css和html。 其實，我們可能經常在聊組件化，咋地咋地。但是，回過頭來思...
摘要：簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗下面我介紹哪些或許你不知道小技巧。默認為，此時陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實習的時候帶我的師傅，告訴我要注重基礎，底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。...
摘要：簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗下面我介紹哪些或許你不知道小技巧。默認為，此時陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實習的時候帶我的師傅，告訴我要注重基礎，底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。...
閱讀 1399·2021-09-02 09:53
閱讀 2667·2021-07-29 13:50
閱讀 1715·2019-08-30 11:07
閱讀 1571·2019-08-30 11:00
閱讀 1449·2019-08-29 14:00
閱讀 1844·2019-08-29 12:52
閱讀 2560·2019-08-29 11:11
閱讀 3415·2019-08-26 12:23
