css设计引言,HTML5与CSS3设计模式 引言（2）

引言(2)

框模型范围

本书的另一个创新点是采用了3种设置框尺寸的方法：设定尺寸、收缩对齐或拉伸(参见第5章)。每一种框都需要组合使用不同的属性和属性值，才能够变成设定尺寸型、收缩对齐型或拉伸型。第5章～第9章介绍的各种设计模式详细说明了这3种方法。这3个术语并不是CSS官方术语，但是CSS的正式规范中却隐含了这三个概念，分别用"尺寸"(size)、"收缩到合适"(shrink-to-fit)和"拉伸"(stretch)表示 。

当然，设定尺寸、收缩对齐和拉伸并不是新概念。这里所指的创新之处在于本书对这3个术语进行了清晰的定义，说明了它们为何既是CSS的基础特性又是CSS设计模式的重要生成器。

框模型位置

另一个创新点是关于框相对于其容器或相邻兄弟元素的3种定位方式：缩进(或外凸)、相对相邻兄弟元素偏移或相对容器对齐和偏移(参见第8章)。CSS规范主要规定了元素偏移定位方式，关于元素对齐定位方式讨论较少(参见CSS 2.1规范的第9章)，根本没提元素的缩进方式，不过它的规则支持这种方式。

缩进、偏移和对齐是3种不同的效果。例如，缩进框是会伸缩的，它的外边距会收缩它的宽度，而对齐框具有固定尺寸或者收缩对齐，它的外边距不会收缩宽度。对齐和缩进框会与它们的容器对齐，而偏移框则相对它们的容器或同级元素偏移指定距离。

各种框的缩进、偏移和对齐需要通过属性和属性值的不同组合来实现。第8章和第9章的设计模式说明了这一点。

当然，缩进、偏移和对齐并不是新概念。本书的创新之处在于对这3个词汇进行了清晰定义，并且说明了它们为何既是CSS的基础特性又是CSS设计模式的重要生成器。

列布局

另一个创新点是提炼出浏览器内置的12个对表格列进行自动布局的方法，并对它们进行了命名和解释(参见第16章)。

所有主流浏览器都包含了这些强大的列布局特性。它们在主流浏览器中都是可用的，而且非常可靠。虽然我们不推荐在表格中使用页布局 ，但是列表数据仍然需要设置布局，并且我们可以利用这些列布局优化列表数据的表现。

流动布局

另一个创新点是流动布局(参见第17章)。流动布局也不是新概念，但是通常需要反复试验才能成功。在第17章，我们将提出4个简单的设计模型，它们可用于创建复杂的流动布局，而且保证兼容主流浏览器。

这些设计模式包括由外而内框、浮动节、浮动分隔区和流动布局，它们使用浮动和百分数宽度实现流动布局，但是它们不会出现以前常常遇到的问题，如容器挤压、浮动错列及百分数不当引起浮动元素重叠 。

流动布局设计模式不需要使用表格就能够实现各种类似于表格分栏的布局。而比表格更好的是，这些布局会自动调整宽度，自动将列换到下一行，从而在较窄宽度下也能正常显示。

事件样式化

另一个创新点是将在第17章介绍的事件样式化JavaScript框架。这是一个简单而强大的开源框架，可以用动态和交互的方式设置文档样式。通过使用***的***实践，HTML代码可以完全与JavaScript代码分离，实现***的易用性，并且所有样式都交由CSS实现。此外，这个框架支持在JavaScript中选择元素，而且使用的元素选择器也与CSS完全相同。这大大简化和统一了为动态HTML文档添加样式和脚本的工作。

通过这个框架，本书介绍了整合JavaScript、CSS和HTML的方法，读者可以交互地使用样式。当然，如果读者不愿意使用JavaScript，那么可以跳过第17章介绍的5个JavaScript设计模式和第20章介绍的2个JavaScript模式--其余343以上的个设计模式都没有使用JavaScript。

组合HTML5和 CSS3来创建设计模式

本书***也是最普遍的一个创新点是，通过组合一般类型的HTML元素和CSS属性来实现设计模式。本书在第2章中定义了4种主要的HTML元素类型(结构块、终止块、多功能块和行内块)，并在第4章中将它们对应到6个框模型(行内型、行内块级型、块级型、表格型、绝对型和浮动型)。

每一个设计模式都说明了应用到各种HTML元素的方法。换言之，一个设计模式不仅是支持特定元素的方法，它还是能够应用到所有同类型HTML元素的模式。

例如，第18章的浮动下沉设计模式使用了块级和行内元素，但是它并没有规定必须使用哪些块级和行内元素(参见代码清单1)。例如，我们可以使用段落作为BLOCK元素，使用SPAN作为INLINE元素(参见代码清单2)，或者使用DIV作为BLOCK，而〈strong〉作为INLINE，等等。

在一些特殊情况中，设计模式可能会规定一个明确的元素，如〈span〉。这是因为这种特定的元素是***解决方案、唯一解决方案或者极为常用的解决方案。即使是这样，通常也可以用其他同类元素替换这种特定的元素。

1. 代码清单1. 浮动首字下沉设计模式

HTML

〈BLOCKclass="hanging-indent"〉

〈INLINEclass="hanging-dropcap"〉 text 〈/INLINE〉

〈/BLOCK〉

CSS.hanging-indent { padding-left:+VALUE; text-indent:-VALUE; margin-top:±VALUE; }

.hanging-dropcap { position:relative; top:±VALUE; left:-VALUE; font-size:+SIZE;

line-height:+SIZE;}

【责任编辑：book TEL：(010)68476606】

点赞 0