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