不少css屬性的取值均可以是百分比值。雖然形式上來講,百分比值都是數字後跟%
的形式(注意數字和%
之間不能夠有空格),但在不一樣的使用場合下,其意義會有不少不一樣。所以,百分比值能夠說包含了至關豐富的內容。css
要理解諸如100%
這樣的百分比值,其關鍵點是要明白,百分比是必定有其對應的參照值的。也就是說,百分比值是一種相對值,任什麼時候候要分析它的效果,都須要正確找到它的參照。html
一個css屬性值從定義到最終實際使用,是存在一個過程的。這其中涉及到Specified Values(指定值)、Computed Values(計算值)、 Used Values(使用值)、Actual Values(實際值)等概念,能夠想見到,百分比值實際會在這個過程當中,根據它的參照計算轉化爲一個絕對值(好比100px
),而後再被應用。這就是百分比值的意義。css3
更多關於css屬性值的處理過程的信息,能夠查看Value Processing。bootstrap
簡單地說,就是可變性。這能夠衍生出自適應、響應式等看起來頗有用的東西。segmentfault
好比說,一個固定寬高的盒子,而後但願盒子內有一個絕對定位的,寬高和盒子同樣的蓋板(就這樣稱呼吧...),下面這樣的寫法會很合適:瀏覽器
.box{position:relative;width:100px;height:100px;} .box_cover{position:absolute;width:100%;height:100%;left:0;top:0;}
這裏使用百分比值的好處的是,若是須要修改盒子的尺寸,只須要修改盒子的寬高,而蓋板會自動保持和盒子的尺寸一致。佈局
再一個例子是Bootstrap的柵格系統:post
能夠看到,柵格系統裏會用到百分比值來實現確切的對空間的劃分。百分比值是相對的,自適應的,所以柵格系統能夠很好地用於響應式設計。測試
寬和高在使用百分比值時,其參照都是元素的包含塊(Containing Block,詳情)。width
參照包含塊的寬度,height
參照包含塊的高度。在大部分狀況下,包含塊就是父元素的內容區(盒模型裏的content)。spa
我之前寫過width:100%; height:100%;
這樣的代碼來實現尺寸和父元素一致。但我發現有時候寬度是符合意思(100%)的,但高度卻沒有效果。請看下面這個示例:
能夠看到,直接父元素(包含塊)是否有明確的高度定義,會影響height
爲百分比值時的結果。
關於這一點的詳細解釋是,當一個元素的高度使用百分比值,若是其包含塊沒有明確的高度定義(也就是說,取決於內容高度),且這個元素不是絕對定位,則該百分比值等同於auto
。auto
是初始默認值,因此看起來就像是「失效」了。
若是元素是根元素(<html>
),它的包含塊是視口(viewport)提供的初始包含塊(initial containing block),初始包含塊任什麼時候候都被認爲是有高度定義的,且等於視口高度。因此,<html>
標籤的高度定義百分比老是有效的,而若是你但願在<body>
裏也用高度百分比,就必定要先爲<html>
定義明確的高度。這就是爲何在固定頁腳一文中,有html, body{height:100%;}
這樣的寫法。
這2個屬性屬於混合屬性,也經過一個例子說明:
能夠分析獲得,對於margin
和padding
,其任意方向的百分比值,參照都是包含塊的寬度。
爲何會多個方向都取包含塊的寬度做爲參照呢?在我看來,包含塊的寬度在塊佈局的排版中是最有用的(想象一下word裏輸入文字,到寬度邊緣後換行的場景),對應的,水平方向的內外邊距必定要參照包含塊的寬度。再考慮垂直方向的內外邊距,它們若是不和水平方向取相同的參照物,就會由於不一致而很難使用。因此,整體來講,統一以包含塊的寬度做爲參考,會具備相對最好的可用性。
嚴格地說,參照是包含塊的寬度,是在樣式屬性writing-mode
爲默認值時的狀況。不過這個屬性極少被用到,因此在此不作考慮。
你也許見過有人用下面的代碼來讓一個矩形變成恰好的圓形(請體會這個「恰好」):
.circle{border-radius:50%;}
對此的解釋是,爲一個元素的border-radius
定義的百分比值,參照物是這個元素自身的尺寸。也就是說,假如這個元素寬是60px,高是50px(border-box的尺寸),那麼border-radius:50%
的結果等同於border-radius:30px/20px;
。
若是你還疑惑這裏帶/
的圓角寫法,請查看MDN對border-radius的說明。
background-position
的初始值就是百分比值0% 0%
。下面是一個使用示例:
background-position
的百分比值,取的參照是一個減法計算值,由放置背景圖的區域尺寸,減去背景圖的尺寸獲得,能夠爲負值。對照上面的示例,思考一下,應該能夠感覺到,以這個減法計算值爲參照的話,正好能夠符合咱們感官上對背景圖位置的理解。
這個屬性包括水平位置和垂直位置,它們分別參照的是寬度減法計算值和高度減法計算值。
你可能注意到了上面示例的最後一個居然寫了4個值(通常都只用2個值)。關於它的意義,請查看W3C的background-position。
參照是直接父元素的font-size
。例如,一個元素的直接父元素的font-size
是14px
,不管這個是直接定義的,仍是繼承獲得的,當該元素定義font-size:100%;
,得到的效果就是font-size:14px;
。
參照是元素自身的font-size
。例如,一個元素的font-size
是12px
,那麼line-height:150%;
的效果是line-height:18px;
。
參照是元素自身的line-height
(和前面頗有關聯吧,因此我排在了這裏)。例如,一個元素的line-height
是30px
,則vertical-align:10%;
的效果是vertical-align:3px;
。
對這個屬性我還想說,儘管vertical-align
可使用數字,百分比值,但瀏覽器兼容性差別較大,在跨瀏覽器實現時可能須要較多hack。所以,我我的傾向於使用middle
等相對來講兼容性差別較小的關鍵字類型的值。
參照是元素的包含塊。left
和right
是參照包含塊的寬度,bottom
和top
是參照包含塊的高度。
平移變換,在水平方向和垂直方向上也可使用百分比,其參照是變換的邊界框的尺寸(等於這個元素本身的border-box尺寸)。例如,一個寬度爲150px
,高度爲100px
的元素,定義transform:translate(50%, 50%)
的效果是transform:translate(75px, 50px);
。
還能夠補充一點,translate3d
對應是還有第三個維度的,可是,通過測試,最後的第3個值不可使用百分比(不然樣式定義無效)。至於爲何不能夠參照呢,大概是由於那是神祕的第三維度吧...
若是你想要知道更多的百分比值在css屬性中的可用狀況及參照值,請參考MDN的CSS percentage values。
請注意,當百分比值用於可繼承屬性時,只有結合參照值計算後的絕對值會被繼承,而不是百分比值自己。例如,一個元素的font-size
是14px
,並定義了line-height:150%;
,那麼該元素的下一級子元素繼承到的line-height
就是21px
,而不會再和子元素本身的font-size
有關。
好不容易終於看完了這麼多百分比值的用法,有興趣要使用一些嗎?(・-・*)
我本身的見解是,百分比值是css所提供的一種創建元素與元素之間,或者元素的不一樣屬性之間的關聯性的有效方法。只要是想創建一種關聯性,均可以適當考慮使用百分比值。並且,不需本身作任何動態的事件處理和更新,任什麼時候候,你均可以信賴這個百分比。
(從新編輯自個人博客,原文地址:http://acgtofe.com/posts/2014/06/percentage-in-css)