margin right值的計算疑惑?

時間 2021-06-03 13:55:25

1樓:一絲

這似乎是乙個 bug,然而很多年前 WebKit 中把正確的結果改殘廢了(getComputedStyle returns wrong value for margin-right),

理論上getComputedStyle().marginRight應該獲取到布局完成後右側的 margin 值。

傲嬌的 Servo 表示我可以正確計算:

如果我們把 .div1 設定指定的 margin left/right 看看會發生什麼?

.div1

Chrome:

Servo:

規範中說道:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含塊的寬度如果上述所有的屬性指定了非'auto'的值,這些值被稱為是「過度約束」,其中之一的計算值將不得不和它的指定值不同。如果'direction'屬性為'ltr','margin-right'的指定值被忽略,並重新計算以滿足上面的等式。如果'direction'為'rtl',對'margin-left'採取上述的方法。

上面我們明確的設定了 margin-left/right 值,此時發生「過度約束」的行為,所以必須重新通過上述等式重新計算。

那麼如果父元素設定direction: rtl,margin-left的指定值被忽略,此時我們可以預料正確的計算結果應該是margin-left 重新計算

margin-left = 200(包含塊) - 10(margin-right) - 100(width) = 90

Servo 依然堅挺!

Chrome:

我大 Servo 才是世界上最先進的瀏覽器!

2樓:Msdhu

這個問題,抽象的理解就是,在乙個大盒子裡放入了乙個小盒子,小盒子只佔100px的寬度,剩下的100px的寬度可以認為是空氣!!

如果要從你給的那個公式來說的話:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' +'margin-right' = width of containing block.

這個公式其實是用來判斷margin-left、margin-right和width設定為auto時的情況的. 只有在margin-left/margin-right的值為auto的情況下,才存在填充剩餘空間的說法,否則margin-left/margin-right的預設值都是0.

假設乙個寬100px的p被包含在乙個寬500px的div內,此時設定 p 的

margin-left值為auto,如下:

#demo

#demo

p

="demo"

>

p元素p

>div>

結果就是, p相對於包含塊右對齊了,因為margin-left:auto;自動佔據了包含塊的可用空間,即500 -

100px = 400px。也就是說auto最後的計算值為400px,即margin-left:400px;。

所以margin-right:auto;的結果會相當於左對齊。因此,margin:

0 auto;會在左右方向均分剩餘的空間,使得塊級元素得以在包含塊內居中顯示.

穩壓電路的濾波電容值具體怎麼計算?

什麼都不懂的Fresh 你沒說清是哪種穩壓.開關穩壓一般輸入電容不大,線性穩壓輸入電容會比較大。線性穩壓那個已經有人說的夠詳細了,至於開關穩壓,電容計算原理和線性一樣,只是開關頻率很高需要考慮到開關速度。 問問題要符合基本法呀,是線性穩壓器ldo還是dcdc開關穩壓電源還是張工畫的那種單相不控整流的...

環評中廢水排放濃度值怎麼計算

嵩安環保 生活汙水排放量 城鎮生活汙水排放係數 市鎮非農業人口 365 Qs qNKs 86400 Qs 居住區生活汙水量L S N 設計人口數 q 美人每日的排水 定額L 人.d Ks 總變化係數 律水青山 汙水不涉及排放速率 生產汙水濃度 物料衡算 產排汙係數 模擬其他專案 生活汙水濃度 審批部...

三角函式的值如何計算得出的?

小狼啊小狼 對於高中而言,特殊角的三角函式值一般是通過積化和差 和差化積 倍角半形公式得到的。下列這張表,羅列了角度為3的倍數的余弦精確值,可供計算參考 屈竟通 顯示公式請裝外掛程式 http www.Chrome 下若顯示比例過大,請縮放至 110 並重新整理。30 45 60 15 75 等特殊...