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

第1页第17章网页布局本章概述本章的学习目标主要内容第1页第17章网页布局本章概述第2页本章概述Web页面布局是指对页面中的标题、导航栏、主要内容、脚注、表单等各种构成元素进行合理排版。过去的CSS版本主要使用float属性或position属性对页面中的元素进行布局，这些布局方法存在一些缺陷，譬如，如果两栏或多栏中元素的内容高度不同，底部难以对齐。CSS3追加了一些新的布局方式，克服了这些缺陷，还可以快捷地对页面中的元素做更复杂的布局。本章对CSS3常用布局方式进行介绍，主要包括多栏布局和盒布局。这两种布局方式受到了Firefox、Safari以及Chrome浏览器的支持。第2页本章概述Web页面布局是指对页面中的标题、导航栏、主要第3页本章的学习目标掌握CSS3多栏布局功能的使用方法，了解多栏布局的使用场合。掌握CSS3盒布局功能的使用方法，了解盒布局的使用场合，以及盒布局和多栏布局的区别。掌握CSS中弹性盒布局的基本概念以及使用方法。了解弹性盒布局的布局原理。第3页本章的学习目标掌握CSS3多栏布局功能的使用方法，了解第4页主要内容17.1多栏布局17.2盒布局17.3弹性盒布局17.4弹性盒布局的布局原理17.5本章小结第4页主要内容17.1多栏布局第5页17.1多栏布局17.1.1设置列宽和列数17.1.2设置列间距17.1.3设置列边框17.1.4设置跨列标题17.1.5统一列高第5页17.1多栏布局17.1.1设置列宽和列数第6页17.1.1设置列宽和列数column-width子属性用于给列定义一个最小的宽度。默认值为auto，表示将根据column-count子属性指定的数目计算列宽。column-count子属性用于指定文本显示的列数。实际应用中，通常将这两个参数放在columns中一起指定。例如，columns:auto4;就是图17-1所示的4栏效果，这行代码将div中的内容分成4列显示，根据div的宽度640px，均分列宽为160px（包括列间距的宽度）。第6页17.1.1设置列宽和列数column-width第7页17.1.2设置列间距默认情况下，浏览器根据列数和列宽来计算出列间距。但在实际项目中，默认列间距用得比较少，更多时候需要指定列间距。CSS3的多栏布局中，column-gap子属性用来指定列间距，默认值为normal，相当于1em。需要注意的是，如果column-gap与column-width加起来大于总宽度，就无法显示column-count指定的列数，会被浏览器自动调整列数和列宽。第7页17.1.2设置列间距默认情况下，浏览器根据列数和第8页17.1.3设置列边框由于浏览器宽度有限，当列数过多时，列与列之间的间隔会比较窄，密密麻麻的，不方便阅读。这时候可以在列与列之间设置一条边框线，使版面看起来更清晰。column-rule用于设置列的边框，类似于border，区别是不占用任何空间，因此设了column-rule不会导致列宽的变化。另外如果边框宽度大于column-gap列间距，将不会显示边框。column-rule的语法和border类似，例如，column-rule:1pxsolid#000;。第8页17.1.3设置列边框由于浏览器宽度有限，当列数过第9页17.1.4设置跨列标题在CSS3的多栏布局中，跨列显示通过column-span子属性来实现。column-span子属性有两个取值：默认值none表示不跨列，all表示跨越所有列。例如，文章标题可以设成all来跨列。第9页17.1.4设置跨列标题在CSS3的多栏布局中，跨第10页17.1.5统一列高column-fill子属性用于统一列高。默认值为auto，各列的高度随内容自动调整；当设置为balance时，所有列的高度都设为最高的列高。第10页17.1.5统一列高column-fill子属性第11页主要内容17.1多栏布局17.2盒布局17.3弹性盒布局17.4弹性盒布局的布局原理17.5本章小结第11页主要内容17.1多栏布局第12页17.2盒布局17.2.1CSS盒子模型17.2.2使用盒布局17.2.3盒布局和多栏布局的区别第12页17.2盒布局17.2.1CSS盒子模型第13页17.2.1CSS盒子模型所有HTML元素都可以看作盒子，在CSS中，“盒子模型”这一术语用在设计和布局中。CSS盒子模型本质上是一个盒子，用来封装HTML元素，包括边距、边框、填充和实际内容。盒子模型允许开发人员在其他元素和周围元素边框之间的空间放置元素。各部分的含义如下。Margin(外边距)：边框外的区域，外边距是透明的。Border(边框)：围绕在内边距和内容外的边框。Padding(内边距)：内容到边框之间的区域，内边距是透明的。Content(内容)：盒子的内容区域，显示文本和图像。第13页17.2.1CSS盒子模型所有HTML元素都可以第14页17.2.2使用盒布局在CSS3中，通过box属性来使用盒布局。在Firefox浏览器中，书写成-moz-box；在Chrome、Safari或Opera浏览器中，书写成-webkit-box。下面首先介绍使用传统float属性布局页面的缺陷，然后再介绍使用盒布局的好处。第14页17.2.2使用盒布局在CSS3中，通过box属第15页17.2.3盒布局和多栏布局的区别盒布局和多栏布局的区别在于：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。另外，使用多栏布局时，也不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容的时候，不适合用来安排整个网页中由各元素组成的网页结构的时候。第15页17.2.3盒布局和多栏布局的区别盒布局和多栏布第16页主要内容17.1多栏布局17.2盒布局17.3弹性盒布局17.4弹性盒布局的布局原理17.5本章小结第16页主要内容17.1多栏布局第17页17.3弹性盒布局17.3.1对多个元素使用flex属性17.3.2设置元素的显示顺序17.3.3设置元素的排列方向17.3.4定义宽高自适应17.3.5消除空白17.3.6灵活使用flex属性17.3.7控制换行方向第17页17.3弹性盒布局17.3.1对多个元素使用第18页17.3.1对多个元素使用flex属性在使用float属性或position属性时，需要使用包括负外边距（margin）在内的比较复杂的指定方法才能够达到这个要求，但是如果使用盒布局，只要使用一个flex属性，使盒布局变为弹性盒布局即可。【例17-8】使用弹性盒布局进行页面排版。第18页17.3.1对多个元素使用flex属性在使用fl第19页17.3.2设置元素的显示顺序使用弹性盒布局时，可以通过order属性来改变各元素的显示顺序。可以在每个元素的样式中加入order属性，该属性使用一个整数值表示，浏览器在显示元素的时候根据数值按从小到大排列。【例17-9】设置元素的显示顺序。第19页17.3.2设置元素的显示顺序使用弹性盒布局时，第20页17.3.3设置元素的排列方向使用弹性盒布局时，可以方便地指定多个元素的排列方向，主要使用flex-direction属性来实现。该属性的取值包括如下4种：row：默认值，横向排列。row-reverse：横向反向排列。column：纵向排列。column-reverse：纵向反向排列。【例17-10】改变元素的排列方向。第20页17.3.3设置元素的排列方向使用弹性盒布局时，第21页17.3.4定义宽高自适应使用盒布局时，元素的宽度和高度具有自适应性，即元素的宽度和高度可以根据排列方向的改变而改变。通过【例17-11】可以清楚的看出这特性。示例中有一个容器元素，元素中有3个div，只对容器元素指定了宽度和高度，从运行结果中可以看出，当排列方向被指定为水平方向排列时，3个元素的宽度为元素中内容的宽度，高度自动变为容器的高度，当排列方向被指定为垂直方向排列时，3个元素的高度为元素中内容的高度，宽度自动变为容器的宽度。【例17-11】元素宽度和高度的自适应。第21页17.3.4定义宽高自适应使用盒布局时，元素的宽第22页17.3.5消除空白本节针对上一节提出的空白问题，改用弹性盒布局来解决，使得页面中多个元素的总宽度和总高度始终等于容器的宽度和高度。【例17-12】消除空白。 #a-area{ background-color:blue; } #b-area{ background-color:yellowgreen; flex:1; } #c-area{ background-color:green; }第22页17.3.5消除空白本节针对上一节提出的空白问题第23页17.3.6灵活使用flex属性前面的示例都是只对一个元素使用flex属性，使其宽度和高度自动扩大，让浏览器和容器中所有元素的总宽度或总高度等于浏览器或容器的宽度或高度。在CSS3中，也可以对多个元素使用flex属性，例如，下面的【例17-13】把【例17-12】的容器中的前两个div元素的样式代码都使用flex属性，元素排列方向为垂直排列。详情见【例17-13】对多个元素使用flex属性。第23页17.3.6灵活使用flex属性前面的示例都是只第24页17.3.7控制换行方向使用flex-wrap属性来指定单行布局或多行布局。该属性的取值有nowrap（不换行）、wrap（换行）和wrap-reverse共3种。详情见【例17-17】flex-wrap属性的使用。第24页17.3.7控制换行方向使用flex-wrap属第25页主要内容17.1多栏布局17.2盒布局17.3弹性盒布局17.4弹性盒布局的布局原理17.5本章小结第25页主要内容17.1多栏布局第26页17.4弹性盒布局的布局原理17.4.1弹性盒布局概述17.4.2justify-content属性17.4.3align-items属性第26页17.4弹性盒布局的布局原理17.4.1弹第27页17.4.1弹性盒布局概述在使用弹性盒布局时，经常会用到以下专业术语，这些术语的图形化表示如图所示。main-axis：进行布局时作为布局基准的轴，在横向布局时为水平轴，在纵向布局时为垂直轴。main-start/main-end：进行布局时的起点和终点。在横向布局时为容器的左端和右端，在纵向布局时为容器的顶端和底端。cross-axis：与main-axis垂直相交的轴，在横向布局时为垂直轴，在纵向布局时为水平轴。cross-start/cross-end：cross-axis的起点和终点。在横向布局时为容器的顶端和底端，在纵向布局时为容器的左端和右端。第27页17.4.1弹性盒布局概述在使用弹性盒布局时，经第28页17.4.2justify-content属性指定如何布局容器中除了子元素之外的main-axis轴方向上的剩余空白部分。当flex-grow属性值不为0时，各子元素在main-axis轴方向自动填满容器，所以justify-content属性值无效。属性取值：flex-start：从main-start开始布局所有子元素（默认值）。flex-start：从main-end开始布局所有子元素。center：居中布局所有子元素。space-between：将第一个元素布局在main-start处，将最后一个元素布局在main-end处，将空白部分平均分配在所有子元素与子元素之间。space-around：将空白部分平均分配在以下几处，如main-start与第一个子元素之间、各子元素与子元素之间、最后一个子元素与main-end之间。第28页17.4.2justify-content属性指第29页17.4.3align-items属性指定如何布局容器中除了子元素之外的cross-axis轴方向上的剩余空白部分。横向布局时，cross-axis轴方向为水平方向，纵向布局时cross-axis轴方向为垂直方向。取值如下：flex-start：默认值。从cross-start开始布局所有子元素。flex-start：从cross-end开始布局所有子元素。center：居中布局所有子元素。space-between：如果子元素的布局方向与容器的布局方向不一致，则该值的作用等效于flex-start属性值的作用；如果子元素的布局方向与容器的布局方向保持一致，则所有子元素的内容沿基线对齐。space-around：同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度，则所有子元素高度被调整为最接近容器高度。第29页17.4.3align-items属性指定如何布第30页主要内容17.1多栏布局17.2盒布局17.3弹性盒布局17.4弹性盒布局的布局原理17.5本章小结第30页主要内容17.1多栏布局第31页17.5本章小结本章对CSS3常用布局方式进行介绍，主要包括多栏布局和盒布局。这两种布局方式受到了Firefox、Safari以及Chrome浏览器的支持。主要内容包括掌握CSS3多栏布局功能的使用方法，多栏布局的使用场合；CSS3盒布局功能的使用方法，盒布局的使用场合，以及盒布局和多栏布局的区别;

CSS中弹性盒布局的基本概念以及使用方法；弹性盒布局的布局原理。第31页17.5本章小结本章对CSS3常用布局方式进行第32页第17章网页布局本章概述本章的学习目标主要内容第1页第17章网页布局本章概述第33页本章概述Web页面布局是指对页面中的标题、导航栏、主要内容、脚注、表单等各种构成元素进行合理排版。过去的CSS版本主要使用float属性或position属性对页面中的元素进行布局，这些布局方法存在一些缺陷，譬如，如果两栏或多栏中元素的内容高度不同，底部难以对齐。CSS3追加了一些新的布局方式，克服了这些缺陷，还可以快捷地对页面中的元素做更复杂的布局。本章对CSS3常用布局方式进行介绍，主要包括多栏布局和盒布局。这两种布局方式受到了Firefox、Safari以及Chrome浏览器的支持。第2页本章概述Web页面布局是指对页面中的标题、导航栏、主要第34页本章的学习目标掌握CSS3多栏布局功能的使用方法，了解多栏布局的使用场合。掌握CSS3盒布局功能的使用方法，了解盒布局的使用场合，以及盒布局和多栏布局的区别。掌握CSS中弹性盒布局的基本概念以及使用方法。了解弹性盒布局的布局原理。第3页本章的学习目标掌握CSS3多栏布局功能的使用方法，了解第35页主要内容17.1多栏布局17.2盒布局17.3弹性盒布局17.4弹性盒布局的布局原理17.5本章小结第4页主要内容17.1多栏布局第36页17.1多栏布局17.1.1设置列宽和列数17.1.2设置列间距17.1.3设置列边框17.1.4设置跨列标题17.1.5统一列高第5页17.1多栏布局17.1.1设置列宽和列数第37页17.1.1设置列宽和列数column-width子属性用于给列定义一个最小的宽度。默认值为auto，表示将根据column-count子属性指定的数目计算列宽。column-count子属性用于指定文本显示的列数。实际应用中，通常将这两个参数放在columns中一起指定。例如，columns:auto4;就是图17-1所示的4栏效果，这行代码将div中的内容分成4列显示，根据div的宽度640px，均分列宽为160px（包括列间距的宽度）。第6页17.1.1设置列宽和列数column-width第38页17.1.2设置列间距默认情况下，浏览器根据列数和列宽来计算出列间距。但在实际项目中，默认列间距用得比较少，更多时候需要指定列间距。CSS3的多栏布局中，column-gap子属性用来指定列间距，默认值为normal，相当于1em。需要注意的是，如果column-gap与column-width加起来大于总宽度，就无法显示column-count指定的列数，会被浏览器自动调整列数和列宽。第7页17.1.2设置列间距默认情况下，浏览器根据列数和第39页17.1.3设置列边框由于浏览器宽度有限，当列数过多时，列与列之间的间隔会比较窄，密密麻麻的，不方便阅读。这时候可以在列与列之间设置一条边框线，使版面看起来更清晰。column-rule用于设置列的边框，类似于border，区别是不占用任何空间，因此设了column-rule不会导致列宽的变化。另外如果边框宽度大于column-gap列间距，将不会显示边框。column-rule的语法和border类似，例如，column-rule:1pxsolid#000;。第8页17.1.3设置列边框由于浏览器宽度有限，当列数过第40页17.1.4设置跨列标题在CSS3的多栏布局中，跨列显示通过column-span子属性来实现。column-span子属性有两个取值：默认值none表示不跨列，all表示跨越所有列。例如，文章标题可以设成all来跨列。第9页17.1.4设置跨列标题在CSS3的多栏布局中，跨第41页17.1.5统一列高column-fill子属性用于统一列高。默认值为auto，各列的高度随内容自动调整；当设置为balance时，所有列的高度都设为最高的列高。第10页17.1.5统一列高column-fill子属性第42页主要内容17.1多栏布局17.2盒布局17.3弹性盒布局17.4弹性盒布局的布局原理17.5本章小结第11页主要内容17.1多栏布局第43页17.2盒布局17.2.1CSS盒子模型17.2.2使用盒布局17.2.3盒布局和多栏布局的区别第12页17.2盒布局17.2.1CSS盒子模型第44页17.2.1CSS盒子模型所有HTML元素都可以看作盒子，在CSS中，“盒子模型”这一术语用在设计和布局中。CSS盒子模型本质上是一个盒子，用来封装HTML元素，包括边距、边框、填充和实际内容。盒子模型允许开发人员在其他元素和周围元素边框之间的空间放置元素。各部分的含义如下。Margin(外边距)：边框外的区域，外边距是透明的。Border(边框)：围绕在内边距和内容外的边框。Padding(内边距)：内容到边框之间的区域，内边距是透明的。Content(内容)：盒子的内容区域，显示文本和图像。第13页17.2.1CSS盒子模型所有HTML元素都可以第45页17.2.2使用盒布局在CSS3中，通过box属性来使用盒布局。在Firefox浏览器中，书写成-moz-box；在Chrome、Safari或Opera浏览器中，书写成-webkit-box。下面首先介绍使用传统float属性布局页面的缺陷，然后再介绍使用盒布局的好处。第14页17.2.2使用盒布局在CSS3中，通过box属第46页17.2.3盒布局和多栏布局的区别盒布局和多栏布局的区别在于：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。另外，使用多栏布局时，也不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容的时候，不适合用来安排整个网页中由各元素组成的网页结构的时候。第15页17.2.3盒布局和多栏布局的区别盒布局和多栏布第47页主要内容17.1多栏布局17.2盒布局17.3弹性盒布局17.4弹性盒布局的布局原理17.5本章小结第16页主要内容17.1多栏布局第48页17.3弹性盒布局17.3.1对多个元素使用flex属性17.3.2设置元素的显示顺序17.3.3设置元素的排列方向17.3.4定义宽高自适应17.3.5消除空白17.3.6灵活使用flex属性17.3.7控制换行方向第17页17.3弹性盒布局17.3.1对多个元素使用第49页17.3.1对多个元素使用flex属性在使用float属性或position属性时，需要使用包括负外边距（margin）在内的比较复杂的指定方法才能够达到这个要求，但是如果使用盒布局，只要使用一个flex属性，使盒布局变为弹性盒布局即可。【例17-8】使用弹性盒布局进行页面排版。第18页17.3.1对多个元素使用flex属性在使用fl第50页17.3.2设置元素的显示顺序使用弹性盒布局时，可以通过order属性来改变各元素的显示顺序。可以在每个元素的样式中加入order属性，该属性使用一个整数值表示，浏览器在显示元素的时候根据数值按从小到大排列。【例17-9】设置元素的显示顺序。第19页17.3.2设置元素的显示顺序使用弹性盒布局时，第51页17.3.3设置元素的排列方向使用弹性盒布局时，可以方便地指定多个元素的排列方向，主要使用flex-direction属性来实现。该属性的取值包括如下4种：row：默认值，横向排列。row-reverse：横向反向排列。column：纵向排列。column-reverse：纵向反向排列。【例17-10】改变元素的排列方向。第20页17.3.3设置元素的排列方向使用弹性盒布局时，第52页17.3.4定义宽高自适应使用盒布局时，元素的宽度和高度具有自适应性，即元素的宽度和高度可以根据排列方向的改变而改变。通过【例17-11】可以清楚的看出这特性。示例中有一个容器元素，元素中有3个div，只对容器元素指定了宽度和高度，从运行结果中可以看出，当排列方向被指定为水平方向排列时，3个元素的宽度为元素中内容的宽度，高度自动变为容器的高度，当排列方向被指定为垂直方向排列时，3个元素的高度为元素中内容的高度，宽度自动变为容器的宽度。【例17-11】元素宽度和高度的自适应。第21页17.3.4定义宽高自适应使用盒布局时，元素的宽第53页17.3.5消除空白本节针对上一节提出的空白问题，改用弹性盒布局来解决，使得页面中多个元素的总宽度和总高度始终等于容器的宽度和高度。【例17-12】消除空白。 #a-area{ background-color:blue; } #b-area{ background-color:yellowgreen; flex:1; } #c-area{ background-color:green; }第22页17.3.5消除空白本节针对上一节提出的空白问题第54页17.3.6灵活使用flex属性前面的示例都是只对一个元素使用flex属性，使其宽度和高度自动扩大，让浏览器和容器中所有元素的总宽度或总高度等于浏览器或容器的宽度或高度。在CSS3中，也可以对多个元素使用flex属性，例如，下面的【例17-13】把【例17-12】的容器中的前两个div元素的样式代码都使用flex属性，元素排列方向为垂直排列。详情见【例17-13】对多个元素使用flex属性。第23页17.3.6灵活使用flex属性前面的示例都是只第55页17.3.7控制换行方向使用flex-wrap属性来指定单行布局或多行布局。该属性的取值有nowrap（不换行）、wrap（换行）和wrap-reverse共3种。详情见【例17-17】flex-wrap属性的使用。第24页17.3.7控制换行方向使用flex-wrap属第56页主要内容17.1多栏布局17.2盒布局17.3弹性盒布局17.4弹性盒布局的布局原理17.5本章小结第25页主要内容17.1多栏布局第57页17.4弹性盒布局的布局原理17.4.1弹性盒布局概述17.4.2justify-content属性17.4.3align-items属性第26页17.4弹性盒布局的布局原理17.4.1弹第58页17.4.1弹性盒布局概述在使用弹性盒布局时，经常会用到以下专业术语，这些术语的图形化表示如图所示。main-axis：进行布局时作为布局基准的轴，在横向布局时为水平轴，在纵向布局时为垂直轴。main-start/main-end：进行布局时的起点和终点。在横向布局时为容器的左端和右端，在纵向布局时为容器的顶端和底端。cross-axis：与main-axis垂直相交的轴，在横向布局时为垂直轴，在纵向布局时为水平轴。cross-start/cross-end：cross-axis