CSS的水平布局

2021-10-07 20:54:42 字數 923 閱讀 4302

css的水平布局

1、元素水平方向的布局

元素在其父元素水平方向的位置,由以下幾個屬性共同決定

margin-left

border-left

padding-left

width

padding-right

border-right

margin-right

乙個元素在其父元素中,水平布局必須滿足以下等式

margin-left+border-left+padding-left+width+padding-right

+border-right+margin-right = 其父元素內容區寬度(必須滿足)

以上等式必須滿足,如果相加結果等式不成立,則稱為過度約束,則

等式自動調整

如果 7 個值中沒有auto的情況,則瀏覽器自動調整margin-right使等式成立

- 這 7 個值中有三個值可以設定為auto

width(如果不寫,預設為auto)

margin-left

margin-right

如果某個值為auto,則設定為auto的值自動調整,以使等式成立

如果將 width 和 margin-left、margin-right 設定為auto,則寬度調整為最大,外邊距為0 ,如果將 margin-left、margin-right 設定為auto,寬度設定為固定值,則外邊距自動調整為相同寬度(居中顯示)

利用這個特性設定子元素在父元素水平居中:

例項:width:200px;

margin:0 auto

"box1">

"inner">

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...

QT 水平布局和垂直布局

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

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

size x large margin left margin right width 三者都可以設定成atuo而其它的如 margin top margin bottom padding不能夠設定成auto到,並且只有邊界可以為負值,其它的都不能夠為負值 對於前三者,如果內補白為0,外邊框內容寬度...