精通CSS:高级WB标准解决方案 基础知识 并非只能导入到(XHM文档中。还可以从另一个样式表导入样式表。因此,可以从(X)HTML页面链接 基本样式表,然后将复杂的样式表导入这个样式表(见图1-4) template html Dasic css coboL.CsS 图1-4可以将多个样式表导入一个样式表,然后将这个样式表链接到HML页面中 @import url("csslayout css") @import url("css/typography css") @import url("css/color. css") 这可以降低(X)HML文档的复杂性,并且允许在一个位置管理所有样式表。导入规则需要放在样式表的 最前面,否则它们可能工作不正常。因为先考虑导入的样式表,然后再考虑链接的样式表,所以一定要记住 链接的样式表中的规则会覆盖导入的规则。 尽管从理论上说可以将样式表导入到本身也被导入的样式表中,但是对这种链式结构或多层嵌套的支持 不完善。因此,应该避免两层以上的嵌套导入。 现在使用 Netscape4的人已经非常少了,所以可能不需要太为这种浏览器操心。可以省去简单的链接 样式表,直接导入样式。但是 Windows的IE5/6有一种奇怪的特性,它会影响只使用导入规则的页面。当 装载受影响的页面时,在最终显示样式之前,页面暂时以无样式的形式显示。这个bug称为“ Flash of often t”(简称为FoUC)bug。在文档头中放一个1ink或 script元素可以避免这个bug,所以 即使不为支持 Netscape4操心,可能仍然需要链接基本的样式表,然后再从那里导入样式。 1.32对代码进行注释 在编写自己的样式表时,你可能很清楚它们的结构、曾经遇到的问题以及为什么采用某种方式。但是 如果六个月之后再来看这个样式表,你很可能已经忘了许多事情。另外,可能需要将自己的CSS交给其他人 去实现,或者其他开发人员以后需要编辑你的代码。因此,对代码进行注释是一种好做法。 在CSS中添加注释非常简单。CSS注释以/*开头,以*/结束。这种注释称为C网格的注释,因为C语言 中使用这种注释。注释可以是单行的,也可以是多行的,而且可以出现在代码中的任何地方。 /*Body Styles*/ body( font-size: 67. 5%: /*Set the font size*/ 1.添加结构性注释 在创建新的样式表时,我做的第一件事是在开头添加一个注释块,它描述这个样式表的用途、创建日期 或版本号、创建者以及如何与创建者联系: Basic Style Sheet (for version 4 browsers) version: 1.1 author: andy budd email: info@andybudd com 本书来源于互联网的一些图片,在转换的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请购买原版书。 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 还可以从另一个样式表导入样式表。因此，可以从(X)HTML 页面链接 基本 并非只能导入到(X)HTML 文档中。 样式表，然后将复杂的样式表导入这个样式表（见图 1-4）： 图 1-4 可以将多个样式表导入一个样式表，然后将这个样式表链接到 HTML 页面中 @impor 这可以降低(X)HTML 文档的复杂性，并且允许在一个位置管理所有样式表。导入规则需要放在样式表的 最前 也被导入的样式表中，但是对这种链式结构或多层嵌套的支持 不完 可能不需要太为这种浏览器操心。可以省去简单的链接 样式 3.2 对代码进行注释 你可能很清楚它们的结构、曾经遇到的问题以及为什么采用某种方式。但是， 如果 因为 C 语言 中使 67.5%;/*Set the font size*/ 1. 添加结构性注释 时，我做的第一件事是在开头添加一个注释块，它描述这个样式表的用途、创建日期 或版 ----- udd udd.com t url("css/layout.css"); @import url("css/typography.css"); @import url("css/color.css"); 面，否则它们可能工作不正常。因为先考虑导入的样式表，然后再考虑链接的样式表，所以一定要记住 链接的样式表中的规则会覆盖导入的规则。 尽管从理论上说可以将样式表导入到本身 善。因此，应该避免两层以上的嵌套导入。 现在使用 Netscape 4 的人已经非常少了，所以 表，直接导入样式。但是 Windows 的 IE 5/6 有一种奇怪的特性，它会影响只使用导入规则的页面。当 装载受影响的页面时，在最终显示样式之前，页面暂时以无样式的形式显示。这个 bug 称为“Flash of Unstyled Content”（简称为 FOUC）bug。在文档头中放一个 link 或 script 元素可以避免这个 bug，所以 即使不为支持 Netscape 4 操心，可能仍然需要链接基本的样式表，然后再从那里导入样式。 1. 在编写自己的样式表时， 六个月之后再来看这个样式表，你很可能已经忘了许多事情。另外，可能需要将自己的 CSS 交给其他人 去实现，或者其他开发人员以后需要编辑你的代码。因此，对代码进行注释是一种好做法。 在 CSS 中添加注释非常简单。CSS 注释以/*开头，以*/结束。这种注释称为 C 网格的注释， 用这种注释。注释可以是单行的，也可以是多行的，而且可以出现在代码中的任何地方。 /*Body Styles*/ body{ font-size: } 在创建新的样式表 本号、创建者以及如何与创建者联系： /*---------------------------------- Basic Style Sheet (for version 4 browsers) version: 1.1 author: andy b email: info@andyb 21
精通CSS:高级WB标准解决方案 基础知识 websitehttp://www.andybudd.com/ 这使其他开发人员能够了解这个文件的概况,了解它是否是最近编写的,如果有某些东西无法理解,他 们还可以与原来的作者联系。 然后,我将样式表分成几大块。我常常首先编写一般规则,比如版式、标题和链接。接下来,根据在文 档流中出现的次序处理页面的主要部分。这通常包括品牌部分、主要内容、次要内容、主导航、辅助导航和 页脚部分。最后,处理在整个站点上无规律地出现的一般元素。这常常包括框样式、表单样式和图形按钮。 与介绍性注释相似,我用风格统一的大注释块从视觉上分隔每个部分: /*Typography 并非所有东西都能够自然地分成定义明确的块,这需要开发人员进行判断。请记住,代码的分隔越细致 越合理,就越容易理解,而且能够更快地找到要寻找的规则。 如果CSS文件非常长,那么寻找特定的样式会很困难。一种改进方法是在每个注释头中添加一个标志。 这个标志仅仅是头文本前面的一个额外字符,这个字符一般不会出现在CSS文件中。搜索这个标志和注释头 中的前几个字母,就可以立即找到要寻找的文件部分。所以,在下面的示例中,搜索“=typ”就会立即找到 样式表中的版式部分 /*Typography 因为许多CSS文件可能具有相似的结构,可以创建一个预先加上注释的CSS模板供所有项目使用,从而 节省时间。还可以添加在所有站点上都使用的常用规则,形成某种原型CSS文件,这可以节省更多的时间。 这样的话,在开始新项目时就不必总是重复以前的工作。在本书的下载代码中可以找到一个原型CSS文件示 例 2.自我提示 有时候,可能需要用某种技巧解决某个问题。在这种情况下,最好记录这个问题、你使用的解决方案和 解释这个修复方法的URL(如果有的话) Use the star selector hack to give ie a different font size http://www.infocomph/etan/w3pantheon/style/starhtmlbug.html *html body font-size: 75%: 1 为了使注释更有意义,可以使用关键字来区分重要的注释。我使用T0D0来表示某些东西需要在以后进 行修改、修复或复查;用BUG表示代码或特定浏览器遇到的问题;用 KLUDGE表示并不完善的权宜之计: /*: TOGO: Remember to remove this rule before the site goes live*/ /=KLUDGE: I managed to fix this problem in ie by setting a small negative margin but it's not pretty*/ /* BUG Rule breaks in IE 5. 2 Mac*/ 还可以使用关键字 TRICKY提醒其他开发人员注意某些特别复杂的代码段。用编程的术语来说,这些关 键字称为意外特性( gotcha),它们对于以后的开发阶段非常有帮助。 3.删除注释和优化样式表 注释会使CSS文件显著加大。因此,你可能需要从样式表中去掉一些注释。许多H/CSS和文本编辑 器都有搜索并替换选项,因此很容易从代码中删除注释。另外,还可以使用几种在线CSS优化器之一(比如 ww.cssoptimiser.com/上提供的优化器)。优化器不但能够删除注释,还可以删除空白,这可以从代码中 去掉额外的字节 本书来源于互联网的一些图片,在转搀的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请买原版书。 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd .com/ -----*/ 是否是最近编写的，如果有某些东西无法理解，他 们还 块。我常常首先编写一般规则，比如版式、标题和链接。接下来，根据在文 档流 ------------------------------*/ 开发人员进行判断。请记住，代码的分隔越细致、 越合 改进方法是在每个注释头中添加一个标志。 这个 ------------------------------*/ 预先加上注释的 CSS 模板供所有项目使用，从而 节省 提示 在这种情况下，最好记录这个问题、你使用的解决方案和 解释 the star selector hack to give IE a different font size l website: http: //www.andybudd ------------------------------------ 这使其他开发人员能够了解这个文件的概况，了解它 可以与原来的作者联系。 然后，我将样式表分成几大 中出现的次序处理页面的主要部分。这通常包括品牌部分、主要内容、次要内容、主导航、辅助导航和 页脚部分。最后，处理在整个站点上无规律地出现的一般元素。这常常包括框样式、表单样式和图形按钮。 与介绍性注释相似，我用风格统一的大注释块从视觉上分隔每个部分： /*Typography -------------- 并非所有东西都能够自然地分成定义明确的块，这需要 理，就越容易理解，而且能够更快地找到要寻找的规则。 如果 CSS 文件非常长，那么寻找特定的样式会很困难。一种 标志仅仅是头文本前面的一个额外字符，这个字符一般不会出现在 CSS 文件中。搜索这个标志和注释头 中的前几个字母，就可以立即找到要寻找的文件部分。所以，在下面的示例中，搜索“=typ”就会立即找到 样式表中的版式部分： /*Typography -------------- 因为许多 CSS 文件可能具有相似的结构，可以创建一个 时间。还可以添加在所有站点上都使用的常用规则，形成某种原型 CSS 文件，这可以节省更多的时间。 这样的话，在开始新项目时就不必总是重复以前的工作。在本书的下载代码中可以找到一个原型 CSS 文件示 例。 2. 自我 有时候，可能需要用某种技巧解决某个问题。 这个修复方法的 URL（如果有的话）： /* Use http: //www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.htm l body{ font-size: 75%;} 用关键字来区分重要的注释。我使用 TODO 来表示某些东西需要在以后进 行修 ative margin but it’s not breaks in IE 5.2 Mac*/ 员注意某些特别复杂的代码段。用编程的术语来说，这些关 键字 大。因此，你可能需要从样式表中去掉一些注释。许多 HTML/CSS 和文本编辑 器都 */ *htm 为了使注释更有意义，可以使 改、修复或复查；用 BUG 表示代码或特定浏览器遇到的问题；用 KLUDGE 表示并不完善的权宜之计： /*: TOGO: Remember to remove this rule before the site goes live*/ /*KLUDGE: I managed to fix this problem in IE by setting a small neg pretty*/ /*: BUG Rule 还可以使用关键字 TRICKY 提醒其他开发人 称为意外特性（gotcha），它们对于以后的开发阶段非常有帮助。 3. 删除注释和优化样式表 注释会使 CSS 文件显著加 有搜索并替换选项，因此很容易从代码中删除注释。另外，还可以使用几种在线 CSS 优化器之一（比如 www.cssoptimiser.com/上提供的优化器）。优化器不但能够删除注释，还可以删除空白，这可以从代码中 去掉额外的字节。 22
精通CSS:高级WB标准解决方案 第一章基础知识 有些人尝试以PP格式编写注释,然后将样式表用做PHP。样式表被发送给PHP解析器,解析器去掉所 有注释,然后将样式表发送给浏览器。这需要在一个. htaccess文件中设置CSS文件的MIME类型 addtypeapplication/x-httpd-php.css 但是,需要确保CSS文件被缓存,否则这种方法会减慢而不是提高站点的速度。这可以使用PHP来实现, 但是比较复杂。因此,除非对要做的事情有把握,否则最好避兔这么做。 最好的方法可能是启用服务器端压缩。如果使用 Apache服务器,那么应该安装 mod gzip或 mod deflate 许多现代浏览器可以处理用GZIP压缩的文件并进行即时解压。这些 Apache模块探测浏览器是否能够处理这 种文件,如果可以,就发送压缩的版本。服务器端压缩能够将(X)HM和CSS文件减小大约80%,这可以减 少对带宽的占用,大大加快页面的下载速度。如果无法使用这些 Apache模块,那么仍然可以按照httr /tinyurl.com/8w9rp上的教程的说明对文件进行压缩。 1.3.3样式指南 大多数Web站点有多个开发人员,而大型站点甚至有多个团队负责处理站点的不同方面。程序员、内容 管理员和其他前端开发人员可能需要了解代码的元素和设计是如何工作的。因此,建立样式指南是一种非常 好的做法。 样式指南是一个文档、网页或小型站点,它们解释代码和站点的视觉设计是如何组合在一起的。好的样 式指南应该首先概述站点结构、文件结构和命名约定。它应该详细描述编码标准,设计人员、开发人员和内 容编辑人员需要遵守这些标准,从而保持站点的质量。这包括使用的Ⅺ HTML/CSS版本、选择的可访问性级 浏览器支持细节和一般的编码最佳实践。样式指南应该详细描述布局和样式元素,比如各个元素的尺寸、隔 离带的尺寸、使用的调色板和相关的十六进制值。样式指南还应该给出任何特殊CSS样式的说明和示例。例 如,如果使用一个类来表示反馈,那么应该说明这个类可以应用于哪些元素以及这些元素的外观是什么样的 样式指南是帮助多人维护或实现站点的好方法。通过制定一些简单的原则,可以促使站点的开发以可控制的 方式进行,同时防止样式随着时间的推移变得散乱。为了帮助你创建自己的样式指南,本书的代码下载中提 供了一个样式指南示例(见图1-5)。 出区热AE即E八物 Example style Guide ba style guide sa au in the pe helfe span af thh aite, it is 1.0 Coding Standards ns detail cem 13 图1-5样式指南示例 1.3.4组织样式表以便简化维护 对于简单的Web站点,可以只使用一个CSS文件。对于大型的复杂站点,对样式表进行分割以便简化维 护是一种好做法。如何分割样式表是需要仔细考虑的。我一般用一个CSS文件处理基本布局,用另一个文件 处理版式和设计修饰。这样的话,在布局确定之后,就很少需要修改布局样式表。这可以防止布局样式表被 意外地改动或破坏。 还可以进一步细分,比如用单独的CSS文件处理颜色。这样的话,如果希望提供新的颜色方案,就只需 本书来源于互联网的一些图片,在转换的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请购买原版书。 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 有些人尝试以 PHP 格式编写注释，然后将样式表用做 PHP。样式表被发送给 PHP 解析器，解析器去掉所 有注释，然后将样式表发送给浏览器。这需要在一个.htaccess 文件中设置 CSS 文件的 MIME 类型： addtype application/x-httpd-php.css 但是，需要确保 CSS 文件被缓存，否则这种方法会减慢而不是提高站点的速度。这可以使用 PHP 来实现， 但是比较复杂。因此，除非对要做的事情有把握，否则最好避免这么做。 最好的方法可能是启用服务器端压缩。如果使用 Apache服务器，那么应该安装 mod_gzip或 mod_deflate。 许多现代浏览器可以处理用 GZIP 压缩的文件并进行即时解压。这些 Apache 模块探测浏览器是否能够处理这 种文件，如果可以，就发送压缩的版本。服务器端压缩能够将(X)HTML 和 CSS 文件减小大约 80%，这可以减 少对带宽的占用，大大加快页面的下载速度。如果无法使用这些 Apache 模块，那么仍然可以按照 http: //tinyurl.com/8w9rp 上的教程的说明对文件进行压缩。 1.3.3 样式指南 大多数 Web 站点有多个开发人员，而大型站点甚至有多个团队负责处理站点的不同方面。程序员、内容 管理员和其他前端开发人员可能需要了解代码的元素和设计是如何工作的。因此，建立样式指南是一种非常 好的做法。 样式指南是一个文档、网页或小型站点，它们解释代码和站点的视觉设计是如何组合在一起的。好的样 式指南应该首先概述站点结构、文件结构和命名约定。它应该详细描述编码标准，设计人员、开发人员和内 容编辑人员需要遵守这些标准，从而保持站点的质量。这包括使用的 XHTML/CSS 版本、选择的可访问性级别、 浏览器支持细节和一般的编码最佳实践。样式指南应该详细描述布局和样式元素，比如各个元素的尺寸、隔 离带的尺寸、使用的调色板和相关的十六进制值。样式指南还应该给出任何特殊 CSS 样式的说明和示例。例 如，如果使用一个类来表示反馈，那么应该说明这个类可以应用于哪些元素以及这些元素的外观是什么样的。 样式指南是帮助多人维护或实现站点的好方法。通过制定一些简单的原则，可以促使站点的开发以可控制的 方式进行，同时防止样式随着时间的推移变得散乱。为了帮助你创建自己的样式指南，本书的代码下载中提 供了一个样式指南示例（见图 1-5）。 图 1-5 样式指南示例 1.3.4 组织样式表以便简化维护 对于简单的 Web 站点，可以只使用一个 CSS 文件。对于大型的复杂站点，对样式表进行分割以便简化维 护是一种好做法。如何分割样式表是需要仔细考虑的。我一般用一个 CSS 文件处理基本布局，用另一个文件 处理版式和设计修饰。这样的话，在布局确定之后，就很少需要修改布局样式表。这可以防止布局样式表被 意外地改动或破坏。 还可以进一步细分，比如用单独的 CSS 文件处理颜色。这样的话，如果希望提供新的颜色方案，就只需 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 23
精通CSS:高级WB标准解决方案 第一章基础知识 要创建一个新的颜色样式表。如果站点上有许多表单,那么可以用单独的CSS文件处理所有表单样式。可以 只在需要时链接这个文件,从而减少最初的下载开销。如果站点上的一些页面与站点的其余部分很不一样, 那么可以考虑让它们使用它们自己的CSS文件。例如,如果主页的布局与站点的其余部分很不一样,那么可 以为主页创建单独的CSS文件。 请记住,每个CSS文件都意味着要对服务器进行一次额外的调用。这会影响性能,所以一些开发人员喜 欢使用一个大型CSS文件而不是多个小文件。最终的选择实际上取决于实际情况,而且在某种程度上这是一 个个人喜好问题。我倾向于尽可能保持灵活性和维护的简单性。 1.4小结 在本章中,介绍了结构良好且有意义的文档如何为应用样式提供坚实的基础。了解了一些比较高级的 CSS选择器以及CSS如何处理相互冲突的规则。还看到了结构良好并适当添加注释的文档如何使开发人员更 轻松、效率更高。 在下一章中,将学习CSS框模型、如何和为什么要实现空白边叠加以及浮动和定位是如何工作的 本书来源于互联网的一些图片,在转搀的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请买原版书。 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 要创建一个新的颜色样式表。如果站点上有许多表单，那么可以用单独的 CSS 文件处理所有表单样式。可以 只在需要时链接这个文件，从而减少最初的下载开销。如果站点上的一些页面与站点的其余部分很不一样， 那么可以考虑让它们使用它们自己的 CSS 文件。例如，如果主页的布局与站点的其余部分很不一样，那么可 以为主页创建单独的 CSS 文件。 请记住，每个 CSS 文件都意味着要对服务器进行一次额外的调用。这会影响性能，所以一些开发人员喜 欢使用一个大型 CSS 文件而不是多个小文件。最终的选择实际上取决于实际情况，而且在某种程度上这是一 个个人喜好问题。我倾向于尽可能保持灵活性和维护的简单性。 1.4 小结 在本章中，介绍了结构良好且有意义的文档如何为应用样式提供坚实的基础。了解了一些比较高级的 CSS 选择器以及 CSS 如何处理相互冲突的规则。还看到了结构良好并适当添加注释的文档如何使开发人员更 轻松、效率更高。 在下一章中，将学习 CSS 框模型、如何和为什么要实现空白边叠加以及浮动和定位是如何工作的。 24
精通CSS:高级WB标准解决方案 第二章可视化格式模型 第二章可视化格式模型 不浮动的框 没有空白边加 要掌握的三个最重要的CSS概念是浮动、定位和框模型。这些概念控制在页面上安排和显示元素的方式 形成CSS的基本布局。如果你习惯于用表格控制布局,那么这些概念初看上去可能有点儿奇怪。实际上,大 多数人只有在使用CSS开发站点一段时间之后,才能完全掌握框模型的复杂性、绝对定位和相对定位之间的 差异以及浮动和清理的实际工作方式。在切实掌握这些概念之后,使用CSS开发站点就会变得容易多了。 在本章中,你将学习: 口框模型的复杂性和特性。 口如何以及为什么使用空白边叠加 口绝对定位和相对定位之间的差异。 口浮动和清理是如何工作的 2.1框模型概述 框模型是CSS的基石之一,它指定元素如何显示以及(在某种程度上)如何相互交互。页面上的每个元 素被看作一个矩形框,这个框由元素的内容、填充、边框和空白边组成(见图2-1)。 填充出现在内容区域的周围。如果在元素上添加背景,那么背景会应用于由内容和填充组成的区域。因 此,常常使用填充在内容周围创建一个隔离带,使内容不会与背景混在一起。添加边框会在填充的区域外边 加一条线。这些线可以有多种样式,比如实线、虚线或点线。在边框外边是空白边。空白边是透明的。一般 使用它控制元素之间的间隔。 空白边 框 填充 内容区域 图2-1框模型的示意图 填充、边框和空白边都是可选的,默认值为零。但是,许多元素将由用户代理样式表设置空臼边和填充 可以通过将元素的 margin或 padding设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选 择器对所有元素进行设置 避免地存在一些文字错误,仅供大家学习时参考,请齁买原 起点网络提供webttt.com 作者: Andy budd
精通 CSS : 高级 WEB 标准解决方案 第二章 可视化格式模型 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原书。 起点网络提供 webttt.com 作者：Andy Budd 第二章 可视化格式模型 要掌握的三个最重要的 CSS 概念是浮动、定位和框模型。这些概念控制在页面上安排和显示元素的方式， 形成 CSS 的基本布局。如果你习惯于用表格控制布局，那么这些概念初看上去可能有点儿奇怪。实际上，大 多数人只有在使用 CSS 开发站点一段时间之后，才能完全掌握框模型的复杂性、绝对定位和相对定位之间的 差异以及浮动和清理的实际工作方式。在切实掌握这些概念之后，使用 CSS 开发站点就会变得容易多了。 在本章中，你将学习： 框模型的复杂性和特性。 如何以及为什么使用空白边叠加。 绝对定位和相对定位之间的差异。 浮动和清理是如何工作的。 2.1 框模型概述 框模型是 CSS 的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。页面上的每个元 素被看作一个矩形框，这个框由元素的内容、填充、边框和空白边组成（见图 2-1）。 填充出现在内容区域的周围。如果在元素上添加背景，那么背景会应用于由内容和填充组成的区域。因 此，常常使用填充在内容周围创建一个隔离带，使内容不会与背景混在一起。添加边框会在填充的区域外边 加一条线。这些线可以有多种样式，比如实线、虚线或点线。在边框外边是空白边。空白边是透明的。一般 使用它控制元素之间的间隔。 图 2-1 框模型的示意图 填充、边框和空白边都是可选的，默认值为零。但是，许多元素将由用户代理样式表设置空白边和填充。 可以通过将元素的 margin 或 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选 择器对所有元素进行设置： 25