CSS中百分比是相對於誰?

1. 用到百分比的屬性:

1. width, height
2. margin, padding
3. top, right, bottom, left
4. transform – translate
5. background-position, background-size

2. containing block

2.1 為什麼要知道containing block

MDN:

The size and position of an element are often impacted by its containing block. Most often, the containing block is the content area of an element`s nearest block-level ancestor, but this is not always the case. In this article, we examine the factors that deterime an element`s containing block.

所以百分比都是相對於其containing block來計算的

2.2 containing block的定義

翻譯自MDN:

containing block的定義和元素的postion屬性有關:

1. static 或 relative時:

   最近的__block container__(比如inline-block, block, list-item)或者建立了__formatting context__(比如table container, flex container, grid container或block container)的祖先元素的__context box__

2. absolute:

   最近的position屬性不是static的祖先元素的__padding box__

3. fixed:

   視窗

4. 特殊情況, fixed或absolute時, 當其父元素有以下情況出現時, containing block為其父元素的__padding box__:

   1). transform或perspective屬性的值不是none

   2). will-change屬性的值是transform或perspective

   3). filter屬性不是none或will-change屬性的值是filter(只在Firefox中有效)

3. 如何計算

1. height, top, bottom根據其containing block的height進行計算, 如果該height沒有指定(根據內容自適應), 那麼計算值為0
2. width, left, right, padding, margin根據其containing block的width進行計算
3. transform – translate, translateX, translateY, 根據__自身元素__的實際寬度計算
4. background:

   4.1 background-position根據__自身元素(不是containing block)__的寬高計算

   4.2 background-size根據圖片的大小進行計算. 需要注意的時, 當使用單個百分比(比如background-size: 50%;)計算時, height會隱式設為auto, 當其height計算出來的值大於容器的高度時, 超出部分會隱藏. 如果需要全部顯示, 需要明確設定寬和高的值(比如, background-size: 50% 50%;)