初学者简单学习CSS网页布局

【 tulaoshi.com - Web开发 】

通过上一章的学习，读者了解到了CSS强大的表现控制功能，特别是在布局方面有很大的优势。相对于代码条理混乱、样式杂糅在结构中的表格布局，CSS将带来全新的布局方法，让网页设计师更轻松、更自由。本章通过多个示例展示CSS布局网页的方法，并对CSS的盒模型作详细阐述。相信读者在深入理解盒模型后，布局网页、定位CSS网页元素将更加自如。

上一章学习了Web标准的概念以及XHTML和CSS的基本知识。XHTML主要用div标签进行网页的布局，而控制布局的工具是CSS代码，以使网页符合Web标准。所以很多网页设计师把这种布局方法的网页叫做Div+CSS网页。其实这是不太准确的说法，因为Web标准不太被行外人士所熟识，导致Div+CSS的概念取代了Web标准。Web标准不仅仅指用div标签布局（有时候也用其他标签布局），其含义非常广，需要代码编写良好的结构，有良好的语义以及可读性等。

所以Div+CSS制作的网页不一定符合Web标准，而符合Web标准的网页不一定完全由div标签布局。

 11.1.1  初识div

div标签在Web标准的网页中使用非常频繁，那么，相对于其他HTML继承而来的元素，div有什么特别之处呢？答案可能令读者失望，div标签什么特性也没有，一定要说其特性，不过是一种块状元素。正因为div没有任何特性，所以更容易被CSS代码控制样式。

div标签是双标签，即以div/div的形式存在，其间可以放置任何内容，包括其他的div标签。也就是说，div标签是一个没有任何特性的容器而已。在D:web目录下创建网页文件（XHTML1.0），命名为div.htm，编写div.htm文件代码如代码11.1所示。

代码11.1  默认的div标签：div.htm

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html xmlns="http://www.w3.org/1999/xhtml"

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title初识div标签/title

/head

body

div我是第1个div标签中的内容/div

div我是第2个div标签中的内容/div

div我是第3个div标签中的内容/div

/body

/html

在浏览器地址栏输入http://localhost/div.htm，浏览效果如图11.1所示。没有CSS的帮助下，div标签没有任何特别之处，只是无论怎么调整浏览器窗口，每个div标签占据一行。即默认情况下，一行只能容纳一个div标签。为了再次证明一行只能容纳一个div标签，笔者对div通过id选择符加入CSS代码，使div拥有背景色以及宽度，修改div.htm如代码11.2所示。

代码11.2  设置背景的div标签：div.htm

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html xmlns="http://www.w3.org/1999/xhtml"

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title初识div标签/title

style type="text/css"

    #top,#bt{background-color:#eee;

         }

    #mid{background-color:#999;

         width:250px;

         }

    #bt{width:120px;}

/style

/head

body

div id="top"第1个div标签中的内容/div

div id="mid"第2个div标签中的内容/div

div id="bt"第3个div标签中的内容/div

/body

/html

在浏览器地址栏输入http://localhost/div.htm，浏览效果如图11.2所示。

             图11.1  默认的div标签                      图11.2  设置背景的div标签

通过背景色的设置，可以从图11.2中看到div标签默认占据一行，宽度也为一行的宽度。通过宽度的设置可以发现，并不是因为div的宽度为一行导致无法容纳后面的div标签。无论宽度多小，一行始终只有一个div标签，读者须谨记。

div标签作为网页CSS布局的主力元素，其优势已经非常明显。相对于表格布局，div更加灵活，因为div只是一个没有任何特性的容器，CSS可以非常灵活地对其进行控制，组成网页的每一块区域。在大多数情况下，仅仅通过div标签和CSS的配合即可完成页面的布局，也难怪很多人称Web标准页为Div+CSS网页了。

 11.1.2  XHTML中的块状元素和内联元素

上一节提到了XHTML的布局核心标签是div，并且div属于XHTML中的块级元素。XHTML的标签默认为2种元素。

（1）块状元素。该元素是矩形的，有自己的高度和宽度。默认情况下，在父容器中占据一行，同一行无法容纳其他元素及文本。其他的元素将显示在其下一行，可以看做被块级元素挤下去的。块状元素就是一个矩形容器，边缘非常硬，CSS设置了高度和宽度后，形状无法被改变。

（2）内联元素。和块级元素相反，内联元素没有固定形状，也无法设置宽度和高度。内联元素形状由其内含的内容决定，所以在宽度足够的情况下，一行能容纳多个内联元素。有人说相对于块状元素是一个硬盒子，内联元素就是一个软软的布袋子（形状由内容决定）。

块状元素适合于大块的区域排版，所以常用来布局页面。而内联元素适合于局部元素的样式设置，所以常用于局部的文字样式设置。

 11.1.3  div元素的样式设置

读者要使用div元素进行网页布局，首先须学会使用CSS灵活地设置div元素的样式。本节就几个常用的示例学习div元素的多种样式设置，使读者快速理解div元素。作为单个div元素，width属性用于设置其宽度，height属性设置其高度。由于网页大多数用于计算机显示屏幕作媒介，所以常用像素作为固定尺寸的单位，即px。

  注意：在HTML元素中设置样式不需要填写单位，默认为像素。

当单位为百分比时，div元素的宽度和高度为自适应状态，即宽度和高度适应浏览器窗口尺寸而变化。在D:web目录下创建网页文件（XHTML1.0），命名为div_2.htm，编写div_2.htm文件代码如代码11.3所示。

代码11.3  设置div样式：div_2.htm

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html xmlns="http://www.w3.org/1999/xhtml"

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title设置div样式/title

style type="text/css"

#fst {

    background-color: #eee;

    border:1px solid #000;

    width:300px;

    height:200px;

}

#sec {

    background-color: #eee;

    border:1px solid #000;

    width:50%;

    height:25%;

}

/style/head

body

div id="fst"这是固定尺寸的宽度和高度/div

hr /

div id="sec"这是自适应尺寸的宽度和高度/div

/body

/html

为了更方便看到div的表现，笔者给2个div都设置了浅灰色背景色和黑色边框，在浏览器地址栏输入http://localhost/div_2.htm，浏览效果如图11.3所示。

图11.3  设置div样式

很明显，第1个div宽度和高度固定，形成了一个坚硬的盒子。而第2个div由于设置其宽度为50%，其宽度随着浏览器的宽度变化而变化。但是问题出现了，第2个div的高度虽然设置为25%，按理说其高度应该随着浏览器的高度变化而变化。然而在示例中div高度仅和文本高度相当，好像高度设置没有起作用。

其实设置高度自适应有一个前提，div的高度自适应是相对于父容器的高度，本例中div父容器为body或者html（不同浏览器解析方式不同）。body或者html在本例中没有设置高度，div的高度自适应没有参照物，也就无法生效。

接下来在CSS中设置body和html的高度，就可解决div的高度自适应问题。body和html的高度直接设置为100%即可，不会对页面有任何影响。在div_2.htmd的CSS部分加入如代码11.4所示的代码。

代码11.4  设置div样式：div_2.htm

html,body{height:100%;}         

为了考虑多种浏览器的兼容性，html和body同时设置100%宽度。在浏览器地址栏输入http://localhost/div_2.htm，浏览效果如图11.4所示。

调整浏览器高度后，第2个div的高度随之变化。各种浏览器对XHTML和CSS的解析方式有差异，在后面将详细讨论解决办法，以解决浏览器的兼容性问题。

图11.4  设置div标签高度自适应

 11.1.4  布局页面的宽度

由于浏览者的显示分辨率不同，浏览者常见显示分辨率（单位：像素）为800×600、1024×768、1280×1024、1440×960等。所以在布局页面时，要充分考虑页面内容的布局宽度，一旦内容宽度超过显示宽度，页面将出现水平滚动条。

  说明：尽量保证网页只有垂直滚动条，才符合浏览者的习惯，所以高度不需要考虑，由页面内容决定网页高度。

页面布局宽度一般考虑最小显示分辨率的浏览用户，即过去浏览用户的显示分辨率最小为800×600（15寸CRT显示器），其最小宽度为800像素。浏览器的边框及滚动条部分约占24像素左右，所以布局宽度为分辨率的水平像素减去24像素。所以过去网页布局宽度一般为778像素，再宽就会使页面产生水平滚动条。

由于计算机设备的飞速发展，现在使用800×600显示分辨率的用户很少了，现在页面布局宽度最大不超过1002 ~1003像素（考虑到最小宽度1024像素，即1024×768显示分辨率）。

 11.1.5  布局页面水平居中

为了适应不同浏览用户的分辨率，网页设计师要始终保证页面整体内容在页面居中。使用HTML表格布局页面时，只需要设置布局表格的align属性为center即可。而div居中没有属性可以设置，只能通过CSS控制其位置。

在布局页面前，网页制作者一定要把页面的默认边距清除。为了方便操作，常用的方法是使用通配选择符*，将所有对象的边距清除，即margin属性和padding属性。margin属性代表对象的外边距（上、下、左、右），padding属性代表对象的内边距，也叫填充（上、下、左、右）。

  说明：margin属性和padding属性类似于表格单元格的cellspacing属性和cellpadding属性，不过margin属性和padding属性作用于所有块状元素。

使div元素水平居中的方法有多种，常用的方法是用CSS设置div的左右边距，即margin-left属性和margin-right属性。当设置div左外边距和右外边距的值为auto，即自动时，左外边距和右外边距将相等，即达到了div水平居中的效果。在D:web目录下创建网页文件（XHTML1.0），命名为div_align.htm，编写div_align.htm文件代码如代码11.5所示。

代码11.5  设置div水平居中：div_align.htm

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html xmlns="http://www.w3.org/1999/xhtml"

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title设置div水平居中/title

style type="text/css"

*{margin:0px;

 padding:0px;

 }

#all{width:75%;

   height:200px;

   background-color:#eee;

   border:1px solid #000;

   margin-left:auto;

   margin-right:auto;

   }

/style

/head

body

   div id="all"布局页面内容/div

/body

/html

为了更方便看到div的表现，笔者给div设置了浅灰色背景色和黑色边框，在浏览器地址栏输入http://localhost/div_align.htm，浏览效果如图11.5所示。

是不是很简单？设置外边距的CSS代码可以进一步简化，使用margin属性，编写方法为：

margin:0px auto;

图11.5  设置div水平居中

margin属性值前面的0代表上边距和下边距为0像素，auto代表左边距和右边距为auto，即自动设置。读者注意，0px和auto之间使用空格符号分隔，而不是逗号。还有一种方法是使用html或body的text-align属性，设置其值为center，即所有对象将居中。这样将导致页面文本居中，所以不作推荐，其编写方法为：

html,body{text-align:center;}