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

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