“ 化学多媒体”课程系列课件之 “ HTML+CSS 基础（中级）”

厚朴前端设计组 郭娟

2013.10.24

目录1. HTML 语义化

2. 盒模型

3. 定位

4. 浮动

5. 兼容性

6. 兼容性测试

1. HTML 语义化

1

2

指用合理 HTML 标记以及其特有的属性去格式化文档内容。

如何理解？机器是通过代码来解读页面的，语义化就是通过合

理使用 HTML 标记来帮助机器读懂页面内容。例如机器会理解 p 为一个段落 ,table 为一个表格。

　　

什么是语义化？

3

合理使用 HTML 标签。很多 HTML 标签有自身含义，编辑页面时应根据

每个标签的含义合理使用。　　如使用 p 标签表示一个段落，使用 table 标签表示一个表格。

如何语义化？

4

类名、 ID 名命名语义化大多数网页的框架基本相同，例如首页一般有banner 、导航条、 slider 、文章列表等。

如何语义化？

5

类名、 ID 名命名语义化大多数网页的框架基本相同，例如首页一般有

banner 、导航条、 slider 、文章列表等。在命名时，通常会遵循一定规则。如头部一般命名为 header ，内

容区一般命名为 content ，侧边栏一般命名为sidebar 。

常见 CSS 命名规则，可参考文章 web

标准化设计：常用的CSS命名规则

如何语义化？

6

去掉或样式丢失的时候能让页面呈现清晰的结构HTML 本身是没有表现的。但浏览器赋予了各

个标签默认的 CSS 样式，例如 h1~h6 文字默认会加粗显示。所以 HTML 语义化后，即使去掉定义的 CSS

样式，也可以让页面呈现清晰的结构，增强页面的可读性。

语义化的优势

7

对搜索引擎友好搜索引擎的爬虫依赖于标记来确定上下文和各

个关键字的权重。 无障碍

屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。　

便于团队开发和维护

语义化的优势

2. CSS 盒模型

8

9

标准盒模型

10

盒模型的中心，为盒模型的必备组成部分。 呈现盒子的主要信息。 主要有三个属性： width 、 height 、 overflow

高度与宽度可使用具体长度值定义，也可使用百分值定义。

overflow 属性有四个值： hidden （超出内容区域部分将不可见）、 visible （超出内容区域部分可见）、 scroll （当内容超出时，将自动添加滚动条）、auto （由浏览器决定如何处理）。

Content

11

填充为内容与边框（ border ）之间的空间。 具有五个属性： padding 、 padding-

left 、 padding-reight 、 padding-

top 、 padding-bottom 。 对盒子背景色属性的设置可以使填充部分呈现相应的

颜色。

Padding

12

内容与填充的边界。 具有四个属性： border 、 border-

style 、 border-width 和 border-color 。 非必备组成，如不指定，就不存在边框样式。 当未声明 padding 或 border 时，其值或为零

( 使用 css reset 时 ) ，或为浏览器的默认值( 一般不为零，尤其是那些通常没有重置的表单元素 ) 。

Border

13

添加在边框外面的空间 属性： margin 、 margin-top 、 margin-

bottom 、 margin- left 、 margin-right 。 边界属性可指定负值，盒子将向指定负值方向的相

反方向移动，如 margin-right:-5px; 将使盒子向左

边移动 5 像素距离，使右边距增加了 5 像素。 邻近部分的边界不是二者边界的相加，而是二者的重

叠，若二者邻近的边界值大小不等，则取二者中较大的值。

Margin

14

实际宽度 =width + padding-left + padding-right

+ border-left + border-right

实际高度 =height + padding-top + padding-

bottom + border-top + border-bottom

盒子大小计算

15

如果没有声明宽度，而且盒子是静态或者相对定位，那么宽度将保持 100% 且 padding 和 border 将向内推动而不是向外扩展。如果声明宽度为 100% ，那么padding 会向外扩展。

块级盒的默认宽度

16

如 <style type="text/css">

.div0{width:200px;height:30px;background:blue;}

.div1{height:20px;padding-right:10px;background:red;}

</style>

<div class="div0">

<div class="div1"> 静态定位，未声明宽度。 </div>

</div>

这段代码在浏览器中的显示效果是这样的

现在将宽度定义为 100%

如 <style type="text/css">

.div0{width:200px;height:30px;background:blue;}

.div1{width:100%;height:20px;padding-

right:10px;background:red;}

</style>

<div class="div0">

<div class=“div1”> 静态定位，宽度为 100% 。 </div>

</div>

在浏览器中的显示效果将变成这样

块级盒的默认宽度

17

未设定宽度的绝对定位的盒子：其宽度只需要适合它们所包含的内容即可。因此，如果盒中只有一个单词，盒子就会像那个词的表现一样宽。如果变成两个词，盒子的宽度也会相应增加这种情况会持续到盒子的宽度达到父元素宽度的 100% （最近的相对定位的父元素或者浏览器窗口），然后就会折行。

块级盒的默认宽度

18

无宽度浮动盒子 ：盒子的宽度只需要扩展到所包含内容的宽度，直到其父元素的宽。同无宽度的绝对定位盒子相同。

块级盒的默认宽度

3. 定位

19

20

利用定位，可以准确的定义元素框对于其正常位置应该出现在哪里，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

定位的原理

21

使用 position 属性对元素进行定位：

position 属性值： static | absolute | fixed | relative初始值： static运用范围：所有元素继承值：无计算值：根据指定确定

定位基本属性

22

static ：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative ：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

定位基本属性

23

在 HTML 中，根元素的包含块就是 html 元素。

如果定位的元素其 position 值是 relative 或static ，包含块则由最近的块级框、表单表格或者行内块级祖先元素的内容边界组成。

对于相对定位的元素，其 margin 值仍然起作用，并且向父元素的内边距靠齐。

一个非根元素，如果是绝对定位，则它的包含块设置为离它最近的 position 值不是 static 的祖先元素

定位元素的包含块

24

当行内元素做相对定位时，作为行内元素处理；

当行内元素做绝对定位时，作为块状元素处理（可设置宽高）。

行内元素定位

25

相对定位无论是否移动，元素依然占据原来的空间；

绝对定位不占据空间。

IE 中如果相对于右（ right ）和底部（ bottom ）设置绝对定位，需要确定相对定位的框已经设置了尺寸。

相对定位与绝对定位

26

4. 浮动

27

float 属性定义元素在哪个方向浮动。

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

定义与用法

28

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。如下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

特点

29

浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2 ，使框 2 从视图中消失。

特点

30

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

特点

31

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。

特点

32

如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

特点

33

为什么要清除浮动？如下图中，两个灰色盒子本来应该在黄色盒子中的，但由于两个盒子都添加了浮动属性，不再处于文档流中，所以它不占据空间，因此黄色盒子无法获取其正确的高度。这会使得黄色盒子后面的元素受到影响。

清除浮动

34

浮动带来的弊端1. 背景不能显示

由于浮动产生，如果对父级设置了（ CSS background 背景） CSS 背景颜色或 CSS 背景图片，而父级不能被撑开，所以导致 CSS 背景不能显示。

2. 边框不能撑开如上图中，如果父级设置了 CSS 边框属性（ css border ），由于子级里使用了 float 属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3. margin padding 设置值不能正确显示由于浮动导致父级子级之间设置了 css padding 、 css margin 属性的值不能正确表达。特别是上下边的 padding 和 margin 不能正确显示。

清除浮动

35

方法一：使用空标签清除浮动

在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动，并为其定义 CSS代码：clear:both 。

空标签可以是 div ，也可以是 p 等，原则上任何标签都可使用，但建议使用 div 。

清除浮动

36

<style type="text/css">.wrapper{width:250px;background:yellow;}.left,.right{width:80px;height:50px;margin:10px;background:red;border:solid 1px #000;} 　 .left{float:left;} 　 .right{float:right;}.clear{clear:both;}</style>

<div class="wrapper">　 <div class="left">Left</div>　 <div class="right">Right</div> <div class="clear"></div></div>

清除浮动

37

方法一：使用 overflow 属性

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义 CSS 属性：overflow:auto ，即可！” zoom:1″ 用于兼容IE6 。

清除浮动

38

<style type="text/css">.wrapper{width:250px;background:yellow;overflow:hidden;zoom:1;}.left,.right{width:80px;height:50px;margin:10px;background:red;border:solid 1px #000;} 　 .left{float:left;} 　 .right{float:right;}</style>

<div class="wrapper">　 <div class="left">Left</div>　 <div class="right">Right</div></div>

清除浮动

39

5. 兼容性

40

1. div 的垂直居中问题： vertical-align:middle;将行距增加到和整个 DIV 一样高： line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 。

2. margin 加倍的问题设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个 ie6都存在的 bug 。解决方案：在这个 div里面加上 display:inline;例如： <div id="imfloat"> 相应的 css 为 #imfloat{ float:left; margin:5px;/*IE 下理解为10px*/ display:inline;/*IE 下再理解为 5px*/}

常见兼容性问题

41

3. 浮动 ie产生的双倍距离#box{ float:left; width:100px; margin:0 0 0 100px; /* 这种情况之下 IE 会产生 200px 的距离 , */ display:inline; /* 使浮动忽略 */}

4. IE6 下图片有空隙当块状元素中只包含 img 元素时，图片下方会产生 2px 空隙。可通过设置 img 为 display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决。

······

IE6 的兼容性问题较多，有兴趣者可上网查询。

常见兼容性问题

42

6. 兼容性测试

43

兼容性测试分为两类：1. 浏览器兼容测试

即测试网页在各浏览器的各版本表现是否相同（通常其表现不会完全一致），以及是否有 bug；

2. 分辨率测试即测试网页在不同分辨率的显示器上表现是否相同。

兼容性测试

44

浏览器的种类很多，而各浏览器内核的差异导致在处理同一个页面时，表现和行为会不同。

使一个页面在所有浏览器中表现完全一致是不现实的，因此一般考虑几大主流浏览器。

目前几大主流浏览器分别为：IE 、火狐、谷歌、 Safari 、 Opera

浏览器兼容测试

45

常见浏览器兼容性测试工具：

IETester 、 Superpreview 、 Spoon Browser

Sandbox

想了解更多关于浏览器兼容性测试的内容，可查看

关于浏览器兼容性测试标准、流程、工具

浏览器兼容测试