CSS百分比技巧介紹

歡迎大家在這裡學習CSS百分比技巧!下面是我們給大家整理出來的精彩內容。希望大家在這裡學習!

要理解諸如100%這樣的百分比值，其關鍵點是要明白，百分比是一定有其對應的參照值的。也就是說，百分比值是一種相對值，任何時候要分析它的效果，都需要正確找到它的參照。

一個css屬性值從定義到最終實際使用，是存在一個過程的。這其中涉及到Specified Values(指定值)、Computed Values(計算值)、 Used Values(使用值)、Actual Values(實際值)等概念，可以想見到，百分比值實際會在這個過程中，根據它的參照計算轉化為一個絕對值(比如100px)，然後再被應用。這就是百分比值的意義。

更多關於css屬性值的處理過程的信息，可以查看Value Processing。

百分比值的作用?

簡單地說，就是可變性。這可以衍生出自適應、響應式等看起來很有用的東西。

比如說，一個固定寬高的盒子，然後希望盒子內有一個絕對定位的，寬高和盒子一樣的蓋板(就這樣稱呼吧...)，下面這樣的寫法會很合適：

CSS Code復制內容到剪貼板

.box{position:relative;width:100px;height:100px;}

.box_cover{position:absolute;width:100%;height:100%;left:0;top:0;}

這裡使用百分比值的好處的是，如果需要修改盒子的尺寸，只需要修改盒子的寬高，而蓋板會自動保持和盒子的尺寸一致。

可以看到，柵格系統裡會用到百分比值來實現確切的對空間的劃分。百分比值是相對的，自適應的，因此柵格系統可以很好地用於響應式設計。

可用百分比值的常見css屬性

width & height

寬和高在使用百分比值時，其參照都是元素的包含塊(Containing Block，詳情)。width參照包含塊的寬度，height參照包含塊的高度。在大部分情況下，包含塊就是父元素的內容區(盒模型裡的content)。

我以前寫過width:100%; height:100%;這樣的代碼來實現尺寸和父元素一致。

好了，CSS百分比技巧精彩內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦：

CSS注釋技巧介紹