CSS中百分比是相對于誰?

cartoon 發布于2019-08-30 15:53 / 3237人閱讀

摘要：用到百分比的屬性為什么要知道所以百分比都是相對于其來計算的的定義翻譯自的定義和元素的屬性有關或時最近的比如或者創建了比如或的祖先元素的最近的屬性不是的祖先元素的窗口特殊情況或時當其父元素有以下情況出現時為其父元素的或屬性的值不是

1. 用到百分比的屬性:

width, height

margin, padding

top, right, bottom, left

transform - translate

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屬性有關:

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

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

fixed:
窗口

特殊情況, fixed或absolute時, 當其父元素有以下情況出現時, containing block為其父元素的__padding box__: 
1). transform或perspective屬性的值不是none
2). will-change屬性的值是transform或perspective
3). filter屬性不是none或will-change屬性的值是filter(只在Firefox中有效)

3. 如何計算

height, top, bottom根據其containing block的height進行計算, 如果該height沒有指定(根據內容自適應), 那么計算值為0

width, left, right, padding, margin根據其containing block的width進行計算

transform - translate, translateX, translateY, 根據__自身元素__的實際寬度計算

background:

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

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

云服務器 GPU云服務器 css中div是什么意思服務器中獲得相對路徑 css中 html中css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116702.html

CSS屬性中經常出現的百分比

摘要：絕對單位英寸磅相對單位與元素字號掛鉤與元素字體的高度掛鉤與根元素字號掛鉤與像素掛鉤另一屬性值的百分比。定義基于父元素寬度的百分比的縮進。參考權威教程節樣式可以使用百分比的屬性總結淺析屬性之中經常出現的百分比起源：一道面試題（貓眼電影）問題：css中的單位都有哪些？可以取百分數的單位有哪些？其中margin-top取百分數時是相對于誰來計算的？回答：（1）css中的單位：CSS規...

mylxsw 2019-08-29 11:11 評論0 收藏0
探究position定位中absolute和relative的異同

摘要：總結一下定位相對于誰進行定位有點復雜就是找出定位元素父元素鏈上的所有父元素，由近到遠哪個元素不是默認定位即定位的，那么就相對于它進行定位。當父元素鏈上所有父元素都是默認定位，那么定位就是相對于元素的，效果和定位差不多。相信學過CSS的同學都曾經對于position的各種屬性很困惑，尤其是absolute和relative定位，簡直就是傻傻分不清，筆者寫這篇文章就是希望通過代碼實驗的方...

NickZhou 2019-08-29 13:57 評論0 收藏0
2019年前端面試題-02

摘要：在客戶端編程語言中，如和，同源策略是一個很重要的安全理念，它在保證數據的安全性方面有著重要的意義。同源策略還應該對一些特殊情況做處理，比如限制協議下腳本的訪問權限。遍歷循環循環方法用于調用數組的每個元素，并將元素傳遞給回調函數。 px、em和rem的區別 px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位，不會因為其他元素的尺寸變化而變化； em表示相對...

MageekChiu 2019-08-30 11:06 評論0 收藏0
2019年前端面試題-02

摘要：在客戶端編程語言中，如和，同源策略是一個很重要的安全理念，它在保證數據的安全性方面有著重要的意義。同源策略還應該對一些特殊情況做處理，比如限制協議下腳本的訪問權限。遍歷循環循環方法用于調用數組的每個元素，并將元素傳遞給回調函數。 px、em和rem的區別 px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位，不會因為其他元素的尺寸變化而變化； em表示相對...

trilever 2019-08-23 18:00 評論0 收藏0