HTML+CSS+JavaScript网页设计-第10章-网页布局.ppt

1、HTML+CSS+JavaScript网页设计第10章网页布局第1页第第10章网页布局章网页布局本章概述 本章的学习目标主要内容HTML+CSS+JavaScript网页设计第10章网页布局第2页本章概述本章概述l好的网页一定有一个好的布局，网页布局是指对页面好的网页一定有一个好的布局，网页布局是指对页面中的标题、导航栏、主要内容、脚注、表单等各种构中的标题、导航栏、主要内容、脚注、表单等各种构成元素进行合理地排版。使用成元素进行合理地排版。使用CSS布局可以有很多方布局可以有很多方法，本章主要介绍了多列布局、盒子的浮动与定位，法，本章主要介绍了多列布局、盒子的浮动与定位，以及弹性盒布局。实际

2、开发中，一些复杂的网页可能以及弹性盒布局。实际开发中，一些复杂的网页可能会用到不止一种布局，通常是先整体使用一种布局设会用到不止一种布局，通常是先整体使用一种布局设计，在局部可以使用另一种布局方式。通过本章的学计，在局部可以使用另一种布局方式。通过本章的学习读者应掌握使用习读者应掌握使用CSS对网页进行布局的常用方法，对网页进行布局的常用方法，深入了解盒子模型的设计思想和弹性盒布局的基本原深入了解盒子模型的设计思想和弹性盒布局的基本原理，能够对页面元素进行合理的排版布局。理，能够对页面元素进行合理的排版布局。HTML+CSS+JavaScript网页设计第10章网页布局第3页本章的学习目标本章

3、的学习目标l掌握多列布局相关的掌握多列布局相关的CSS属性的用法属性的用法l进一步了解盒子模型的设计思想进一步了解盒子模型的设计思想l掌握掌握position属性的设置几种定位方式属性的设置几种定位方式l理解理解z-index属性的作用属性的作用l掌握掌握float属性的基本用法属性的基本用法l理解弹性盒布局中弹性容器和弹性子元素的关系理解弹性盒布局中弹性容器和弹性子元素的关系l掌握弹性盒子的常用属性掌握弹性盒子的常用属性l掌握弹性子元素属性的用法掌握弹性子元素属性的用法HTML+CSS+JavaScript网页设计第10章网页布局第4页主要内容主要内容10.1 多列布局多列布局10.2 使用

4、使用CSS定位与布局定位与布局10.3 弹性盒布局弹性盒布局10.4 本章小结本章小结10.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第10章网页布局第5页10.1 多列布局多列布局l在在CSS 3多列布局功能出现之前，如果想多列布局功能出现之前，如果想让文本呈多列显示，要么使用绝对定位，让文本呈多列显示，要么使用绝对定位，手动给文本分段落，要么使用手动给文本分段落，要么使用JavaScript脚本进行控制。脚本进行控制。lCSS 3中新增的多列功能是对传统网页中中新增的多列功能是对传统网页中块状布局模式的有力扩充。顾名思义，多块状布局模式的有力扩充。顾名思义，多列

5、布局功能可以方便开发人员将文本排版列布局功能可以方便开发人员将文本排版成多列，实现报纸那样的多栏效果成多列，实现报纸那样的多栏效果HTML+CSS+JavaScript网页设计第10章网页布局第6页设置列宽和列数设置列宽和列数lcolumn-width属性用于给列定义最小宽度属性用于给列定义最小宽度。默认值为。默认值为auto，表示将根据，表示将根据column-count属性指定的列数自动计算列宽。属性指定的列数自动计算列宽。column-count属性用于指定文本显示的列属性用于指定文本显示的列数。数。l在实际应用中，通常简写形式在实际应用中，通常简写形式columns，一起指定这两个属性

6、的值。一起指定这两个属性的值。HTML+CSS+JavaScript网页设计第10章网页布局第7页设置列间距设置列间距l默认情况下，浏览器根据列数和列宽来计默认情况下，浏览器根据列数和列宽来计算出列间距。但在实际项目中，默认列间算出列间距。但在实际项目中，默认列间距用得比较少，更多时候需要指定列间距距用得比较少，更多时候需要指定列间距。这就用到了。这就用到了column-gap属性，该属性的属性，该属性的默认值为默认值为normal，相当于，相当于1em。需要注意。需要注意的是，如果的是，如果column-gap与与column-width加起来大于总宽度，就无法显示加起来大于总宽度，就无法显

7、示column-count指定的列数，会由浏览器自动调整列指定的列数，会由浏览器自动调整列数和列宽。数和列宽。HTML+CSS+JavaScript网页设计第10章网页布局第8页设置列边框设置列边框l由于浏览器宽度有限，当列数过多时，列与列之间的由于浏览器宽度有限，当列数过多时，列与列之间的间隔就会比较窄，不方便阅读。这时可以在列与列之间隔就会比较窄，不方便阅读。这时可以在列与列之间设置一条边框线，使版面看起来更清晰。间设置一条边框线，使版面看起来更清晰。lcolumn-rule用于设置列边框，类似于用于设置列边框，类似于border属性，属性，所不同的是这个列边框不占用任何空间，因此设置所不

8、同的是这个列边框不占用任何空间，因此设置column-rule不会导致列宽的变化。它也包含不会导致列宽的变化。它也包含3个子个子属性：属性：column-rule-width、column-rule-style和和column-rule-color，分别用来设置列之间边框的宽，分别用来设置列之间边框的宽度、样式和颜色。度、样式和颜色。l边框的宽度通常需要小于边框的宽度通常需要小于column-gap属性的值，否属性的值，否则可能会导致边框覆盖部分文字。则可能会导致边框覆盖部分文字。HTML+CSS+JavaScript网页设计第10章网页布局设置跨列标题设置跨列标题l很多时候，一篇文章需要以多

9、栏的方式显很多时候，一篇文章需要以多栏的方式显示内容，但有共同的标题，而标题不属于示内容，但有共同的标题，而标题不属于任何一列，标题是所有内容的标题。因此任何一列，标题是所有内容的标题。因此，在排版时，需要将标题放在顶部并跨列，在排版时，需要将标题放在顶部并跨列显示。这可以通过跨列属性显示。这可以通过跨列属性column-span来实现。来实现。lcolumn-span属性有两个取值：默认值属性有两个取值：默认值none表示不跨列，表示不跨列，all表示跨越所有列。例表示跨越所有列。例如，文章标题可以设成如，文章标题可以设成all来跨列。来跨列。第9页HTML+CSS+JavaScript网页

10、设计第10章网页布局统一列高统一列高lcolumn-fill属性用于统一列高。默认值为属性用于统一列高。默认值为auto，各列的高度随内容自动调整；它还，各列的高度随内容自动调整；它还有另外一个值有另外一个值balance，当设置为，当设置为balance时，所有列的高度都设为最高的列高。时，所有列的高度都设为最高的列高。第10页HTML+CSS+JavaScript网页设计第10章网页布局第11页主要内容主要内容10.1 多列布局多列布局10.2 使用使用CSS定位与布局定位与布局10.3 弹性盒布局弹性盒布局10.4 本章小结本章小结10.5 思考和练习思考和练习HTML+CSS+Java

11、Script网页设计第10章网页布局10.2 使用使用CSS定位与布局定位与布局l在在CSS中，一共有三种常用的中，一共有三种常用的“定位方案定位方案”(positioning scheme)用来布局页面中的元素用来布局页面中的元素：normal、float以及以及absolute。l默认情况下，元素使用默认情况下，元素使用“正常流正常流”(normal)或或“静态流静态流”(static flow)在页面中进行布局。在正常在页面中进行布局。在正常流中，页面中的块级元素从顶部向底部流动流中，页面中的块级元素从顶部向底部流动(记住记住每个块级元素都以独占一个新行的形式出现每个块级元素都以独占一个

12、新行的形式出现)，而，而行内元素则从左向右流动行内元素则从左向右流动(因为它们不会从新行开因为它们不会从新行开始显示始显示)。第12页HTML+CSS+JavaScript网页设计第10章网页布局第13页position属性属性lposition的中文含义是位置、状态。该属性有如下的中文含义是位置、状态。该属性有如下4个可个可能的取值：能的取值：static：与正常流相同，并且为默认值。因此实际使用该属性时，：与正常流相同，并且为默认值。因此实际使用该属性时，很少会指定此值。很少会指定此值。relative：盒子的位置可以相对其在正常流中的位置出现偏移，对：盒子的位置可以相对其在正常流中的位置

13、出现偏移，对象不可层叠，将根据象不可层叠，将根据left、right、top和和bottom等属性的值在正常等属性的值在正常流这偏移。流这偏移。absolute：将盒子对象从正常流中拖出，完全使用：将盒子对象从正常流中拖出，完全使用width、height、left、right、top、bottom等属性进行绝对定位，绝对定等属性进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。其层叠通过位的元素可以有边界，但这些边界不压缩。其层叠通过z-index属属性定义。性定义。fixed：固定在屏幕的某个位置，位置通过：固定在屏幕的某个位置，位置通过left、top、right和和bottom

14、属性指定，并且不随用户滚动窗口而改变位置。属性指定，并且不随用户滚动窗口而改变位置。HTML+CSS+JavaScript网页设计第10章网页布局第14页盒子偏移属性盒子偏移属性l当盒子的当盒子的position属性的值为属性的值为relative、absolute或或fixed时，它们同时会使用时，它们同时会使用“盒子偏移盒子偏移”属性指属性指定盒子应如何定位，盒子偏移属性的含义如下；定盒子应如何定位，盒子偏移属性的含义如下；top：指定元素的顶部边缘。该属性定义了一个定位元素的上外指定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。边距边界与其包含块上边界

15、之间的偏移。left：指定元素的左边缘。该属性定义了定位元素左外边距边界与：指定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。其包含块左边界之间的偏移。bottom：对于绝对定位元素，：对于绝对定位元素，bottom属性设置单位高于属性设置单位高于/低于包低于包含它的元素的底边；对于相对定位元素，含它的元素的底边；对于相对定位元素，bottom属性设置单位高属性设置单位高于于/低于其正常位置的元素的底边。低于其正常位置的元素的底边。right：指定元素的右边缘。该属性定义了定位元素右外边距边界：指定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的

16、偏移。与其包含块右边界之间的偏移。HTML+CSS+JavaScript网页设计第10章网页布局第15页相对定位相对定位l相对定位能够将盒子移动到与其在正常流中相对定位能够将盒子移动到与其在正常流中的位置相关联的某个位置。例如，将一个盒的位置相关联的某个位置。例如，将一个盒子从其在正常流中应该出现的位置下移子从其在正常流中应该出现的位置下移30像像素，或右移素，或右移100像素。它将会根据盒子偏移像素。它将会根据盒子偏移属性从其在正常流中的位置进行转移。属性从其在正常流中的位置进行转移。l当容器的当容器的position属性为属性为relative时，就是对时，就是对该盒子应用相对定位，使用相

17、对定位的盒子该盒子应用相对定位，使用相对定位的盒子的的top、bottom、left和和right属性的参照对属性的参照对象是其父容器的象是其父容器的4条边框，而不是浏览器窗口条边框，而不是浏览器窗口。HTML+CSS+JavaScript网页设计第10章网页布局第16页绝对定位绝对定位l绝对定位是使用最广泛的一种定位方案，它能够精绝对定位是使用最广泛的一种定位方案，它能够精准地将元素移动到想要的位置。使用绝对定位的方准地将元素移动到想要的位置。使用绝对定位的方法是将法是将position属性设置为属性设置为absolute，然后可以使，然后可以使用盒子偏移属性对其进行需要的定位。用盒子偏移属

18、性对其进行需要的定位。l需要注意的是，因为绝对定位的盒子被从正常流中需要注意的是，因为绝对定位的盒子被从正常流中取出，即使两个垂直外边距相遇，它们的外边距也取出，即使两个垂直外边距相遇，它们的外边距也不会折叠。不会折叠。l绝对定位的元素总是出现在相对定位元素之上，除绝对定位的元素总是出现在相对定位元素之上，除非使用非使用z-index属性进行设置。属性进行设置。HTML+CSS+JavaScript网页设计第10章网页布局第17页固定定位固定定位lposition属性中需要了解的最后一个值是属性中需要了解的最后一个值是fixed。此值指定不仅元素的内容应完全从正。此值指定不仅元素的内容应完全从

19、正常流中移除，该盒子在用户上下滚动页面时常流中移除，该盒子在用户上下滚动页面时也不应该移动。也不应该移动。l这里的固定定位是指元素的位置相对于浏览这里的固定定位是指元素的位置相对于浏览器窗口是固定位置。器窗口是固定位置。HTML+CSS+JavaScript网页设计第10章网页布局第18页z-index属性属性lz-index属性是针对网页显示中的一个特殊属性。因为显示属性是针对网页显示中的一个特殊属性。因为显示器显示的图案是一个二维平面，用器显示的图案是一个二维平面，用x轴和轴和y轴来表示位置属性轴来表示位置属性。为了表示三维立体中的层叠顺序，引入了。为了表示三维立体中的层叠顺序，引入了z-

20、index属性表属性表示两个元素示两个元素z轴的不同，从而表示元素在叠加顺序上的立体轴的不同，从而表示元素在叠加顺序上的立体关系。关系。l使用绝对和相对定位的元素经常会与其他元素出现重叠。当使用绝对和相对定位的元素经常会与其他元素出现重叠。当发生这种情况时，默认的行为是第一个元素位于后来元素之发生这种情况时，默认的行为是第一个元素位于后来元素之下。这被称作下。这被称作“堆叠上下文堆叠上下文”(stacking context)。z-index属性就用来指定重叠部分的上下层关系。属性就用来指定重叠部分的上下层关系。lz-index属性的值是一个数字，数字的值越大就越接近元素属性的值是一个数字，数

21、字的值越大就越接近元素显示位置的顶部显示位置的顶部(例如，一个例如，一个z-index值为值为10的元素会出现于的元素会出现于z-index值为值为5的元素之上的元素之上)。HTML+CSS+JavaScript网页设计第10章网页布局第19页float属性属性lfloat属性能够将某个元素从正常流中抽取出来，并将其尽可属性能够将某个元素从正常流中抽取出来，并将其尽可能远地放置在包含盒子的左侧或右侧。包含元素中的其他内能远地放置在包含盒子的左侧或右侧。包含元素中的其他内容则会围绕关联有容则会围绕关联有float属性的元素进行流动属性的元素进行流动(就如文本与其就如文本与其他元素能够围绕图片流动

22、一样他元素能够围绕图片流动一样)。lfloat属性的最初目的是实现图文混排，使文本围绕在图像周属性的最初目的是实现图文混排，使文本围绕在图像周围，不过在围，不过在CSS中，任何元素都可以浮动。浮动元素会生成中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。一个块级框，而不论它本身是何种元素。l当为一个元素指定当为一个元素指定float属性时，必须设置属性时，必须设置width属性以指定属性以指定盒子应该占据的宽度。否则，它将自动占据包含盒子盒子应该占据的宽度。否则，它将自动占据包含盒子100%的宽度，不会给围绕它流动的内容留任何空间，从而使该元的宽度，不会给围绕它流动的

23、内容留任何空间，从而使该元素显示的效果如同一个普通的块级元素。素显示的效果如同一个普通的块级元素。HTML+CSS+JavaScript网页设计第10章网页布局第20页float属性属性l使用使用float属性，除了可以建立网页的横向多列布局属性，除了可以建立网页的横向多列布局，还可以实现许多其他的网页内容的布局。该属性，还可以实现许多其他的网页内容的布局。该属性的可取值有如下几个：的可取值有如下几个：none：默认值，盒子不发生浮动，并保持在正常流中应：默认值，盒子不发生浮动，并保持在正常流中应处于的位置。处于的位置。left：盒子浮动到包含元素的左侧，而包含元素的其他内：盒子浮动到包含元素

24、的左侧，而包含元素的其他内容浮动至其右侧。容浮动至其右侧。right：盒子浮动到包含元素的右侧，而包含元素的其他：盒子浮动到包含元素的右侧，而包含元素的其他内容浮动至其左侧。内容浮动至其左侧。inherit：从父元素继承该属性的值。：从父元素继承该属性的值。HTML+CSS+JavaScript网页设计第10章网页布局第21页clear属性属性lclear属性定义了元素的哪边上不允许出现浮属性定义了元素的哪边上不允许出现浮动元素。在动元素。在CSS 1和和CSS 2中，这是通过自中，这是通过自动为清除元素动为清除元素(即设置了即设置了clear属性的元素属性的元素)增增加上外边距实现的。在加上

25、外边距实现的。在CSS 2.1中，会在元中，会在元素上外边距之上增加清除空间，而外边距本素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。下外边距边界之下。HTML+CSS+JavaScript网页设计第10章网页布局第22页clear属性属性lclear属性的可取值如下：属性的可取值如下：left：具有：具有clear属性的元素在其左侧不能有任何属性的元素在其左

26、侧不能有任何内容。内容。right：有：有clear属性的元素在其右侧不能有任何属性的元素在其右侧不能有任何内容。内容。both：clear属性的元素在其左右两侧都不能有属性的元素在其左右两侧都不能有任何内容。任何内容。none：默认值，允许两侧出现浮动内容。：默认值，允许两侧出现浮动内容。HTML+CSS+JavaScript网页设计第10章网页布局第23页主要内容主要内容10.1 多列布局多列布局10.2 使用使用CSS定位与布局定位与布局10.3 弹性盒布局弹性盒布局10.4 本章小结本章小结10.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第10章网页布局第2

27、4页10.3 弹性盒布局弹性盒布局l在实际项目中，网站的布局要比我们想象的复杂在实际项目中，网站的布局要比我们想象的复杂，光靠前面介绍的多栏布局和盒布局还远远不够，光靠前面介绍的多栏布局和盒布局还远远不够。本节将介绍一种。本节将介绍一种CSS 3中新增的一种布局方式中新增的一种布局方式弹性盒布局。弹性盒布局。lCSS 3弹性盒弹性盒(Flexible Box或或flexbox)是一整套是一整套布局规范，是一种当页面需要适应不同的屏幕大布局规范，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提

28、供一种局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。列、对齐和分配空白空间。HTML+CSS+JavaScript网页设计第10章网页布局第25页定义弹性容器定义弹性容器l弹性盒子由弹性容器弹性盒子由弹性容器(Flex container)和弹性子元和弹性子元素素(Flex item)组成。弹性容器通过设置组成。弹性容器通过设置display属属性的值为性的值为flex将其定义为弹性容器。将其定义为弹性容器。l弹性容器内包含了一个或多个弹性子元素。弹性弹性容器内包含了一个或多个弹性子元素。弹

29、性容器外及弹性子元素内是正常渲染的。弹性盒子容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。每个容器只有一行。HTML+CSS+JavaScript网页设计第10章网页布局第26页弹性盒子属性弹性盒子属性l弹性盒布局包含多个弹性盒布局包含多个CSS属性，包括弹性属性，包括弹性盒子属性和弹性子元素属性两类，盒子属性和弹性子元素属性两类，HTML+CSS+JavaScript网页设计第10章网页布局第27页flex-di

30、rection属性属性lflex-direction属性规定灵活项目的方向。如果元属性规定灵活项目的方向。如果元素不是弹性盒对象的元素，则素不是弹性盒对象的元素，则 flex-direction属性属性不起作用。不起作用。row：默认值。元素将水平显示，正如一个行一样。：默认值。元素将水平显示，正如一个行一样。row-reverse：与：与row相同，但是以相反的顺序显示。相同，但是以相反的顺序显示。column：元素将垂直显示，正如一个列一样。：元素将垂直显示，正如一个列一样。column-reverse：与：与column相同，但从后往前排，相同，但从后往前排，最后一项排在最上面。最后一项

31、排在最上面。HTML+CSS+JavaScript网页设计第10章网页布局第28页flex-wrap属性属性lflex-wrap属性规定属性规定flex容器是单行或者多容器是单行或者多行，同时横轴的方向决定了新行堆叠的方行，同时横轴的方向决定了新行堆叠的方向。该属性的可取值如下：向。该属性的可取值如下：nowrap：默认值，弹性容器为单行，弹性子：默认值，弹性容器为单行，弹性子项可能会溢出容器，如图项可能会溢出容器，如图10-17所示。所示。wrap：弹性容器为多行。弹性子项溢出的部：弹性容器为多行。弹性子项溢出的部分会被放置到新行，子项内部会发生断行。分会被放置到新行，子项内部会发生断行。w

32、rap-reverse：与：与wrap类似，但是顺序相反类似，但是顺序相反。HTML+CSS+JavaScript网页设计第10章网页布局第29页flex-flow 属性属性lflex-flow属性是属性是flex-direction属性和属性和flex-wrap属性的简写形式，默认值为属性的简写形式，默认值为row nowrap。HTML+CSS+JavaScript网页设计第10章网页布局第30页align-items属性属性lalign-items属性定义属性定义flex子元素在子元素在flex容器容器的当前行的侧轴的当前行的侧轴(纵轴纵轴)方向上的对齐方式。方向上的对齐方式。lalig

33、n-items属性的可取值如下：属性的可取值如下：stretch：默认值。子元素被拉伸以适应：默认值。子元素被拉伸以适应容器。容器。center：子元素位于容器的中心。：子元素位于容器的中心。flex-start：子元素位于容器的开头。：子元素位于容器的开头。flex-end：子元素位于容器的结尾。：子元素位于容器的结尾。baseline：子元素位于容器的基线上。：子元素位于容器的基线上。HTML+CSS+JavaScript网页设计第10章网页布局第31页justify-conten属性属性ljustify-conten属性用于设置或检索弹性盒子元素在主轴属性用于设置或检索弹性盒子元素在主轴

34、(横轴横轴)方向上方向上的对齐方式。的对齐方式。justify-conten属性的可取值如下：属性的可取值如下：flex-start：默认值，弹性子元素向行头紧挨着填充。第一个弹性子元素的：默认值，弹性子元素向行头紧挨着填充。第一个弹性子元素的main-start外边距边线被放置在该行的外边距边线被放置在该行的main-start边线，后续弹性项依次平齐摆放。边线，后续弹性项依次平齐摆放。flex-end：弹性子元素向行尾紧挨着填充。第一个弹性子元素的：弹性子元素向行尾紧挨着填充。第一个弹性子元素的main-end外边距外边距边线被放置在该行的边线被放置在该行的main-end边线，后续弹性项

35、依次平齐摆放。边线，后续弹性项依次平齐摆放。center：弹性子元素居中紧挨着填充。如果剩余的自由空间是负的，则弹性子元：弹性子元素居中紧挨着填充。如果剩余的自由空间是负的，则弹性子元素将在两个方向上同时溢出。素将在两个方向上同时溢出。space-between：弹性子元素平均分布在该行上。如果剩余空间为负或者只有一：弹性子元素平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于个弹性项，则该值等同于flex-start。否则，第。否则，第1个弹性子元素的外边距和行的个弹性子元素的外边距和行的main-start边线对齐，而最后边线对齐，而最后1个弹性项的外边距和行的个弹性项的外

36、边距和行的main-end边线对齐，然边线对齐，然后剩余的弹性项分布在该行上，相邻子元素的间隔相等。后剩余的弹性项分布在该行上，相邻子元素的间隔相等。space-around：弹性子元素平均分布在该行上，两边留有一半的间隔空间。如果：弹性子元素平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性子元素沿。否则，弹性子元素沿该行分布，且彼此间隔相等，同时首尾两边和弹性容器之间留有一半的间隔该行分布，且彼此间隔相等，同时首尾两边和弹性容器之间留有一半的间隔(如子如子元素间隔为元素间隔为20px

37、，则首尾两边与容器之间间隔为，则首尾两边与容器之间间隔为1/2*20px=10px)。HTML+CSS+JavaScript网页设计第10章网页布局order属性属性l使用弹性盒布局时，可以通过使用弹性盒布局时，可以通过order属性来属性来改变各元素的显示顺序。可以在每个元素改变各元素的显示顺序。可以在每个元素的样式中加入的样式中加入order属性，浏览器在显示元属性，浏览器在显示元素的时候将根据素的时候将根据order属性的值，按从小到属性的值，按从小到大的顺序排列。该属性的默认值为大的顺序排列。该属性的默认值为0，且可，且可以为负值。以为负值。第32页HTML+CSS+JavaScrip

38、t网页设计第10章网页布局flex-grow属性属性lflex-grow属性用于设置或检索弹性盒子的属性用于设置或检索弹性盒子的扩展比率。默认值为扩展比率。默认值为0。例如，下面的规则。例如，下面的规则将第二个元素的宽度为其他元素的三倍：将第二个元素的宽度为其他元素的三倍：div:nth-of-type(1)flex-grow:1;div:nth-of-type(2)flex-grow:3;div:nth-of-type(3)flex-grow:1;第33页HTML+CSS+JavaScript网页设计第10章网页布局flex-shrink属性属性lflex-shrink属性指定了属性指定了f

39、lex元素的收缩规则。元素的收缩规则。flex元素仅元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据大小是依据flex-shrink的值。的值。lflex-shrink属性和属性和flex-grow属性的区别在于：当元素排属性的区别在于：当元素排列方向为横向排列时，如果子元素的列方向为横向排列时，如果子元素的width属性值之和小属性值之和小于容器元素的宽度，就必须通过于容器元素的宽度，就必须通过flex-grow属性来调整子属性来调整子元素的宽度；如果子元素的元素的宽度；如果子元素的width属性值之和大于容器元属性值之和大

40、于容器元素的宽度，就必须通过素的宽度，就必须通过flex-shrink属性来调整子元素的宽属性来调整子元素的宽度；当元素排列方向为纵向排列时，如果子元素的度；当元素排列方向为纵向排列时，如果子元素的height属性值之和小于容器元素的高度，就必须通过属性值之和小于容器元素的高度，就必须通过flex-grow属性来调整子元素的高度；如果子元素的属性来调整子元素的高度；如果子元素的height属性值之属性值之和大于容器元素的高度，就必须通过和大于容器元素的高度，就必须通过flex-shrink属性来调属性来调整子元素的高度。整子元素的高度。第34页HTML+CSS+JavaScript网页设计第1

41、0章网页布局flex-basis属性属性lflex-basis属性用于设置或检索弹性盒伸缩属性用于设置或检索弹性盒伸缩基准值。默认值为基准值。默认值为auto，长度等于元素的，长度等于元素的长度。如果该元素未指定长度，则长度将长度。如果该元素未指定长度，则长度将根据内容决定。其值通常是一个长度单位根据内容决定。其值通常是一个长度单位或者一个百分比。或者一个百分比。第35页HTML+CSS+JavaScript网页设计第10章网页布局flex属性属性lflex属性用于设置或检索弹性盒模型对象的属性用于设置或检索弹性盒模型对象的子元素如何分配空间。该属性是子元素如何分配空间。该属性是flex-gr

42、ow、flex-shrink和和flex-basis属性的简写属性属性的简写属性。默认值为。默认值为“0 1 auto”，后两个属性可选，后两个属性可选l该属性还有两个快捷值：该属性还有两个快捷值：auto(与与1 1 auto相同相同)和和none(与与0 0 auto相同相同)。建议优先。建议优先使用这个属性，而不是单独写使用这个属性，而不是单独写3个分离的属个分离的属性，因为浏览器会推算相关值。性，因为浏览器会推算相关值。第36页HTML+CSS+JavaScript网页设计第10章网页布局第37页align-self属性属性lalign-self属性允许单属性允许单个子元素有与其他子元

43、个子元素有与其他子元素不一样的对齐方式，素不一样的对齐方式，可覆盖可覆盖align-items属属性。默认值为性。默认值为auto，表示继承父元素的表示继承父元素的align-items属性，如属性，如果没有父元素，则等同果没有父元素，则等同于于stretch。HTML+CSS+JavaScript网页设计第10章网页布局第38页主要内容主要内容10.1 多列布局多列布局10.2 使用使用CSS定位与布局定位与布局10.3 弹性盒布局弹性盒布局10.4 本章小结本章小结10.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第10章网页布局第39页10.4 本章小结本章小结

44、 l本章主要介绍了使用本章主要介绍了使用CSS进行网页布局的方法，包括多列进行网页布局的方法，包括多列布局、盒子的浮动和定位以及弹性盒布局。首先介绍的是布局、盒子的浮动和定位以及弹性盒布局。首先介绍的是多列布局，多列布局是多列布局，多列布局是CSS 3新增的功能，只需几个简单新增的功能，只需几个简单的的CSS属性设置，即可实现报纸那样的多栏效果；然后讲属性设置，即可实现报纸那样的多栏效果；然后讲述了述了CSS的定位与布局，主要是的定位与布局，主要是position和和float属性的使属性的使用，这两个属性也是用，这两个属性也是CSS布局中用的最广泛的属性；最后布局中用的最广泛的属性；最后讲述

45、了讲述了CSS 3新增的弹性盒布局，包括弹性盒子属性和弹新增的弹性盒布局，包括弹性盒子属性和弹性子元素属性的使用，引入弹性盒布局模型的目的是提供性子元素属性的使用，引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。通过本章的学习，读者应掌握使用对齐和分配空白空间。通过本章的学习，读者应掌握使用CSS进行网页布局的各种方法，在合适的场合使用正确的进行网页布局的各种方法，在合适的场合使用正确的布局方式。布局方式。HTML+CSS+JavaScript网页设计第10章网页布局第40页主要内容主要内容1

46、0.1 多列布局多列布局10.2 使用使用CSS定位与布局定位与布局10.3 弹性盒布局弹性盒布局10.4 本章小结本章小结10.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第10章网页布局第41页10.5 思考和练习思考和练习 l1.column-width属性值为属性值为auto，表示将根据，表示将根据 属性指定的列数自属性指定的列数自动计算列宽。动计算列宽。l2.column-rule用于设置列边框，类似于用于设置列边框，类似于border属性，所不同的是这属性，所不同的是这个列边框不占用任何空间，它也包含个列边框不占用任何空间，它也包含3个子属性：个子属性：、

47、和和 。l3.在多列布局中，要实现标题跨列显示，可以使用在多列布局中，要实现标题跨列显示，可以使用 属性。属性。l4.在在CSS布局中，布局中，position属性是一个使用较多的重要属性，很多特属性是一个使用较多的重要属性，很多特殊容器的定位必须使用殊容器的定位必须使用position来完成。该属性有来完成。该属性有4个可能的取值：个可能的取值：static、和和 。l5.盒子的浮动使用的是什么属性？该属性有几个取值，分别是什么含盒子的浮动使用的是什么属性？该属性有几个取值，分别是什么含义？义？l6.使用浮动盒子时，如果希望浮动元素旁边没有任何内容，而周围的使用浮动盒子时，如果希望浮动元素旁边没有任何内容，而周围的内容被推至浮动元素之下，可以使用内容被推至浮动元素之下，可以使用 属性。属性。