20.3.3　设置层的尺寸

设置好各层的尺寸，这时层的内容和文字都确定了，每一步只改变CSS样式即可，如何设置好各层的尺寸，就要用到前面学习的width和height属性了，为了让层突出大小，设置层为红色边框，代码20.8表示设置好各层的大小属性，只表示样式代码。

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

01 ＜style type="text/css"＞

02 #mybody

03 {

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

05 /宽为778像素/

06 width：778px；

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

08 margin：auto；

09 /字体大小为14像素/

10 font-size：14px；

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

12 border：0；

13 }

14 div

15 {

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

17 border：1px solid red；

18 }

19 #header

20 {

21 /设置头部层属性/

22 /设置宽度为100%/

23 width：100%；

24 }

25 #contentleft

26 {

27 /设置中间部分的左边/

28 width：180px；

29 }

30 #contentcenter

31 {

32 width：410px；

33 }

34 #contentright

35 {

36 width：170px；

37 }

38 #bottom

39 {

40 width：100%；

41 height：60px；

42 }

43 ＜/style＞

【代码解析】代码20.8设置了层布局，各层在网页中，CSS只是对其宽度和高度约束了，其他的并没有设置，所表现的为层的宽度不同方式的设置，体现出层与层之间的布局，效果如图20.8所示。

图　20.8　设置各层尺寸