第10章 当CSS样式表遇到层

第10章 当CSS样式表遇到层
• 从这一章节开始，我们有必要给HTML的概念升级。W3C 曾规定：“动态HTML是一个被某些厂商用来描述可使文 档动态性更强的HTML、样式表以及脚本的结合物的术 语。”动态HTML指的便是DHTML（Dynamic HTML）。 对大多数人来说，DHTML便是HTML 4.0、CSS样式表以 及JavaScript的结合物。
10.3.1 理解框模型
• 层中内容的外面被很多空间级概念的物质包围，例如空距 （padding）、边框（borders）和边距（margin）。空距就 是页面内容距离边框的位置，边距就是边框以外的距离。 页面中任意一个层中内容的周围理论上是这样被包围的， 如图下图所示的框模型。
10.3.1 理解框模型
10.3.2 空距PADDING属性
• • • • • • • • 当padding只定义一个数值时。 例如：padding:1em; 当padding定义2个数值时。 例如：padding:1em 2em; 当padding定义3个数值时。 例如：padding:1em 2em 3em; 当padding定义4个数值时。 例如：padding:1em 2em 3em 4em;
10.4 定制层的DISPLAY属性
• 前面已经了解到，层的表现是通过“框”这种结构。框可 以是块级对象（block element），也可以是行内对象 （inline element）。那么所谓display属性就是用来控制其 中的内容是块级还是行级。所以，基本的定义为block，表 现为块级；或者定义为inline，表现为行级。默认情况下是 none，表现为不显示框，代码写为：
10.2 页面中的层
• CSS样式表可以通过被封在层里这种方式来限制页面所修 饰的内容。这就是说，为了使样式表只对页面局部起修饰 作用，于是设计者将页面的局部内容定义在某个范围中， 这个范围便称之为CSS-layer（CSS层）。CSS层可以通过 HTML标签来定义，这种使用方法是Web设计中的一枚利 器。
10.3.3 边框BORDER的扩展属性
• border-width：表示边框的宽度。 • border-style：属性表示边框的样式，常用的有solid、dotted、 dashed等。 • borde-color：表示边框的颜色。 • 同样，也可以像padding属性那样，采用快捷的方式来定义 边框，例如：
• • • • • <style> #color {color:red; } </style> 《烬余录》像是一个历尽沧桑的百岁老人所写，<span id="color">但 是当时的张爱玲只有24岁。</span>她对自己的自私和冷酷，有一种抽 离。
10.2.1 行<SPAN>和层<DIV>
• 结果如下图所示。
• 类似于空距和边框，边距属性也可以细分为上下左右4条 边来分别控制。它们是上边框属性margin-top，下边框属 性margin-bottom，左边框属性margin-left和右边框属性 margin-right。
10.3.5 框模型的溢出
• 有时候，如果层中的内容太多，以至于超出层的初始设定 范围时，IE浏览器此时会“自作主张”地帮忙拉伸层的范 围。为了改变这种情况，令层的大小不会发生改变，可以 使用overflow属性。在默认情况下，overflow属性值为 visible，意思是页面内容都是可见的。所以，这是层的大 小失去控制的原因。
• padding属性又常被称为内边距。padding属性可以细分为 padding-top、padding-right、padding-bottom和padding-left 这4个属性，通过它们可以控制一个框模型中的每一边空 距。例如“padding-bottom:1.5em;”。此外为了方便，设 计者可以使用快捷的写法，来分别设置4条边。
• border:3px dotted red;
• 或者使用快捷方定义每一条边框，例如：
• border:1em 2em 3em 4em;
10.3.4 边距（MARGIN）
• margin属性又称之为外边距，就好像是围绕在边框范围外 的一层“空气”。padding属性值不能为负值，而margin属 性值可以为负数，以此对内容进行叠加。
10.7 小结
• 本章介绍了CSS+DIV布局的入门知识及一些基本的概念型 的知识，但是这些基本的知识都很重要。只有了解了这些 知识点后，在今后Web设计的学习中，即使是自学，也可 以很好地融会贯通新知识。
10.1 理解块级的意义
• 在Web设计中，设计者使用CSS来修饰页面的内容，而与 CSS这个名字相关的还有一个名字是CSS-P（Cascading Style Sheets Positioning）。它是CSS的一个扩展，表示如 何布局页面内容在浏览窗口中的位置。那么使用样式表是 如何工作的呢？
10.3.3 边框BORDER的扩展属性
• border是一种使用频率非常高的属性，表格、边框中都有 它的身影。对于边框，不仅仅可以改变它的宽度，而且可 以指定其格式和颜色。所以，边框的属性具有多样式的扩 展，其属性可以细分为border-width属性、border-style属性 和border-color属性。
10.2.3 层的叠加
• 层不同于表格、框架的最大优势在于层是可以叠加的。这 是因为层具有一个“Z轴”的特性，Z轴好比3D坐标中的Z 轴，是一个上下层级的关系，就是说一个层是可以覆盖在 另一个层上面，如下图所示。
10.3 框模型
• 层的内部便是一个框模型（box model），这个概念很重要。 在CSS广泛应用之前，建立一个出色的页面布局只能通过 框架集、表格，大量内嵌表格框架，或者一堆堆的<p>标 签和空格符号。而当有了层的框模型思路布局时，设计者 们就找到了最好的选择。有时它完全可以替代框架、表格 等。这种方法不仅可以使页面代码精简，而且大大缩短了 页面的刷新时间，这样更易于管理代码。
10.2.1 行<SPAN>和层<DIV>
• 设计者常把CSS样式表放在<span>和<div>这两个布局页面 的标签中，它们的作用是使样式表可以只对标签中的内容 元素起作用。这两者的区别是<span>标签是指行内的对象， 而<div>标签针对的是层内的对象。为了形象说明什么是 行标签，这里通过以下代码展示一个简单的案例。
• 如图中所示，层实际的高度是“层中页面内容的高度+上 空距+上边框+上边距+下空距+下边框+下边距”的值。 • 第一个层中，如果事先设定的height属性值超出层中上下 边框之间的距离。 • 而第二个层设置的高度正好符合上下边框的距离。所以层 中文本没有出现多余的空行。
10.3.2 空距PADDING属性
10.6 案例：简单的CSS+DIV
• 从本章开始，读者应该习惯当谈到页面布局这样的问题时， 首先想到的是使用CSS和层的配合使用。本节使用前面所 学的知识制作一个简单的三栏式布局的页面。相对于本章 开始的两栏布局，三栏布局并不仅仅只是多加了一个层。 在这个例子中，要留心三栏的布局在数字上的巧妙安排， 如果数字排的不够精确，页面也许会变得面目全非。
• display:block;
10.5 CSS HACK
• 目前世界上流行着多种浏览器，主要有IE浏览器、Firefox、 Opera以及Google浏览器，它们基于不同的内核，对CSS的 解析也就不一样，这直接导致生成的页面效果不同。例如 最直接的影响就体现在框模型中对距离的理解，这对设计 者来说，是很伤脑筋的一件事。怎样才能够解决浏览器兼 容的问题呢？只能针对于不同的浏览器写不同的样式表， 这种写法被称之为CSS Hack。
10.5 CSS HACK
• 尽管有许多Hack针对不同的浏览器提供了解决方案，例如 在解决IE浏览器和Firefox浏览器中布局不同的问题时，常 用的一个是!important。由于!important不被IE支持，而其 他浏览器可以支持，使用这个特性可以用来解决很多问题。 如有时在定义padding对象时，在IE浏览器和Firefox中有误 差，则设计者先制定被非IE浏览器能识别的声明，再添加 一个IE也能识别的声明。其中需要注意CSS的先后声明顺 序。
10.2.2 层的基本定位
• 通过一些基本的属性可以给层定位在页面中的任何位置， 这些主要的属性有方位属性，如层的左、右、上、下；描 述大小的属性，如层的宽、高、参照位置。
10.2.2 层的基本定位
• • • • • • • • left：相当于窗口左边的位置。 right：相当于窗口右边的位置。 top：相当于窗口上边的位置。 bottom：相当于窗口下边的位置。 width：表示层的宽度。 height：表示层的长度。 position：用来控制采用什么样的方式定位图层。 position属性的属性值有absolute、relative和static三个。absolute 表示“层的位置以网页的左上角为基准来设置”；relative表示“层 的位置以其原始值的位置来设置”；static表示为“层的位置以HTML 默认的位置来设置。”