CSS水平布局設定auto注意事項

2021-08-30 12:44:35 字數 1182 閱讀 2618

[size=x-large]margin-left , margin-right ,width 三者都可以設定成atuo而其它的如:margin-top ,margin-bottom ,padding不能夠設定成auto到,並且只有邊界可以為負值,其它的都不能夠為負值

對於前三者,如果內補白為0,外邊框內容寬度為:400px

情況一:margin-left:100px width:100px margin-right:auto(只設定兩者)

則:margin-right:200px

注意:如果前三者中只有乙個被設定為auto,而其它兩者都設定具體的值,那麼設定為auto屬性的值為使元素框寬度等於父元素寬度所需要的值

情況二:margin-left:100px width:100px margin-right:100px (三者都設定)

則margin-right:200px ;(之前設定的100px不起作用)

注意:如果三者都設定具體的值,沒有乙個屬性設定為auto,那麼margin-right被強制設定成auto

情況三:margin-left:100px width:auto margin-right:100px

等價於 margin-left:100px margin-right:100px

注意:將寬度設定為auto,而其它兩者均有值,那麼width將會設定為達到父邊框內容寬度的值

情況四:margin-left:auto width:100px margin-right:auto

結果將會是width居中,margin-left與margin-right設定成一樣的值,這樣就可以起到將元素居中的效果 (有的瀏覽器不支援)

情況五:三者中有兩個邊界元素之一與寬度設定成auto,那麼設定成auto的邊界值將自動降為0 如:

margin-left:auto width:auto margin-right:100px ;

情況六:三者均設定為auto,那麼邊界全為0,這種情況與不設定邊界與寬度的預設值一樣

如:margin-left:auto margin-right:auto width:auto

結果將會是width的值等於外邊框內容的寬度,而對應的內容邊界水平值全為0

另外的例子:

liul

h1這樣最後得到的結果為:20 + (-18px) = 2px 說明最終ul的底部與h1的頂部之間只有2px的距離[/size]

CSS水平布局

1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title title 6 style 7 outer 13 inner 21 22 元素的水平方向的布局 23 元素在其父元素中的水平方向的位置由以下幾個屬性共同決定 24 ma...

CSS的水平布局

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

QT 水平布局和垂直布局

qvboxlayout 垂直布局 qhboxlayout 水平布局 實現 qwidget widget newqwidget qhboxlayout hboxlayout newqhboxlayout qlabel label newqlabel hello qpushbutton pushbutt...