HTML5+CSS3网页设计基础教程第17章-网页布局.ppt

1、HTML5+CSS3网页设计基础教程第17章 网页布局第1页第第17章章 网页布局网页布局本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础教程第17章 网页布局第2页本章概述本章概述lWeb页面布局是指对页面中的标题、导航栏、主页面布局是指对页面中的标题、导航栏、主要内容、脚注、表单等各种构成元素进行合理排要内容、脚注、表单等各种构成元素进行合理排版。过去的版。过去的CSS版本主要使用版本主要使用float属性或属性或position属性对页面中的元素进行布局，这些布属性对页面中的元素进行布局，这些布局方法存在一些缺陷，譬如，如果两栏或多栏中局方法存在一些缺陷，譬如，如果两栏或

2、多栏中元素的内容高度不同，底部难以对齐。元素的内容高度不同，底部难以对齐。CSS3追追加了一些新的布局方式，克服了这些缺陷，还可加了一些新的布局方式，克服了这些缺陷，还可以快捷地对页面中的元素做更复杂的布局。以快捷地对页面中的元素做更复杂的布局。l本章对本章对CSS3常用布局方式进行介绍，主要包括常用布局方式进行介绍，主要包括多栏布局和盒布局。这两种布局方式受到了多栏布局和盒布局。这两种布局方式受到了Firefox、Safari以及以及Chrome浏览器的支持。浏览器的支持。HTML5+CSS3网页设计基础教程第17章 网页布局第3页本章的学习目标本章的学习目标l掌握掌握CSS3多栏布局功能的

3、使用方法，了解多栏布局功能的使用方法，了解多栏布局的使用场合。多栏布局的使用场合。l掌握掌握CSS3盒布局功能的使用方法，了解盒盒布局功能的使用方法，了解盒布局的使用场合，以及盒布局和多栏布局布局的使用场合，以及盒布局和多栏布局的区别。的区别。l掌握掌握CSS中弹性盒布局的基本概念以及使中弹性盒布局的基本概念以及使用方法。用方法。l了解弹性盒布局的布局原理。了解弹性盒布局的布局原理。HTML5+CSS3网页设计基础教程第17章 网页布局第4页主要内容主要内容17.1 多栏布局多栏布局17.2 盒布局盒布局17.3 弹性盒布局弹性盒布局17.4 弹性盒布局的布局原理弹性盒布局的布局原理 17.5

4、 本章小结本章小结 HTML5+CSS3网页设计基础教程第17章 网页布局第5页17.1 多栏布局多栏布局l17.1.1 设置列宽和列数设置列宽和列数l17.1.2 设置列间距设置列间距l17.1.3 设置列边框设置列边框l17.1.4 设置跨列标题设置跨列标题l17.1.5 统一列高统一列高HTML5+CSS3网页设计基础教程第17章 网页布局第6页17.1.1 设置列宽和列数设置列宽和列数lcolumn-width子属性用于给列定义一个最小的宽度。默子属性用于给列定义一个最小的宽度。默认值为认值为auto，表示将根据，表示将根据column-count子属性指定的数子属性指定的数目计算列宽

5、。目计算列宽。column-count子属性用于指定文本显示的子属性用于指定文本显示的列数。列数。l实际应用中，通常将这两个参数放在实际应用中，通常将这两个参数放在columns中一起指定。中一起指定。例如，例如，columns:auto 4;就是图就是图17-1所示的所示的4栏效果，这栏效果，这行代码将行代码将div中的内容分成中的内容分成4列显示，根据列显示，根据div的宽度的宽度640px，均分列宽为，均分列宽为160px（包括列间距的宽度）。（包括列间距的宽度）。HTML5+CSS3网页设计基础教程第17章 网页布局第7页17.1.2 设置列间距设置列间距l默认情况下，浏览器根据列数和

6、列宽来计算出列间距。但默认情况下，浏览器根据列数和列宽来计算出列间距。但在实际项目中，默认列间距用得比较少，更多时候需要指在实际项目中，默认列间距用得比较少，更多时候需要指定列间距。定列间距。lCSS3的多栏布局中，的多栏布局中，column-gap子属性用来指定列间子属性用来指定列间距，默认值为距，默认值为normal，相当于，相当于1em。需要注意的是，如。需要注意的是，如果果column-gap与与column-width加起来大于总宽度，就无加起来大于总宽度，就无法显示法显示column-count指定的列数，会被浏览器自动调整指定的列数，会被浏览器自动调整列数和列宽。列数和列宽。HT

7、ML5+CSS3网页设计基础教程第17章 网页布局第8页17.1.3 设置列边框设置列边框l由于浏览器宽度有限，当列数过多时，列与列之间的间隔由于浏览器宽度有限，当列数过多时，列与列之间的间隔会比较窄，密密麻麻的，不方便阅读。这时候可以在列与会比较窄，密密麻麻的，不方便阅读。这时候可以在列与列之间设置一条边框线，使版面看起来更清晰。列之间设置一条边框线，使版面看起来更清晰。lcolumn-rule用于设置列的边框，类似于用于设置列的边框，类似于border，区别是，区别是不占用任何空间，因此设了不占用任何空间，因此设了column-rule不会导致列宽的不会导致列宽的变化。另外如果边框宽度大于

8、变化。另外如果边框宽度大于column-gap列间距，将不列间距，将不会显示边框。会显示边框。column-rule的语法和的语法和border类似，例如，类似，例如，column-rule:1px solid#000;。HTML5+CSS3网页设计基础教程第17章 网页布局第9页17.1.4 设置跨列标题设置跨列标题l在在CSS3的多栏布局中，跨列显示通过的多栏布局中，跨列显示通过column-span子属子属性来实现。性来实现。column-span子属性有两个取值：默认值子属性有两个取值：默认值none表示不跨列，表示不跨列，all表示跨越所有列。例如，文章标题表示跨越所有列。例如，文章

9、标题可以设成可以设成all来跨列。来跨列。HTML5+CSS3网页设计基础教程第17章 网页布局第10页17.1.5 统一列高统一列高lcolumn-fill子属性用于统一列高。默认值为子属性用于统一列高。默认值为auto，各列的，各列的高度随内容自动调整；当设置为高度随内容自动调整；当设置为balance时，所有列的高时，所有列的高度都设为最高的列高。度都设为最高的列高。HTML5+CSS3网页设计基础教程第17章 网页布局第11页主要内容主要内容17.1 多栏布局多栏布局17.2 盒布局盒布局17.3 弹性盒布局弹性盒布局17.4 弹性盒布局的布局原理弹性盒布局的布局原理 17.5 本章小

10、结本章小结 HTML5+CSS3网页设计基础教程第17章 网页布局第12页17.2 盒布局盒布局l17.2.1 CSS盒子模型盒子模型l17.2.2 使用盒布局使用盒布局l17.2.3 盒布局和多栏布局的区别盒布局和多栏布局的区别HTML5+CSS3网页设计基础教程第17章 网页布局第13页17.2.1 CSS盒子模型盒子模型l所有所有HTML元素都可以看作盒子，在元素都可以看作盒子，在CSS中，中，“盒子模型盒子模型”这一术语用在设计和布局中。这一术语用在设计和布局中。CSS盒子模型本质上是一个盒子，用来封装盒子模型本质上是一个盒子，用来封装HTML元元素，包括边距、边框、填充和实际内容。盒

11、子模素，包括边距、边框、填充和实际内容。盒子模型允许开发人员在其他元素和周围元素边框之间型允许开发人员在其他元素和周围元素边框之间的空间放置元素。各部分的含义如下。的空间放置元素。各部分的含义如下。Margin(外边距外边距)：边框外的区域，外边距是透明的。：边框外的区域，外边距是透明的。Border(边框边框)：围绕在内边距和内容外的边框。：围绕在内边距和内容外的边框。Padding(内边距内边距)：内容到边框之间的区域，内边距是：内容到边框之间的区域，内边距是透明的。透明的。Content(内容内容)：盒子的内容区域，显示文本和图像。：盒子的内容区域，显示文本和图像。HTML5+CSS3网

12、页设计基础教程第17章 网页布局第14页17.2.2 使用盒布局使用盒布局l在在CSS3中，通过中，通过box属性来使用盒布局。在属性来使用盒布局。在Firefox浏览器中，书写成浏览器中，书写成-moz-box；在；在Chrome、Safari或或Opera浏览器中，书写成浏览器中，书写成-webkit-box。下面首先介绍使用传统下面首先介绍使用传统float属性布局页面的缺陷，属性布局页面的缺陷，然后再介绍使用盒布局的好处。然后再介绍使用盒布局的好处。HTML5+CSS3网页设计基础教程第17章 网页布局第15页17.2.3 盒布局和多栏布局的区别盒布局和多栏布局的区别l盒布局和多栏布局

13、的区别在于：使用多栏布局时，盒布局和多栏布局的区别在于：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。另外，使用多栏布局的宽度不可能是不一样的。另外，使用多栏布局时，也不可能具体指定什么栏中显示什么内容，时，也不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容的时候，不适因此比较适合使用在显示文章内容的时候，不适合用来安排整个网页中由各元素组成的网页结构合用来安排整个网页中由各元素组成的网页结构的时候。的时候。HTML

14、5+CSS3网页设计基础教程第17章 网页布局第16页主要内容主要内容17.1 多栏布局多栏布局17.2 盒布局盒布局17.3 弹性盒布局弹性盒布局17.4 弹性盒布局的布局原理弹性盒布局的布局原理 17.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第17章 网页布局第17页17.3 弹性盒布局弹性盒布局l17.3.1 对多个元素使用对多个元素使用flex属性属性l17.3.2 设置元素的显示顺序设置元素的显示顺序l17.3.3 设置元素的排列方向设置元素的排列方向l17.3.4 定义宽高自适应定义宽高自适应l17.3.5 消除空白消除空白l17.3.6 灵活使用灵活使用flex

15、属性属性l17.3.7 控制换行方向控制换行方向HTML5+CSS3网页设计基础教程第17章 网页布局第18页17.3.1 对多个元素使用对多个元素使用flex属性属性l在使用在使用float属性或属性或position属性时，需要使用包括负外边属性时，需要使用包括负外边距（距（margin）在内的比较复杂的指定方法才能够达到这）在内的比较复杂的指定方法才能够达到这个要求，但是如果使用盒布局，只要使用一个个要求，但是如果使用盒布局，只要使用一个flex属性，属性，使盒布局变为弹性盒布局即可。使盒布局变为弹性盒布局即可。l【例【例17-8】使用弹性盒布局进行页面排版。】使用弹性盒布局进行页面排版

16、。HTML5+CSS3网页设计基础教程第17章 网页布局第19页17.3.2 设置元素的显示顺序设置元素的显示顺序l使用弹性盒布局时，可以通过使用弹性盒布局时，可以通过order属性来改变各属性来改变各元素的显示顺序。可以在每个元素的样式中加入元素的显示顺序。可以在每个元素的样式中加入order属性，该属性使用一个整数值表示，浏览器属性，该属性使用一个整数值表示，浏览器在显示元素的时候根据数值按从小到大排列。在显示元素的时候根据数值按从小到大排列。l【例【例17-9】设置元素的显示顺序。】设置元素的显示顺序。HTML5+CSS3网页设计基础教程第17章 网页布局第20页17.3.3 设置元素的

17、排列方向设置元素的排列方向l使用弹性盒布局时，可以方便地指定多个元素的排列方向，使用弹性盒布局时，可以方便地指定多个元素的排列方向，主要使用主要使用flex-direction属性来实现。该属性的取值包括属性来实现。该属性的取值包括如下如下4种：种：row：默认值，横向排列。：默认值，横向排列。row-reverse：横向反向排列。：横向反向排列。column：纵向排列。：纵向排列。column-reverse：纵向反向排列。：纵向反向排列。l【例【例17-10】改变元素的排列方向。】改变元素的排列方向。HTML5+CSS3网页设计基础教程第17章 网页布局第21页17.3.4 定义宽高自适应

18、定义宽高自适应l使用盒布局时，元素的宽度和高度具有自适应性，即元素使用盒布局时，元素的宽度和高度具有自适应性，即元素的宽度和高度可以根据排列方向的改变而改变。通过的宽度和高度可以根据排列方向的改变而改变。通过【例例17-11】可以清楚的看出这特性。示例中有一个容器元素，可以清楚的看出这特性。示例中有一个容器元素，元素中有元素中有3个个div，只对容器元素指定了宽度和高度，从运，只对容器元素指定了宽度和高度，从运行结果中可以看出，当排列方向被指定为水平方向排列时，行结果中可以看出，当排列方向被指定为水平方向排列时，3个元素的宽度为元素中内容的宽度，高度自动变为容器个元素的宽度为元素中内容的宽度，

19、高度自动变为容器的高度，当排列方向被指定为垂直方向排列时，的高度，当排列方向被指定为垂直方向排列时，3个元素个元素的高度为元素中内容的高度，宽度自动变为容器的宽度。的高度为元素中内容的高度，宽度自动变为容器的宽度。l【例【例17-11】元素宽度和高度的自适应。】元素宽度和高度的自适应。HTML5+CSS3网页设计基础教程第17章 网页布局第22页17.3.5 消除空白消除空白l本节针对上一节提出的空白问题，改用弹性盒布局来解决本节针对上一节提出的空白问题，改用弹性盒布局来解决，使得页面中多个元素的总宽度和总高度始终等于容器的，使得页面中多个元素的总宽度和总高度始终等于容器的宽度和高度。宽度和高

20、度。l【例【例17-12】消除空白。】消除空白。#a-area background-color:blue;#b-areabackground-color:yellowgreen;flex:1;#c-areabackground-color:green;HTML5+CSS3网页设计基础教程第17章 网页布局第23页17.3.6 灵活使用灵活使用flex属性属性l前面的示例都是只对一个元素使用前面的示例都是只对一个元素使用flex属性，使其宽度和属性，使其宽度和高度自动扩大，让浏览器和容器中所有元素的总宽度或总高度自动扩大，让浏览器和容器中所有元素的总宽度或总高度等于浏览器或容器的宽度或高度。在

21、高度等于浏览器或容器的宽度或高度。在CSS3中，也可中，也可以对多个元素使用以对多个元素使用flex属性，例如，下面的属性，例如，下面的【例例17-13】把把【例例17-12】的容器中的前两个的容器中的前两个div元素的样式代码都使元素的样式代码都使用用flex属性，元素排列方向为垂直排列。属性，元素排列方向为垂直排列。l详情见详情见【例例17-13】对多个元素使用对多个元素使用flex属性。属性。HTML5+CSS3网页设计基础教程第17章 网页布局第24页17.3.7 控制换行方向控制换行方向l使用使用flex-wrap属性来指定单行布局或多行布局。该属性属性来指定单行布局或多行布局。该属

22、性的取值有的取值有nowrap（不换行）、（不换行）、wrap（换行）和（换行）和wrap-reverse共共3种。种。l详情见详情见【例【例17-17】flex-wrap属性的使用。属性的使用。HTML5+CSS3网页设计基础教程第17章 网页布局第25页主要内容主要内容17.1 多栏布局多栏布局17.2 盒布局盒布局17.3 弹性盒布局弹性盒布局17.4 弹性盒布局的布局原理弹性盒布局的布局原理 17.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第17章 网页布局第26页17.4 弹性盒布局的布局原理弹性盒布局的布局原理 l17.4.1 弹性盒布局概述弹性盒布局概述l17.4

23、.2 justify-content属性属性l17.4.3 align-items属性属性HTML5+CSS3网页设计基础教程第17章 网页布局第27页17.4.1 弹性盒布局概述弹性盒布局概述l在使用弹性盒布局时，经常会用到以下专业术语，这些术在使用弹性盒布局时，经常会用到以下专业术语，这些术语的图形化表示如图所示。语的图形化表示如图所示。main-axis：进行布局时作为布局基准的轴，在横向布局时为水平：进行布局时作为布局基准的轴，在横向布局时为水平轴，在纵向布局时为垂直轴。轴，在纵向布局时为垂直轴。main-start/main-end：进行布局时的起点和终点。在横向布局时：进行布局时的

24、起点和终点。在横向布局时为容器的左端和右端，在纵向布局时为容器的顶端和底端。为容器的左端和右端，在纵向布局时为容器的顶端和底端。cross-axis：与：与main-axis垂直相交的轴，在横向布局时为垂直轴垂直相交的轴，在横向布局时为垂直轴，在纵向布局时为水平轴。，在纵向布局时为水平轴。cross-start/cross-end：cross-axis的起点和终点。在横向布局的起点和终点。在横向布局时为容器的顶端和底端，在纵向布局时为容器的左端和右端。时为容器的顶端和底端，在纵向布局时为容器的左端和右端。HTML5+CSS3网页设计基础教程第17章 网页布局第28页17.4.2 justify

25、-content属性属性l指定如何布局容器中除了子元素之外的指定如何布局容器中除了子元素之外的main-axis轴方向上的剩余空白部分。当轴方向上的剩余空白部分。当flex-grow属性属性值不为值不为0时，各子元素在时，各子元素在main-axis轴方向自动填轴方向自动填满容器，所以满容器，所以justify-content属性值无效。属性属性值无效。属性取值：取值：flex-start：从：从main-start开始布局所有子元素（默认值）。开始布局所有子元素（默认值）。flex-start：从：从main-end开始布局所有子元素。开始布局所有子元素。center：居中布局所有子元素。：

26、居中布局所有子元素。space-between：将第一个元素布局在：将第一个元素布局在main-start处，将最后一处，将最后一个元素布局在个元素布局在main-end处，将空白部分平均分配在所有子元素与处，将空白部分平均分配在所有子元素与子元素之间。子元素之间。space-around：将空白部分平均分配在以下几处，如：将空白部分平均分配在以下几处，如main-start与第一个子元素之间、各子元素与子元素之间、最后一个子元素与第一个子元素之间、各子元素与子元素之间、最后一个子元素与与main-end之间。之间。HTML5+CSS3网页设计基础教程第17章 网页布局第29页17.4.3 a

27、lign-items属性属性l指定如何布局容器中除了子元素之外的指定如何布局容器中除了子元素之外的cross-axis轴方向轴方向上的剩余空白部分。横向布局时，上的剩余空白部分。横向布局时，cross-axis轴方向为水轴方向为水平方向，纵向布局时平方向，纵向布局时cross-axis轴方向为垂直方向。轴方向为垂直方向。取值取值如下：如下：flex-start：默认值。从：默认值。从cross-start开始布局所有子元素。开始布局所有子元素。flex-start：从：从cross-end开始布局所有子元素。开始布局所有子元素。center：居中布局所有子元素。：居中布局所有子元素。space

28、-between：如果子元素的布局方向与容器的布局方向不一：如果子元素的布局方向与容器的布局方向不一致，则该值的作用等效于致，则该值的作用等效于flex-start属性值的作用；如果子元素的属性值的作用；如果子元素的布局方向与容器的布局方向保持一致，则所有子元素的内容沿基布局方向与容器的布局方向保持一致，则所有子元素的内容沿基线对齐。线对齐。space-around：同一行中的所有子元素高度被调整为最大。如果：同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度，则所有子元素高度被调整为最接近容器未指定任何子元素高度，则所有子元素高度被调整为最接近容器高度。高度。HTML5+CSS3

29、网页设计基础教程第17章 网页布局第30页主要内容主要内容17.1 多栏布局多栏布局17.2 盒布局盒布局17.3 弹性盒布局弹性盒布局17.4 弹性盒布局的布局原理弹性盒布局的布局原理 17.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第17章 网页布局第31页17.5 本章小结本章小结 l本章对本章对CSS3常用布局方式进行介绍，主要包括常用布局方式进行介绍，主要包括多栏布局和盒布局。这两种布局方式受到了多栏布局和盒布局。这两种布局方式受到了Firefox、Safari以及以及Chrome浏览器的支持。主浏览器的支持。主要内容包括掌握要内容包括掌握CSS3多栏布局功能的使用方法，多栏布局功能的使用方法，多栏布局的使用场合；多栏布局的使用场合；CSS3盒布局功能的使用盒布局功能的使用方法，盒布局的使用场合，以及盒布局和多栏布方法，盒布局的使用场合，以及盒布局和多栏布局的区别局的区别;CSS中弹性盒布局的基本概念以及使中弹性盒布局的基本概念以及使用方法；弹性盒布局的布局原理。用方法；弹性盒布局的布局原理。