通过上一章的学习，读者了解到了css强大的表现控制功能，特别是在布局方面有很大的优势。相对于**条理混乱、样式杂糅在结构中的**布局，css将带来全新的布局方法，让网页设计师更轻松、更自由。本章通过多个示例展示css布局网页的方法，并对css的“盒模型”作详细阐述。
相信读者在深入理解“盒模型”后，布局网页、定位css网页元素将更加自如。
11.1 什么叫“div+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标签是一个没有任何特性的容器而已。在d:
\web\目录下创建网页文件（xhtml1.0），命名为编写文件**如**11.1所示。
**11.1 默认的div标签：
我是第1个div标签中的内容。
我是第2个div标签中的内容。
我是第3个div标签中的内容。
在浏览器地址栏输入http://localhost/浏览效果如图11.1所示。
没有css的帮助下，div标签没有任何特别之处，只是无论怎么调整浏览器窗口，每个div标签占据一行。即默认情况下，一行只能容纳一个div标签。为了再次证明一行只能容纳一个div标签，笔者对div通过id选择符加入css**，使div拥有背景色以及宽度，修改如**11.
2所示。
**11.2 设置背景的div标签：
第1个div标签中的内容。
第2个div标签中的内容。
第3个div标签中的内容。
在浏览器地址栏输入http://localhost/浏览效果如图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_编写div_文件**如**11.3所示。
**11.3 设置div样式：div_
这是固定尺寸的宽度和高度。
这是自适应尺寸的宽度和高度。
为了更方便看到div的表现，笔者给2个div都设置了浅灰色背景色和黑色边框，在浏览器地址栏输入http://localhost/div_浏览效果如图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_的css部分加入如**11.
4所示的**。
**11.4 设置div样式：div_
html,body
为了考虑多种浏览器的兼容性，html和body同时设置100%宽度。在浏览器地址栏输入http://localhost/div_浏览效果如图11.4所示。
调整浏览器高度后，第2个div的高度随之变化。各种浏览器对xhtml和css的解析方式有差异，在后面将详细讨论解决办法，以解决浏览器的兼容性问题。
典型应用电路实例详解
电路26 12v供电的电子节能灯。本设计采用12v蓄电池供电，可点亮节能灯，在无市电或停电的场合非常实用。一 电路工作原理。电路原理如图26所示。图 26 12v供电电子节能灯电路原理图。图中ic是cmos反相器，其内部非门 与r1和c1组成频率为15khz的方波发生器。经ic内部非门3缓冲后，送入...
典型应用电路实例详解
电路24 家用简易闪烁壁灯控制器。现代家庭使用装饰性壁灯越来越普遍，但一般市售的壁灯都不会闪烁，本文所介绍的电路制作容易，用来改造一种市售的双头壁灯，可使两灯轮流发光 用于生日 节日 婚礼等喜庆场合，可增不少乐趣。一 电路工作原理。电路原理如图24所示。d1 d2 r1 c3组成简易电阻降压半波整流...
护理安全实例
案例一。某日，由于一病人心率快 145次 分 医生开出医嘱5 gs20ml 西地兰0.4mg静脉推注，某低年资 执行准备药物操作时取出了4支西地兰 西地兰剂量0.4mg 支 欲加药，所幸当时旁边有一老 正在摆药 准备第二天药物 看到4支西地兰感到很疑惑，遂问该 医嘱剂量多少，该 经仔细查对后才发现多...