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

“化学多媒体”课程系列课件之 “HTML+CSS基础（中级）” 厚朴前端设计组郭娟 2013.10.24

目录 1. HTML语义化 2. 盒模型 3. 定位 4. 浮动 5. 兼容性 6. 兼容性测试

1. HTML语义化

什么是语义化？ • 指用合理HTML标记以及其特有的属性去格式化文档内容。 • 如何理解？机器是通过代码来解读页面的，语义化就是通过合理使用HTML标记来帮助机器读懂页面内容。例如机器会理解p为一个段落,table为一个表格。

如何语义化？ • 合理使用HTML标签。很多HTML标签有自身含义，编辑页面时应根据每个标签的含义合理使用。如使用p标签表示一个段落，使用table标签表示一个表格。

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

如何语义化？ • 类名、ID名命名语义化大多数网页的框架基本相同，例如首页一般有banner、导航条、slider、文章列表等。在命名时，通常会遵循一定规则。如头部一般命名为header，内容区一般命名为content，侧边栏一般命名为sidebar。常见CSS命名规则，可参考文章web标准化设计：常用的CSS命名规则

语义化的优势 • 去掉或样式丢失的时候能让页面呈现清晰的结构 HTML本身是没有表现的。但浏览器赋予了各个标签默认的CSS样式，例如h1~h6文字默认会加粗显示。所以HTML语义化后，即使去掉定义的CSS样式，也可以让页面呈现清晰的结构，增强页面的可读性。

语义化的优势 • 对搜索引擎友好搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重。 • 无障碍屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。　 • 便于团队开发和维护

2. CSS盒模型

标准盒模型

Content • 盒模型的中心，为盒模型的必备组成部分。 • 呈现盒子的主要信息。 • 主要有三个属性：width、height、overflow 高度与宽度可使用具体长度值定义，也可使用百分值定义。 overflow属性有四个值：hidden（超出内容区域部分将不可见）、visible（超出内容区域部分可见）、scroll（当内容超出时，将自动添加滚动条）、auto（由浏览器决定如何处理）。

Padding • 填充为内容与边框（border）之间的空间。 • 具有五个属性：padding、padding-left、padding-reight、padding-top、padding-bottom。 • 对盒子背景色属性的设置可以使填充部分呈现相应的颜色。

Border • 内容与填充的边界。 • 具有四个属性：border、border-style、border-width和border-color。 • 非必备组成，如不指定，就不存在边框样式。 • 当未声明 padding或border时，其值或为零(使用 css reset 时)，或为浏览器的默认值(一般不为零，尤其是那些通常没有重置的表单元素)。

Margin • 添加在边框外面的空间 • 属性：margin、margin-top、margin-bottom、margin- left、margin-right。 • 边界属性可指定负值，盒子将向指定负值方向的相反方向移动，如margin-right:-5px;将使盒子向左边移动5像素距离，使右边距增加了5像素。 • 邻近部分的边界不是二者边界的相加，而是二者的重叠，若二者邻近的边界值大小不等，则取二者中较大的值。

盒子大小计算 • 实际宽度=width + padding-left + padding-right + border-left + border-right • 实际高度=height + padding-top + padding-bottom + border-top + border-bottom

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

块级盒的默认宽度 现在将宽度定义为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> 如<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%（最近的相对定位的父元素或者浏览器窗口），然后就会折行。

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

3. 定位

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

定位基本属性 • 使用position属性对元素进行定位： position属性值：static | absolute | fixed | relative初始值：static运用范围：所有元素继承值：无计算值：根据指定确定

定位基本属性 • static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 • relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

在HTML中，根元素的包含块就是html元素。 • 如果定位的元素其position值是relative或static，包含块则由最近的块级框、表单表格或者行内块级祖先元素的内容边界组成。 • 对于相对定位的元素，其margin值仍然起作用，并且向父元素的内边距靠齐。 • 一个非根元素，如果是绝对定位，则它的包含块设置为离它最近的position值不是static的祖先元素定位元素的包含块

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

相对定位无论是否移动，元素依然占据原来的空间；相对定位无论是否移动，元素依然占据原来的空间； • 绝对定位不占据空间。 • IE中如果相对于右（right）和底部（bottom）设置绝对定位，需要确定相对定位的框已经设置了尺寸。相对定位与绝对定位

4. 浮动

定义与用法 • float 属性定义元素在哪个方向浮动。 • 在 CSS 中，任何元素都可以浮动。 • 浮动元素会生成一个块级框，而不论它本身是何种元素。 • 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

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

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

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

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

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

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

清除浮动 • 浮动带来的弊端 • 背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。 • 边框不能撑开如上图中，如果父级设置了CSS边框属性（cssborder），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。 • margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

清除浮动 • 方法一：使用空标签清除浮动在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动，并为其定义CSS代码：clear:both。空标签可以是div，也可以是p等，原则上任何标签都可使用，但建议使用div。

清除浮动 <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>

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

清除浮动 <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>

5. 兼容性

常见兼容性问题 • div的垂直居中问题： vertical-align:middle;将行距增加到和整个DIV一样高： line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。 • 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*/}

常见兼容性问题 • 浮动ie产生的双倍距离#box{ float:left; width:100px; margin:0 0 0 100px; /*这种情况之下IE会产生200px的距离, */ display:inline; /*使浮动忽略*/} • IE6下图片有空隙当块状元素中只包含img元素时，图片下方会产生2px空隙。可通过设置img为display:block或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决。······IE6的兼容性问题较多，有兴趣者可上网查询。

6. 兼容性测试

兼容性测试 • 兼容性测试分为两类： • 浏览器兼容测试即测试网页在各浏览器的各版本表现是否相同（通常其表现不会完全一致），以及是否有bug； • 分辨率测试即测试网页在不同分辨率的显示器上表现是否相同。

浏览器兼容测试 • 浏览器的种类很多，而各浏览器内核的差异导致在处理同一个页面时，表现和行为会不同。 • 使一个页面在所有浏览器中表现完全一致是不现实的，因此一般考虑几大主流浏览器。 • 目前几大主流浏览器分别为：IE、火狐、谷歌、Safari、Opera

浏览器兼容测试 • 常见浏览器兼容性测试工具：IETester、Superpreview、 Spoon Browser Sandbox 想了解更多关于浏览器兼容性测试的内容，可查看关于浏览器兼容性测试标准、流程、工具

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