20.3　外补丁实例—设置层与层的距离

本小节通过实例来说明外补丁margin的用法，本属性在网页中经常用到，对网页布局起着非常重要的作用。若要掌握本属性用法，多实践就会对本属性有个很好的认识，才能够更好地使用。

下面的实例用来演示外补丁的各知识点用法，从不同的对象比较各个属性的区别，实例中以红色边框为边界，以区分各个对象。这种效果常常在网页中用来间隔层对象，使各个层之间有完美的距离，浏览起来有层次感，以下是实例演示代码。

20.3.1　层与层的距离效果

列出整体效果代码和效果图片。为了体验外补丁用法，本实例先列出网页代码，然后再一步步分析其代码内容。代码20.6是本实例的完整效果。

代码20.6　源代码\第20章\margin实例—设置层与层的距离.html

——————————-文件名：margin实例—设置层与层的距离.html——————————

01 ＜html＞

02 ＜head＞

03 ＜title＞margin实例—设置层与层的距离＜/title＞

04 ＜style type="text/css"＞

05 #mybody

06 {

07 /设置网页中的层容器/

08 /宽为778像素/

09 width：778px；

10 /容器层上、右、下、左的外补丁为自动/

11 margin：auto；

12 /字体大小为14像素/

13 font-size：14px；

14 /设置容器层边框为0/

15 border：0；

16 }

17 div

18 {

19 /设置所有的层的边框为1像素红色实线/

20 border：1px solid red；

21 }

22 #header

23 {

24 /设置头部层属性/

25 /设置上、右、下、左外补丁都为5像素/

26 margin：auto；

27 /设置宽度为100%/

28 width：100%；

29 /设置高度为80像素/

30 height：80px；

31 }

32 #contentleft

33 {

34 /设置尺寸大小/

35 width：180px；

36 height：450px；

37 /设置层向左漂移/

38 float：left；

39 }

40 #contentcenter

41 {

42 width：410px；

43 height：450px；

44 /设置层向左漂移/

45 float：left；

46 margin-left：6px；

47 }

48 #contentright

49 {

50 width：170px；

51 height：450px；

52 float：right；

53 margin-left：6px；

54 }

55 #bottom

56 {

57 width：100%；

58 /设置外补丁上下为5像素，左右为自动/

59 margin：5px auto；

60 height：60px；

61 }

62 ＜/style＞

63 ＜/head＞

64 ＜body＞

65 ＜div id="mybody"＞

66 ＜div id="header"＞

67 这是网页头部，放一些logo，宣传栏之类

68 ＜/div＞

69 ＜div id="contentright"＞

70 内容右栏

71 ＜/div＞

72 ＜div id="contentleft"＞

73 网页内容左栏

74 ＜/div＞

75 ＜div id="contentcenter"＞

76 内容中间栏

77 ＜/div＞

78 ＜div id="bottom"＞

79 网页底部

80 ＜/div＞

81 ＜/div＞

82 ＜/body＞

83 ＜/html＞

【代码解析】在代码20.6中，用网页的布局风格设置了各层之间的外补丁，即用margin表示，使各层之间的距离间隔一致，体现出各层之间的层次性，其中设置header层对象外补丁margin值为auto，表示上、右、下、左的外延距离都是auto（代码第26行），在网页中表现出来的是居中显示，效果如图20.6所示。

图　20.6　整体效果图