html 水平布局,CSS水平布局

1

2

3

4

5

6

7 .outer{

8 width:800px;

9 height:200px;

10 border:10px red solid;

11

12 }

13 .inner{

14 width:200px;

15 height:180px;

16 background:orange;

17 margin-left:auto;

18 margin-right:auto;

19 border:10px yellow solid;

20 }

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

52

53

54

55

56

57

58

标签：right,auto,border,布局,水平,元素,margin,CSS,left

来源： https://www.cnblogs.com/zoutingrong/p/13956239.html