水平方向margin auto

2022-03-07 14:27:54 字數 1431 閱讀 3987

先上圖

由圖可看到,塊級元素的水平方向上又「7大屬性」:margin-left、border-left、padding-left、margin-left、width、padding-right、border-right和margin-right。這些屬性中,只有3個屬性可以設定為auto,分別為:margin-left、width和margin-right。

在討論之前,首先記住兩條原則:

1)這7大屬性的值總和=父元素的width;

2)屬性間衝突時,優先順序:width>margin-left>margin-right。

元素的屬性width和margin的不同組合情況分如下4種情況:

(1)(2)

(3)(4)

width

定值定值

auto

auto

margin

定值auto

定值auto

(1)width= 定值,margin=定值

此種情況即為width、margin-left、margin-right均為定值,為過分受限,根據原則2,此時總會把margin-right強制為auto

也就是說,為了達到原則1,margin-right會根據情況調整,使元素的總寬度等於其包含快的width。

(2)width= 定值,margin=auto

* width= 定值,margin-left = mergin-right = auto,此時margin-left與margin-right會設定為相等的長度,因此元素會在父元素中居中

* width= 定值,margin-left和mergin-right中乙個為定值、乙個為auto,則為auto的屬性根據原則1,自動調整。

(3)width= auto,margin=定值

* marin-left + margin-right < 父元素寬度,則width根據原則1設定為某個值

* marin-left + margin-right >= 父元素寬度,則width為0

(4)width= auto,margin=auto

* width、margin-left、mergin-right均為auto,這就是預設的情況,此時兩個外邊距會設定為0,width會盡可能寬以達到原則1。

* width = auto,margin-left和mergin-right中乙個為定值、乙個為auto,此時,根據原則2,width為占用剩下的所有寬度,為auto的margin的值為0。

以上是針對塊級元素,對於非塊級元素(內聯元素和替換元素)

* 只要設定為display:block,除了元素的寬度為內容的固有寬度這一點,其他表現與塊級元素表現一致。

* 如果不設定display:block, 則width為內容的固有寬度,水平方向margin可以設定為固定值,但設定為auto會表現為0;

元素的水平方向和垂直方向的布局

元素在其父元素水平方向的位置,由以下幾個屬性共同決定 margin left border left padding left width padding right border right margin right 乙個元素在其父元素中,水平布局必須滿足以下等式 margin left bord...

車牌校正中水平方向的邊緣提取

1.下面是乙個水平角度除錯比較好的設定 一下是主要幾個引數 cvsobel img,imgs,0,1,3 cverode imgth,imgth,kernelvertical,1 經過試驗驗證,其實用scharr濾波器比sobel濾波器更好,scharr濾波器只是把最後乙個svsobel引數改為 1...

DIV水平方向居中的幾種方法

1 center0 或者 1 margin auto 這樣的前提是父盒子裡沒有其他盒子。center1 在需要居中的盒子外面再包一層盒子,對這個父盒子進行設定 1 display flex 2 justify content center 3 align items center 伸縮盒是個很強大的...