[toc] > 請注意，當百分比值用于可繼承屬性時，只有結合參照值計算后的絕對值會被繼承，而不是百分比值本身。 ## 使用百分的場合 在目前項目中，最常用百分的莫過于`width` 和`height`。其他可以用到百分比的樣式包括：`border-radius`、`background-position`、`font-size`、`line-height`、`vertical-align`、`bottom`、`left`、`right`、`top`、`transform:translate`等。 ## 參照是父級（or 定位父級） ### 不明確的高度和百分比 有一種特殊情況是，父元素沒有明確的高度定義，比如說`min/max-height`這種（或則沒有手動設置高度，為auto），并且子元素使用百分比并且不是絕對定位，那么這時候百分比等同于`auto`(也就是說該元素的高度依據的是其本身內容的高度)。  值得注意的是只是**高度**存在這種情況，而寬度并**不存在** 如下圖示例中，給一個父級元素`max-width:70%`的不確定寬度，子元素仍然能使用百分比寬度  #### 與絕對定位 但是一旦子元素是經過定位的，那么高度就會根據定位父級(**沒有的話就是視口**)進行計算  #### 與fixed（固定為定位） 固定定為的話，使用百分比時的高度計算始終是按照**視口**來決定的。 ### margin和padding `margin/padding-top/bottom`計算是按照定位父級的**寬度**來計算的。 沒錯，`margin`，`padding`，**就是這么奇葩！** ``` .box{ width: 400px; height: 200px; background:orange; overflow:hidden; } .son{ width:50px; height:50px; margin-top:50%; /* ->200px，說明是按照width來計算的 */ background:orangered } ``` ### font-size 這個屬性的百分比參考值是它的父元素的font-size，沒有太多的信息，是比較純粹的一個百分比。 ## bottom、left、right、top 定位使用的四個方向值，如果使用百分比的話，參考的是**元素包含塊**的尺寸，這個時候不同于margin或padding，left和right是參照包含塊的寬度，bottom和top是參照包含塊的高度 ## 參照物是自身 ### border-radius border-radius的百分比參考值是**自身**的尺寸 橫軸上的百分比參考的是元素自身的寬度，縱軸上的百分比參考的是元素自身的高度，負值是無效的 ### transform:translate 在水平或者垂直居中的應用場景中，我最常使用的便是這個平移變換了,輕輕松松的-50%就可以讓塊元素居中,那么這個百分之50%基于的是什么樣的參考值呢？答案便是其**自身**元素的寬度或者高度 注意，這個參考物是自身的`border-box`的尺寸 ## 參照物是富余空間 ### backgroud-position background-position這個屬性允許你在它的包含塊中隨意移動背景圖片(或者漸變)，默認值是0 0，這個時候的圖片是放在左上角的位置，如下demo: ``` <div class="border-container"></div> ``` 如果使用百分比，那么百分比的計算應該是這樣的，假設一個容器的長寬為300X200，圖片是150X150，那么當設置background-position: 20% 100%，那么圖片新的位置應該是(以左上角為例): ``` (0, 0) => ((400 - 150) * 20%, (200 - 150) * 100%) ``` 也就是移動的結果是`(父元素-背景圖片)*百分比`，這樣的設計很符合我們平時排版的思路。 ## line-height line-height這個屬性的百分比參考的是自身的**font-size**大小 ## vertical-align vertical-align顧名思義是縱向對齊，其參考值是自身的**line-height**