CSS水平布局

2022-06-19 15:39:10 字數 1979 閱讀 7389

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 -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,外邊框內容寬度...