HTML5+CSS3网页设计实例教程-第11章-页面布局与媒介查询.ppt

1、HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询第第11章章 页面布局与媒介查询页面布局与媒介查询本章概述 本章的学习目标主要内容HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询第2页本章概述本章概述l本章将学习如何使用本章将学习如何使用CSS布置元素，创建布置元素，创建CSS布布局。这是局。这是CSS以前的一个弱点以前的一个弱点基于基于CSS 2.1的的布局技术使用最初不用于页面布局的属性，不适合布局技术使用最初不用于页面布局的属性，不适合于目前的于目前的Web应用程序。本章首先复习基础知识应用程序。本章首先复习基础知识：CSS盒子模型、浮动、定位，以及如何使

2、用它盒子模型、浮动、定位，以及如何使用它们创建灵活而确定的页面布局。接着讨论媒介查询们创建灵活而确定的页面布局。接着讨论媒介查询的潜在功能，以及如何调整的潜在功能，以及如何调整CSS。最后讨论。最后讨论CSS3布局规范的未来。布局规范的未来。HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询第3页本章的学习目标本章的学习目标l了解了解CSS盒子模型概念盒子模型概念l掌握使用掌握使用CSS定位与布局方法定位与布局方法l了解媒体查询功能了解媒体查询功能l了解了解CSS3布局规范布局规范HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询第4页主要内容主要内容11.1 盒子

3、模型盒子模型11.2 使用使用CSS定位与布局定位与布局11.3 构建页面布局实例构建页面布局实例11.4 媒体查询媒体查询11.5 CSS3布局布局11.6 本章小结本章小结HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询第5页11.1 盒子模型盒子模型l“盒子模型盒子模型”(box model)也称为方框模型，在也称为方框模型，在CSS中是一个很重要的概念，因为它决定了元素在浏览中是一个很重要的概念，因为它决定了元素在浏览器窗口中如何定位。其因器窗口中如何定位。其因CSS处理每个元素都好像处理每个元素都好像元素位于一个盒子中而得名。元素位于一个盒子中而得名。盒子模型示意图H

4、TML5+CSS3网页设计实例教程第11章 页面布局与媒介查询一个演示盒子模型的示例一个演示盒子模型的示例l为演示盒子模型，可以为网页中的每个元为演示盒子模型，可以为网页中的每个元素添加一个边框。素添加一个边框。元素创建了包含元素创建了包含整个页面的一个大盒子，而在其内部每一整个页面的一个大盒子，而在其内部每一个标题、段落、图片或链接都会创建另一个标题、段落、图片或链接都会创建另一个盒子。个盒子。第6页盒子在浏览器中的效果HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询border属性属性lborder属性能够指定代表某一元素的盒子的边框属性能够指定代表某一元素的盒子的边框应如

5、何呈现。一个边框具有三个可以修改的属性应如何呈现。一个边框具有三个可以修改的属性：border-color属性，用于指定边框应具有的颜属性，用于指定边框应具有的颜色；色；border-style属性，用于指定边框应为实线属性，用于指定边框应为实线、虚线还是双股线，或者其他可能的取值；、虚线还是双股线，或者其他可能的取值；borer-width属性，用于指定边框应具有的宽度。属性，用于指定边框应具有的宽度。给颜色属性添加第四个值，就可以控制透明度。给颜色属性添加第四个值，就可以控制透明度。RGBa中的第四个值中的第四个值“a”表示表示alpha，它的作用，它的作用和在和在Photoshop中修改

6、中修改alpha通道相同。通道相同。第7页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询padding属性属性lpadding属性能够指定元素内容与其边框属性能够指定元素内容与其边框之间应显示的距离：之间应显示的距离：l该属性的值多数使用像素指定。不过，它该属性的值多数使用像素指定。不过，它可以使用任何之前介绍过的长度单位、百可以使用任何之前介绍过的长度单位、百分比或关键字分比或关键字inherit。第8页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询margin属性属性lmargin属性控制盒子之间的空间。它的取属性控制盒子之间的空间。它的取值可以是长度、

7、百分比或者值可以是长度、百分比或者inherit，每种，每种取值的含义与刚才所见的取值的含义与刚才所见的padding属性完属性完全相同。全相同。l与与padding属性一样，除非取值为属性一样，除非取值为inherit，否则，否则margin属性的值也不会被子元素继属性的值也不会被子元素继承。承。第9页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询内容盒子的尺寸内容盒子的尺寸第10页控制内容盒子尺寸的属性属 性作 用height设置盒子的高度width设置盒子的宽度line-height设置文本行的高度(如布局方案中的行距)max-height设置盒子的最大高度min-he

8、ight设置盒子的最小高度max-width设置盒子的最大宽度min-width设置盒子的最小宽度HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询第11页主要内容主要内容11.1 盒子模型盒子模型11.2 使用使用CSS定位与布局定位与布局11.3 构建页面布局实例构建页面布局实例11.4 媒体查询媒体查询11.5 CSS3布局布局11.6 本章小结本章小结HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询11.2 使用使用CSS定位与布局定位与布局lCSS定位方案是定位方案是Web中控制页面布局的标中控制页面布局的标准方式。在准方式。在CSS中可以使用盒子模型表

9、现中可以使用盒子模型表现每个元素中的内容，用属性来影响盒子及每个元素中的内容，用属性来影响盒子及其内容。使用其内容。使用CSS控制盒子在页面中出现控制盒子在页面中出现的位置，即的位置，即CSS定位与布局。定位与布局。l在在CSS中，有三种常用的中，有三种常用的“定位方案定位方案”能能够控制页面的布局：够控制页面的布局：normal、float以及以及absolute定位。定位。第12页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询正常流正常流(normal)l默认情况下，元素使用默认情况下，元素使用“正常流正常流”(normal)或或“静态流静态流”(static flow)

10、在页在页面中进行布局。在正常流中，页面中的块面中进行布局。在正常流中，页面中的块级元素从顶部向底部流动，每个块级元素级元素从顶部向底部流动，每个块级元素都以独占一个新行的形式出现，而行内元都以独占一个新行的形式出现，而行内元素则从左向右流动，因为它们不会从新行素则从左向右流动，因为它们不会从新行开始显示。开始显示。第13页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询position属性属性lposition属性能够指定希望如何控制盒子属性能够指定希望如何控制盒子的位置，通常用于将项抽离正常流。的位置，通常用于将项抽离正常流。第14页值含 义static与正常流相同，并且为默

11、认值。因此很少会看到指定此值relative盒子的位置可以相对其在正常流中的位置出现偏移absolute盒子完全使用以包含元素左上角为原点的x及y坐标进行定位fixed位置以浏览器窗口左上角为原点计算得出，并且不随用户滚动窗口而改变位置position属性的取值HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询盒子偏移属性盒子偏移属性l当盒子的当盒子的position属性的值为属性的值为relative、absolute或或fixed时，它们同时会使用时，它们同时会使用“盒盒子偏移子偏移”(box offset)属性指定盒子应如何属性指定盒子应如何定位。定位。第15页属 性含 义

12、top从包含元素顶部起的偏移位置left从包含元素左侧起的偏移位置bottom从包含元素底部起的偏移位置right从包含元素右侧起的偏移位置盒子偏移属性的值HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询相对定位相对定位l相对定位能够将盒子移动到与其在正常流相对定位能够将盒子移动到与其在正常流中的位置相关联的某个位置。比如将一个中的位置相关联的某个位置。比如将一个盒子从其在正常流中应该出现的位置下移盒子从其在正常流中应该出现的位置下移30像素，或右移像素，或右移100像素。它将会根据盒子像素。它将会根据盒子偏移属性从其在正常流中的位置进行转移偏移属性从其在正常流中的位置进行转移

13、。第16页相对定位的显示效果HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询绝对定位绝对定位l绝对定位是将元素从正常流中取出，并固定其位置绝对定位是将元素从正常流中取出，并固定其位置。可以为元素应用值为。可以为元素应用值为absolute的的position属性，属性，指定其内容进行绝对定位。之后则可以使用盒子偏指定其内容进行绝对定位。之后则可以使用盒子偏移属性对其进行定位。移属性对其进行定位。l盒子偏移将盒子的位置固定于与盒子偏移将盒子的位置固定于与“包含块包含块”(containing block)相关联的位置相关联的位置包含块与包含块与包含元素稍微不同，因为它特指包含元素

14、稍微不同，因为它特指position属性被设属性被设置为置为relative、absolute或或fixed的包含元素。的包含元素。第17页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询固定定位固定定位lposition属性中需要了解的最后一个值是属性中需要了解的最后一个值是fixed。此值指定不仅元素的内容应完全从。此值指定不仅元素的内容应完全从正常流中移除，该盒子在用户上下滚动页正常流中移除，该盒子在用户上下滚动页面时也不应该移动。面时也不应该移动。lFirefox、Safari以及以及Chrome为固定定位提为固定定位提供支持，供支持，IE7是是IE浏览器中第一个对其提

15、供浏览器中第一个对其提供支持的版本。支持的版本。第18页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询z-index属性属性l使用绝对和相对定位的元素经常会与其他元素出使用绝对和相对定位的元素经常会与其他元素出现重叠。当发生这种情况时，默认的行为是第一现重叠。当发生这种情况时，默认的行为是第一个元素位于后来元素之下。这被称作个元素位于后来元素之下。这被称作“堆叠上下堆叠上下文文”(stacking context)。可以使用。可以使用z-index属性属性指定哪个盒子位于顶部。在图形设计方案中，堆指定哪个盒子位于顶部。在图形设计方案中，堆叠上下文与使用叠上下文与使用“提高到顶

16、部提高到顶部”以及以及“送至底部送至底部”的功能类似。的功能类似。lz-index属性的值是一个数字，数字的值越大就越属性的值是一个数字，数字的值越大就越接近元素显示位置的顶部。例如，一个接近元素显示位置的顶部。例如，一个z-index值值为为10的项目会出现于的项目会出现于z-index值为值为5的项之上。的项之上。第19页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询使用使用float属性实现流动属性实现流动lfloat属性能够将某个元素从正常流中抽取出来，并将其尽属性能够将某个元素从正常流中抽取出来，并将其尽可能远地放置在包含盒子的左侧或右侧。可能远地放置在包含盒子的左

17、侧或右侧。l包含元素中的其他内容则会围绕关联有包含元素中的其他内容则会围绕关联有float属性的元素进属性的元素进行流动，就如文本与其他元素能够围绕图片流动一样。行流动，就如文本与其他元素能够围绕图片流动一样。l任何时候为一个元素指定任何时候为一个元素指定float属性时，就必须设置属性时，就必须设置width属性以指定盒子应该占据的宽度。否则，它将自动占据包属性以指定盒子应该占据的宽度。否则，它将自动占据包含盒子含盒子100%的宽度，不会留给围绕它流动的内容任何空的宽度，不会留给围绕它流动的内容任何空间，从而使它显示的效果如同一个普通的块级元素。间，从而使它显示的效果如同一个普通的块级元素。

18、第20页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询clear属性属性lclear属性在使用浮动盒子时特别有用。内属性在使用浮动盒子时特别有用。内容能够围绕浮动元素流动。然而，如果希容能够围绕浮动元素流动。然而，如果希望浮动元素旁边没有任何内容，而周围的望浮动元素旁边没有任何内容，而周围的内容被推至浮动元素之下。这就是内容被推至浮动元素之下。这就是clear属属性的用途。性的用途。第21页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询第22页主要内容主要内容11.1 盒子模型盒子模型11.2 使用使用CSS定位与布局定位与布局11.3 构建页面布局实例构建

19、页面布局实例11.4 媒体查询媒体查询11.5 CSS3布局布局11.6 本章小结本章小结HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询11.3 构建页面布局实例构建页面布局实例l利用利用CSS控制页面布局。控制页面布局。第23页网页在Google Chrome和IE7+中的效果HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询第24页主要内容主要内容11.1 盒子模型盒子模型11.2 使用使用CSS定位与布局定位与布局11.3 构建页面布局实例构建页面布局实例11.4 媒体查询媒体查询11.5 CSS3布局布局11.6 本章小结本章小结HTML5+CSS3网页

20、设计实例教程第11章 页面布局与媒介查询11.4 媒体查询媒体查询l媒体查询扩展了媒体查询扩展了CSS的的media规则（通常用于规则（通常用于为打印或语音浏览器提供样式表），以及为打印或语音浏览器提供样式表），以及HTML中的中的media特性，并添加了显示尺寸、色深以及特性，并添加了显示尺寸、色深以及高宽比等可测试的特性。这能够基于设备或浏览高宽比等可测试的特性。这能够基于设备或浏览器特征来调整设计。器特征来调整设计。l媒体查询在媒体查询在“响应式网页设计响应式网页设计”(Responsive Web Design)中扮演着重要的角色，这是一种设中扮演着重要的角色，这是一种设计开发网站的新

21、技术，允许网站在类型广泛的设计开发网站的新技术，允许网站在类型广泛的设备中进行显示。备中进行显示。第25页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询第26页主要内容主要内容11.1 盒子模型盒子模型11.2 使用使用CSS定位与布局定位与布局11.3 构建页面布局实例构建页面布局实例11.4 媒体查询媒体查询11.5 CSS3布局布局11.6 本章小结本章小结HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询第27页11.5 CSS3布局布局lCSS3定位布局模块定位布局模块lCSS3碎片模块碎片模块l多列布局模块多列布局模块lCSS3区域模块区域模块lCS

22、S3排除和形状模块排除和形状模块lCSS3分页媒体模块分页媒体模块l用于分页媒体模块的用于分页媒体模块的CSS生成内容生成内容l弹性盒子布局模块弹性盒子布局模块lCSS网格布局模块网格布局模块HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询CSS3定位布局模块定位布局模块lCSS3定位布局模块规范包括基于定位布局模块规范包括基于position属性的属性的定位模式。定位模式。CSS3版本引入了两个新值：版本引入了两个新值：position:center;提供了简单的水平和垂直居中提供了简单的水平和垂直居中功能，使用功能，使用top、right、bottom和和left属性可以属

23、性可以偏移；而偏移；而position:page;创建了一个绝对定位的创建了一个绝对定位的盒子，这个盒子相对于最初的包含块来定位，可盒子，这个盒子相对于最初的包含块来定位，可以在页面媒体中标上页号。这些属性还有以在页面媒体中标上页号。这些属性还有offset组，其行为类似于定位属性组，其行为类似于定位属性top、right等，可用等，可用于多语言站点。于多语言站点。第28页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询CSS3碎片模块碎片模块lCSS3碎片模块辅助规范为分隔符碎片模块辅助规范为分隔符(breaking)定义了属性和规则，即元素因为定义了属性和规则，即元素因为C

24、SS布局分为两个部分时，元素的内容如布局分为两个部分时，元素的内容如何处理。属性用于设置或控制多列布局中何处理。属性用于设置或控制多列布局中的列、的列、CSS中的区域以及中的区域以及CSS Flexible Box Layout中的弹性容器之间的分隔符。中的弹性容器之间的分隔符。它们与前面在它们与前面在CSS Paged Media Module Level 3中提及的中提及的page-break-*属性紧密相属性紧密相关。关。第29页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询多列布局模块多列布局模块l多列布局会使文本跨越多个独立的文本块流动，在多列布局会使文本跨越多个独

25、立的文本块流动，在印刷界是一种常见的设计元素，但在网页中它从未印刷界是一种常见的设计元素，但在网页中它从未成为可能。成为可能。l多列布局模块改变了这种情况，它能够为单一元素多列布局模块改变了这种情况，它能够为单一元素设置多个列。有两种方式可以为一个元素设置多个设置多个列。有两种方式可以为一个元素设置多个列。第一种方式是使用列。第一种方式是使用column-count属性，它简属性，它简单地允许你为元素设置列的数量。另一种方式是使单地允许你为元素设置列的数量。另一种方式是使用用column-width属性，它能够为每一列设置宽度属性，它能够为每一列设置宽度。在使用宽度可变元素时，这样做有助于希望

26、通过。在使用宽度可变元素时，这样做有助于希望通过控制列的宽度以提供更好可读性的情况。控制列的宽度以提供更好可读性的情况。第30页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询CSS3区域模块区域模块l大多数桌面发布大多数桌面发布(DTP)程序都允许把一系列文本程序都允许把一系列文本框链接起来，把它们用作其内容的一个盒子。如框链接起来，把它们用作其内容的一个盒子。如果在第一个盒子中显示的内容太多，内容就会按果在第一个盒子中显示的内容太多，内容就会按顺序自动流动到后续的盒子中。顺序自动流动到后续的盒子中。lCSS区域完成相同的功能区域完成相同的功能使用使用flow-into属性属

27、性把元素赋予指定的流。接着这个元素的内容会流把元素赋予指定的流。接着这个元素的内容会流动到一组区域中，这些区域按列出的顺序，定义动到一组区域中，这些区域按列出的顺序，定义为为flow-from属性的同名选择器。属性的同名选择器。第31页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询CSS3排除和形状模块排除和形状模块l浮动功能的一个有趣的方面是非浮动的块浮动功能的一个有趣的方面是非浮动的块级元素忽略浮动元素的方式，但这些方框级元素忽略浮动元素的方式，但这些方框的行框封装了它们。这个规范的的行框封装了它们。这个规范的CSS Exclusions部分扩展了将内联内容应用于部分扩展

28、了将内联内容应用于任何元素任何元素(使用任意定位模式使用任意定位模式)的功能。文本的功能。文本可以流向某形状可以流向某形状(CSS Shapes部分部分)的内部的内部和周围，并在单个元素的内部和外部使用和周围，并在单个元素的内部和外部使用不同的形状。这使文本流向图像的周围或不同的形状。这使文本流向图像的周围或内部形状等杂志技术更容易实现。内部形状等杂志技术更容易实现。第32页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询CSS3分页媒体模块分页媒体模块l这个规范详细描述了页面媒体格式化模型这个规范详细描述了页面媒体格式化模型，在打印网页时，根据页框来使用它。它，在打印网页时，

29、根据页框来使用它。它可以用可以用page规则规则(和封装页面的区域的相和封装页面的区域的相关规则，例如关规则，例如top-center和和bottom-right-corner)、:left、:right和和:first伪类来伪类来设置样式。这些都可以在设置样式。这些都可以在media规则中使规则中使用，规范还定义了与页面相关的属性。用，规范还定义了与页面相关的属性。第33页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询用于分页媒体模块的用于分页媒体模块的CSS生成内容生成内容l这个规范为生成的内容提供样式，例如自这个规范为生成的内容提供样式，例如自动的页眉、脚注和跨引用。它

30、还包含动的页眉、脚注和跨引用。它还包含overflow-style属性的属性的4个新值个新值paged-x、paged-y、paged-x-controls和和paged-y-controls。它们会提供基于页面的界面，。它们会提供基于页面的界面，有或没有相关的导航控件。这些样式适合有或没有相关的导航控件。这些样式适合与与CSS Paged Media 和和 Multi-column Layout规范一起使用。规范一起使用。第34页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询弹性盒子布局模块弹性盒子布局模块lFlexible Box Model（或（或Flexbox）开始于

31、）开始于Firefox用户界面的建立。用户界面的建立。Flexbox规范用规范用布局属性和在水平或垂直方向上排列的盒布局属性和在水平或垂直方向上排列的盒子，定义了子，定义了“为界面设计进行优化的为界面设计进行优化的CSS盒子模型盒子模型”，并深度控制盒子如何对齐，并深度控制盒子如何对齐，如何相对于可用的空间进行伸缩如何相对于可用的空间进行伸缩(flex)。第35页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询CSS网格布局模块网格布局模块l网格布局是网格布局是“一个真正的布局一个真正的布局”方法，它基于网格，与源方法，它基于网格，与源顺序没有任何联系，允许给不可能使用表格布局

32、或其他顺序没有任何联系，允许给不可能使用表格布局或其他CSS 2.1布局模式的页面建立布局。布局模式的页面建立布局。l网格由水平和垂直网格线组成，它们包含了网格字段。要网格由水平和垂直网格线组成，它们包含了网格字段。要建立网格，可以创建网格线、网格字段，或者创建两者，建立网格，可以创建网格线、网格字段，或者创建两者，任何未定义的、但必须的线条或字段会自动添加。网格的任何未定义的、但必须的线条或字段会自动添加。网格的块级、替代和块级、替代和inline-block子元素是网格框，可以根据指子元素是网格框，可以根据指定的网格字段、网格线或指定的网格线标尺来定位。网格定的网格字段、网格线或指定的网格

33、线标尺来定位。网格框可以跨越多行，将内容对齐到网格线时，重叠网格框，框可以跨越多行，将内容对齐到网格线时，重叠网格框，甚至将它们定位到同一个位置，控制它们的堆叠次序。甚至将它们定位到同一个位置，控制它们的堆叠次序。第36页HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询第37页主要内容主要内容11.1 盒子模型盒子模型11.2 使用使用CSS定位与布局定位与布局11.3 构建页面布局实例构建页面布局实例11.4 媒体查询媒体查询11.5 CSS3布局布局11.6 本章小结本章小结HTML5+CSS3网页设计实例教程第11章 页面布局与媒介查询11.6 本章小结本章小结l本章介绍

34、了许多基础知识，首先介绍了盒子模型本章介绍了许多基础知识，首先介绍了盒子模型的基础和各种盒子，然后介绍了的基础和各种盒子，然后介绍了position属性的属性的基于基于CSS 2.1的布局选项、浮动元素、的布局选项、浮动元素、display:inline;、display:inline-block;和和display:table;布局。还介绍了媒体查询，如何使用它们和适应布局。还介绍了媒体查询，如何使用它们和适应性布局来获得响应式性布局来获得响应式Web设计，以及如何处理高设计，以及如何处理高分辨率的显示器。最后介绍了分辨率的显示器。最后介绍了9个个CSS3布局模块布局模块，大多数模块可以在一个或多个浏览器中实现。，大多数模块可以在一个或多个浏览器中实现。第38页