1doctype 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 -margin-left
25 -border-left
26 -padding-left
27 -width
28 -padding-right
29 -border-right
30 -margin-right
31 乙個元素在其父元素中,水平布局必須滿足以下等式
32 margin-left+border-left+padding-left+width+padding-righ t+border-right+margin-right = 其父元素的內容區的寬度
33 0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
34 以上等式必須滿足,如果相加結果使等式不成立,則稱為過度約束》 ,則等式會自動調整
35 -調整的情況:
36 -如果這七個值中沒有auto的情況,則瀏覽器會自動調節margin -right值以使等式成立
37 這七個值中有三個值可設定為auto:
38 -width
39 -margin-left
40 -maring-right
41 -如果某個值為auto,則會自動調整auto那個值以使等式成立
42 -如果將乙個寬度和乙個外邊距設定為auto,則寬度會調整到最
大43 -如果將三個值都設定為auto,則外邊距都是0,寬度最大(撐滿
整個父元素)
44 -如果將兩個外邊距設定為auto寬度固定值,則子元素在父元素
中水平居中
45
46
47
48
*/49
50
51
style
>
52 head
>
53 <
body
>
54
<
div
class
="outer"
>
55
<
div
class
="inner"
>
div>
56
div>
57 body
>
58 html
>
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...
CSS水平布局設定auto注意事項
size x large margin left margin right width 三者都可以設定成atuo而其它的如 margin top margin bottom padding不能夠設定成auto到,並且只有邊界可以為負值,其它的都不能夠為負值 對於前三者,如果內補白為0,外邊框內容寬度...