使用HTML和CSS开发Web网站（三）

七、WEB标准与页面布局基础

1、网站重构与WEB标准

1.1、网站重构

把“未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点”变成“让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。”的过程就是网站重构 。

1.2、WEB标准

• 网页主要由三个部分构成：结构（Structure）、表现（Presentation）和行为（Behavior）。它们都有各自的标准。
• 结构
• 结构是指一个网页有哪些内容以及这些内容如何被清晰地组织在一起。
• 网页结构的标准主要是XML语言和XHTML语言。
• 表现
• 表现是指一个网页的内容以何种样式来展现。
• 网页表现的标准是CSS语言。
• 行为
• 行为是指一个网页及其所它包含的网页元素以及它所属的浏览器窗口如何与用户交互。
• 网页行为由JavaScript脚本语言来实现。

2、XHTML

1. XHTML是HTML的替代者，它是从HTML继承而来，但使用了XML的规则进行严格规范。
2. XHTML与传统的HTML的不同之处，主要来自于XML语法规范的格式要求，即要求“格式良好”。

• 必须有且仅能有一个根元素

• 标签必须正确地嵌套

• 标签必须关闭 标签名和属性名必须使用小写

• 属性必须赋值

• 属性值必须包含在引号内

• 特殊字符必须用实体编码来表示

• 图片必须有替代文字

• 注释的内容中不能包含”--”

3、DTD

XHTML文档的有效性

网页文档中可以使用的标签有哪些，标签有哪些可用的属性，属性可用哪些值，标签之间如何嵌套，特殊字符如何表示等等 。

XHTML文档的有效性通过DTD（Document Type Definition，文档类型定义）来定义和验证。

在文档第一行（标签开始之前）添加DOCTYPE即文档类型声明。

万维网联盟（W3C）为XHTML制定了三种DTD

过渡的(Transitional)

严格的(Strict)

框架集的(Frameset)

 

4、结构与表现分离

• CSS的出现，使得网页的结构与表现比较清晰地分离成为可能。
• 对于网页包含的数据内容，由HTML标签负责承载，同时，文档内众多标签的先后顺序和嵌套关系，也说明了这些数据内容的结构 。
• 对于网页中的每一个元素最终在浏览器中以何种样式来呈现，则由CSS的样式规则来负责定义。
• CSS样式规则一般编写在网页的头部中，这样可使得用来承载数据和描述结构的HTML代码与控制样式的CSS代码分离开来。如果需要二者更进一步地分离，则可将CSS样式规则转移到独立的外部样式表文件中。
• 网页的结构与表现分离，带来的好处 。

5、WEB标准与CSS实现网页布局

• 网页布局又可理解为网页排版。简单地说就是：网页中的某一块内容应该放置在网页的哪个位置，占用多大的面积。
• 大量使用表格实现页面布局，不符合WEB标准。
• 目前普遍采用CSS结合div标签来实现网页的布局。
• 将整个网页的所有内容分割成为相对独立的内容块，这些内容块分别用一个div标签来包裹，再使用CSS的属性分别设置这些内容块的位置和尺寸。这样整个页面的版式就受到了控制，从而实现了网页的布局。

6、CSS的盒状模型

• CSS的盒状模型（Box Model），是使用CSS实现网页布局 的基础。
• 页面中可放置内容的窗口元素称为盒子即Box ，盒子就是一个矩形区域。
• 每个盒子都有内容Content，内边距Padding，边框Border，外边距Margin。
• 盒状模型用于描述它们之间的层次，关系与相互的影响。  

margin：外边距

border：边框

padding：内边距，又称内补丁或间隙

content：内容

7、两种盒子

• 盒子还有块级盒子(block box)和内联盒子(inline box)之分。这两种盒子分别是块级元素与内联元素的默认盒状模型。
• 块级元素 div、table、form、fieldset、h1~h6、p、ol、ul、li、hr等。
• 内联元素 span、a、label、input、select、textarea、img、embed、br等。
• 块级元素显示为独立的一块（矩形区域），它的前后都会换行；
• 内联元素不会导致换行，它会和其他内联元素一起在一行内显示。
• 内联元素只能包含文本和其他内联元素；而块级元素则能包含内联元素和其他块级元素。 标准文档流

8、盒状模型的转换

• CSS属性display可以设置网页元素使用的盒状模型。

为块级元素的display属性赋值为inline，那么这个块级元素转变为内联元素；

为内联元素的display属性赋值为block，则这个内联元素转变为块级元素 。

9、外边距

• CSS 外边距属性用来设置一个元素所占空间的边缘到相邻元素之间的距离。使用margin属性来设置外边距。

属性	意义	取值
margin-top margin-right margin-bottom margin-left	设置元素的顶外边距。 设置元素的右外边距。 设置元素的底外边距。 设置元素的左外边距。	可使用像素单位的数字或百分比，也可使用auto。
margin	简写属性。在一个声明中设置外边距属性。	依次设置顶外边距、右外边距、底外边距、左外边距。

10、内边距

CSS 内边距属性是用来设置元素内容到元素边框的距离。使用padding属性来设置内边距。

属性	意义	取值
padding-top padding-right padding-bottom padding-left	设置元素的顶内边距。 设置元素的右内边距。 设置元素的底内边距。 设置元素的左内边距。	可使用像素单位的数字或百分比，也可使用auto。
padding	简写属性。作用是在一个声明中设置元素的内边距属性。	依次设置顶内边距、右内边距、底内边距、左内边距。

 

11、尺寸

• CSS 尺寸属性指的是 content 内容区域的宽和高。使用width和height属性来设置内容区域的宽度和高度。

属性	意义	取值
width	设置元素内容区域的宽度。	可使用px像素单位或%百分比。
height	设置元素内容区域的高度。	可使用px像素单位或%百分比。

 12、溢出

• CSS溢出属性指内容区域的尺寸不足以容纳元素的内容时，超出的部分如何处理。使用overflow属性来设置如何处理溢出的内容。

属性	意义	取值
overflow	设置当元素内容所需占用的区域超出内容区域时，如何处理。	默认visible，其他值可用auto 、scroll 、 hidden。

13、与定位相关的CSS属性 

定位方式

坐标

层叠顺序

对齐方式

13.1、定位方式和坐标

• position属性可以设置默认定位方式之外的其他三种方式。
• top、right、bottom、left用于设置定位坐标。

属性	意义	取值
position	设置元素的定位机制。	static，静态定位，默认值。定位于页面文档流给定的位置。 relative，相对定位。在页面文档流给定位置基础上进行偏移。 absolute，绝对定位。以父级元素作为参照，使用坐标进行绝对定位。 fixed，固定定位。固定在相对于浏览器窗口的指定位置，不随页面滚动而移动。
top right bottom left	设置元素的某边界相对于其包含块相应边界的偏移量。	默认为auto，可使用px像素或%百分比设定。

 

13.2、层叠顺序

• 网页中的多个内容块可能使用多种不同的定位方式，这可能导致它们在垂直于浏览器窗口（或文档正文区域）的方向上层叠起来，相互遮挡。使用z-index（Z轴索引）属性可以设置它们的层叠顺序。

属性	意义	取值
z-index	设置元素在垂直浏览器窗口方向上的层叠顺序。	使用数字设定，数字越大越靠近浏览者。为负数时，作为页面正文的背景显示。

 

13.3、对齐方式

• 对齐方式属性用于设置元素的内容在作为容器的元素内部的对齐方式，有水平方向的对齐方式和垂直方向的对齐方式。

属性	意义	取值
text-align	元素中文本的水平对齐。	可使用left、right、center、 justify。
vertical-align	设置行内元素在所在行上的垂直对齐方式，或用于设置单元格内容在单元格内的垂直对齐方式。	常用的值有：baseline、top middle、bottom、text-top、 text-bottom、super、sub。

1.  盒状模型中所谓的盒子如何构成？
2. 有哪两种盒子？分别包含哪些标签？
3. CSS中哪个属性可以改变HTML标签默认的盒状模型？
4. CSS中对元素的定位有哪几种方式？
5. 多个元素发生层叠时，如何让其中某个元素最容易让用户看到？
6. 垂直对齐方式有哪几种？
7. Web标准
8. 盒状模型
9. 定位

 八、CSS实现典型布局

1、浮动和清除浮动

• 浮动就是使元素脱离正常的文档流，让出它在文档流中本来占据的位置和空间，漂浮在文档流之上。
• 清除浮动就是禁止元素的某一侧或两侧出现浮动元素。

属性	意义	取值
float	设置元素在其父级元素中如何浮动。	可用的值有left 、right、none。
clear	设置元素的哪一侧或两侧不允许出现浮动元素。	可用的值有left 、right、both、none。

1.1、浮动

• 假定A元素设置了浮动，则根据它的前一个元素是否也设置了浮动分为两种情况。

如果前一个元素没有设置浮动仍然位于文档流中，那么A元素将在前一个元素的下方显示（A元素的顶边界与前一个元素的底边界平齐）；

如果前一个元素也设置了浮动而脱离了文档流，那么A元素将上浮到前一个元素同一行的后侧（靠近页面的边界为前，远离页面的边界为后。对于向左浮动，就是位于前一个元素的右边；对于向右浮动，就是位于前一个元素的左边。如果行内剩余的宽度无法容纳，则换到下一行）。

1.2、清除浮动clear

• 块级元素浮动之前，在标准流中，是从上到下竖向排列的，而浮动之后可以理解为从左到右或从右到左横向排列。
• 清除浮动可以理解为打破横向排列。

2、实现典型布局

一列式布局

• 一列式布局——宽度自适应

#divLayout{
	border:1px solid gray;
	width:75%;height:300px;
}

• 一列式布局——居中

1：
body{
	text-align:center;
}

2：
#divLayout{
	border:1px solid gray;
	width:75%;height:300px;
	margin:0px auto;
}

 

两列式布局

#divNav{
	border:1px solid gray;
	width:20%;height:320px;
	float:left;
}
#divContent{
	border:1px solid gray;
	width:75%;height:320px;
	float:left;
}

1. 两列式布局——右列宽度自适应
2. 两列式布局——右列宽度自适应

三列式布局

三列式布局——中间列宽度自适应

三行三列式布局

1. 浮动float的含义？
2. 清除浮动clear的含义
3. 怎样实现左右两列而且右列宽度自适应的布局？
4. 怎样实现左中右三列而且中间列宽度自适应的布局？
5. margin属性对于定位有什么作用？