HTML+CSS+JavaScript网页设计-第10章-网页布局课件

第1页第10章网页布局本章概述本章的学习目标主要内容第1页第10章网页布局本章概述第2页本章概述好的网页一定有一个好的布局，网页布局是指对页面中的标题、导航栏、主要内容、脚注、表单等各种构成元素进行合理地排版。使用CSS布局可以有很多方法，本章主要介绍了多列布局、盒子的浮动与定位，以及弹性盒布局。实际开发中，一些复杂的网页可能会用到不止一种布局，通常是先整体使用一种布局设计，在局部可以使用另一种布局方式。通过本章的学习读者应掌握使用CSS对网页进行布局的常用方法，深入了解盒子模型的设计思想和弹性盒布局的基本原理，能够对页面元素进行合理的排版布局。第2页本章概述好的网页一定有一个好的布局，网页布局是指对页面第3页本章的学习目标掌握多列布局相关的CSS属性的用法进一步了解盒子模型的设计思想掌握position属性的设置几种定位方式理解z-index属性的作用掌握float属性的基本用法理解弹性盒布局中弹性容器和弹性子元素的关系掌握弹性盒子的常用属性掌握弹性子元素属性的用法第3页本章的学习目标掌握多列布局相关的CSS属性的用法第4页主要内容10.1多列布局10.2使用CSS定位与布局10.3弹性盒布局10.4本章小结 10.5思考和练习第4页主要内容10.1多列布局第5页10.1多列布局在CSS3多列布局功能出现之前，如果想让文本呈多列显示，要么使用绝对定位，手动给文本分段落，要么使用JavaScript脚本进行控制。CSS3中新增的多列功能是对传统网页中块状布局模式的有力扩充。顾名思义，多列布局功能可以方便开发人员将文本排版成多列，实现报纸那样的多栏效果第5页10.1多列布局在CSS3多列布局功能出现之前，第6页设置列宽和列数column-width属性用于给列定义最小宽度。默认值为auto，表示将根据column-count属性指定的列数自动计算列宽。column-count属性用于指定文本显示的列数。在实际应用中，通常简写形式columns，一起指定这两个属性的值。第6页设置列宽和列数column-width属性用于给列定义第7页设置列间距默认情况下，浏览器根据列数和列宽来计算出列间距。但在实际项目中，默认列间距用得比较少，更多时候需要指定列间距。这就用到了column-gap属性，该属性的默认值为normal，相当于1em。需要注意的是，如果column-gap与column-width加起来大于总宽度，就无法显示column-count指定的列数，会由浏览器自动调整列数和列宽。第7页设置列间距默认情况下，浏览器根据列数和列宽来计算出列间第8页设置列边框由于浏览器宽度有限，当列数过多时，列与列之间的间隔就会比较窄，不方便阅读。这时可以在列与列之间设置一条边框线，使版面看起来更清晰。column-rule用于设置列边框，类似于border属性，所不同的是这个列边框不占用任何空间，因此设置column-rule不会导致列宽的变化。它也包含3个子属性：column-rule-width、column-rule-style和column-rule-color，分别用来设置列之间边框的宽度、样式和颜色。边框的宽度通常需要小于column-gap属性的值，否则可能会导致边框覆盖部分文字。第8页设置列边框由于浏览器宽度有限，当列数过多时，列与列之间设置跨列标题很多时候，一篇文章需要以多栏的方式显示内容，但有共同的标题，而标题不属于任何一列，标题是所有内容的标题。因此，在排版时，需要将标题放在顶部并跨列显示。这可以通过跨列属性column-span来实现。column-span属性有两个取值：默认值none表示不跨列，all表示跨越所有列。例如，文章标题可以设成all来跨列。第9页设置跨列标题很多时候，一篇文章需要以多栏的方式显示内容，但有统一列高column-fill属性用于统一列高。默认值为auto，各列的高度随内容自动调整；它还有另外一个值balance，当设置为balance时，所有列的高度都设为最高的列高。第10页统一列高column-fill属性用于统一列高。默认值为au第11页主要内容10.1多列布局10.2使用CSS定位与布局10.3弹性盒布局10.4本章小结 10.5思考和练习第11页主要内容10.1多列布局10.2使用CSS定位与布局在CSS中，一共有三种常用的“定位方案”(positioningscheme)用来布局页面中的元素：normal、float以及absolute。默认情况下，元素使用“正常流”(normal)或“静态流”(staticflow)在页面中进行布局。在正常流中，页面中的块级元素从顶部向底部流动(记住每个块级元素都以独占一个新行的形式出现)，而行内元素则从左向右流动(因为它们不会从新行开始显示)。第12页10.2使用CSS定位与布局在CSS中，一共有三种常用的第13页position属性position的中文含义是位置、状态。该属性有如下4个可能的取值：static：与正常流相同，并且为默认值。因此实际使用该属性时，很少会指定此值。relative：盒子的位置可以相对其在正常流中的位置出现偏移，对象不可层叠，将根据left、right、top和bottom等属性的值在正常流这偏移。absolute：将盒子对象从正常流中拖出，完全使用width、height、left、right、top、bottom等属性进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。其层叠通过z-index属性定义。fixed：固定在屏幕的某个位置，位置通过left、top、right和bottom属性指定，并且不随用户滚动窗口而改变位置。第13页position属性position的中文含义是位置第14页盒子偏移属性当盒子的position属性的值为relative、absolute或fixed时，它们同时会使用“盒子偏移”属性指定盒子应如何定位，盒子偏移属性的含义如下；top：指定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。left：指定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。bottom：对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边；对于相对定位元素，bottom属性设置单位高于/低于其正常位置的元素的底边。right：指定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。第14页盒子偏移属性当盒子的position属性的值为rel第15页相对定位相对定位能够将盒子移动到与其在正常流中的位置相关联的某个位置。例如，将一个盒子从其在正常流中应该出现的位置下移30像素，或右移100像素。它将会根据盒子偏移属性从其在正常流中的位置进行转移。当容器的position属性为relative时，就是对该盒子应用相对定位，使用相对定位的盒子的top、bottom、left和right属性的参照对象是其父容器的4条边框，而不是浏览器窗口。第15页相对定位相对定位能够将盒子移动到与其在正常流中的位置第16页绝对定位绝对定位是使用最广泛的一种定位方案，它能够精准地将元素移动到想要的位置。使用绝对定位的方法是将position属性设置为absolute，然后可以使用盒子偏移属性对其进行需要的定位。需要注意的是，因为绝对定位的盒子被从正常流中取出，即使两个垂直外边距相遇，它们的外边距也不会折叠。绝对定位的元素总是出现在相对定位元素之上，除非使用z-index属性进行设置。第16页绝对定位绝对定位是使用最广泛的一种定位方案，它能够精第17页固定定位position属性中需要了解的最后一个值是fixed。此值指定不仅元素的内容应完全从正常流中移除，该盒子在用户上下滚动页面时也不应该移动。这里的固定定位是指元素的位置相对于浏览器窗口是固定位置。第17页固定定位position属性中需要了解的最后一个值是第18页z-index属性z-index属性是针对网页显示中的一个特殊属性。因为显示器显示的图案是一个二维平面，用x轴和y轴来表示位置属性。为了表示三维立体中的层叠顺序，引入了z-index属性表示两个元素z轴的不同，从而表示元素在叠加顺序上的立体关系。使用绝对和相对定位的元素经常会与其他元素出现重叠。当发生这种情况时，默认的行为是第一个元素位于后来元素之下。这被称作“堆叠上下文”(stackingcontext)。z-index属性就用来指定重叠部分的上下层关系。z-index属性的值是一个数字，数字的值越大就越接近元素显示位置的顶部(例如，一个z-index值为10的元素会出现于z-index值为5的元素之上)。第18页z-index属性z-index属性是针对网页显示中第19页float属性float属性能够将某个元素从正常流中抽取出来，并将其尽可能远地放置在包含盒子的左侧或右侧。包含元素中的其他内容则会围绕关联有float属性的元素进行流动(就如文本与其他元素能够围绕图片流动一样)。float属性的最初目的是实现图文混排，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。当为一个元素指定float属性时，必须设置width属性以指定盒子应该占据的宽度。否则，它将自动占据包含盒子100%的宽度，不会给围绕它流动的内容留任何空间，从而使该元素显示的效果如同一个普通的块级元素。第19页float属性float属性能够将某个元素从正常流中第20页float属性使用float属性，除了可以建立网页的横向多列布局，还可以实现许多其他的网页内容的布局。该属性的可取值有如下几个：none：默认值，盒子不发生浮动，并保持在正常流中应处于的位置。left：盒子浮动到包含元素的左侧，而包含元素的其他内容浮动至其右侧。right：盒子浮动到包含元素的右侧，而包含元素的其他内容浮动至其左侧。inherit：从父元素继承该属性的值。第20页float属性使用float属性，除了可以建立网页的第21页clear属性clear属性定义了元素的哪边上不允许出现浮动元素。在CSS1和CSS2中，这是通过自动为清除元素(即设置了clear属性的元素)增加上外边距实现的。在CSS2.1中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。第21页clear属性clear属性定义了元素的哪边上不允许第22页clear属性clear属性的可取值如下：left：具有clear属性的元素在其左侧不能有任何内容。right：有clear属性的元素在其右侧不能有任何内容。both：clear属性的元素在其左右两侧都不能有任何内容。none：默认值，允许两侧出现浮动内容。第22页clear属性clear属性的可取值如下：第23页主要内容10.1多列布局10.2使用CSS定位与布局10.3弹性盒布局10.4本章小结 10.5思考和练习第23页主要内容10.1多列布局第24页10.3弹性盒布局在实际项目中，网站的布局要比我们想象的复杂，光靠前面介绍的多栏布局和盒布局还远远不够。本节将介绍一种CSS3中新增的一种布局方式——弹性盒布局。CSS3弹性盒(FlexibleBox或flexbox)是一整套布局规范，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。第24页10.3弹性盒布局在实际项目中，网站的布局要比我第25页定义弹性容器弹性盒子由弹性容器(Flexcontainer)和弹性子元素(Flexitem)组成。弹性容器通过设置display属性的值为flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。第25页定义弹性容器弹性盒子由弹性容器(Flexconta第26页弹性盒子属性弹性盒布局包含多个CSS属性，包括弹性盒子属性和弹性子元素属性两类，第26页弹性盒子属性弹性盒布局包含多个CSS属性，包括弹性盒第27页flex-direction属性flex-direction属性规定灵活项目的方向。如果元素不是弹性盒对象的元素，则flex-direction属性不起作用。row：默认值。元素将水平显示，正如一个行一样。row-reverse：与row相同，但是以相反的顺序显示。column：元素将垂直显示，正如一个列一样。column-reverse：与column相同，但从后往前排，最后一项排在最上面。第27页flex-direction属性flex-direc第28页flex-wrap属性flex-wrap属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。该属性的可取值如下：nowrap：默认值，弹性容器为单行，弹性子项可能会溢出容器，如图10-17所示。wrap：弹性容器为多行。弹性子项溢出的部分会被放置到新行，子项内部会发生断行。wrap-reverse：与wrap类似，但是顺序相反。第28页flex-wrap属性flex-wrap属性规定fl第29页flex-flow属性flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。第29页flex-flow属性flex-flow属性是fl第30页align-items属性align-items属性定义flex子元素在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。align-items属性的可取值如下：stretch ：默认值。子元素被拉伸以适应容器。center：子元素位于容器的中心。flex-start：子元素位于容器的开头。flex-end：子元素位于容器的结尾。baseline：子元素位于容器的基线上。第30页align-items属性align-items属性第31页justify-conten属性justify-conten属性用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。justify-conten属性的可取值如下：flex-start：默认值，弹性子元素向行头紧挨着填充。第一个弹性子元素的main-start外边距边线被放置在该行的main-start边线，后续弹性项依次平齐摆放。flex-end：弹性子元素向行尾紧挨着填充。第一个弹性子元素的main-end外边距边线被放置在该行的main-end边线，后续弹性项依次平齐摆放。center：弹性子元素居中紧挨着填充。如果剩余的自由空间是负的，则弹性子元素将在两个方向上同时溢出。space-between：弹性子元素平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性子元素的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻子元素的间隔相等。space-around：弹性子元素平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性子元素沿该行分布，且彼此间隔相等，同时首尾两边和弹性容器之间留有一半的间隔(如子元素间隔为20px，则首尾两边与容器之间间隔为1/2*20px=10px)。第31页justify-conten属性justify-coorder属性使用弹性盒布局时，可以通过order属性来改变各元素的显示顺序。可以在每个元素的样式中加入order属性，浏览器在显示元素的时候将根据order属性的值，按从小到大的顺序排列。该属性的默认值为0，且可以为负值。第32页order属性使用弹性盒布局时，可以通过order属性来改变flex-grow属性flex-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页flex-grow属性flex-grow属性用于设置或检索弹flex-shrink属性flex-shrink属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值。flex-shrink属性和flex-grow属性的区别在于：当元素排列方向为横向排列时，如果子元素的width属性值之和小于容器元素的宽度，就必须通过flex-grow属性来调整子元素的宽度；如果子元素的width属性值之和大于容器元素的宽度，就必须通过flex-shrink属性来调整子元素的宽度；当元素排列方向为纵向排列时，如果子元素的height属性值之和小于容器元素的高度，就必须通过flex-grow属性来调整子元素的高度；如果子元素的height属性值之和大于容器元素的高度，就必须通过flex-shrink属性来调整子元素的高度。第34页flex-shrink属性flex-shrink属性指定了fflex-basis属性flex-basis属性用于设置或检索弹性盒伸缩基准值。默认值为auto，长度等于元素的长度。如果该元素未指定长度，则长度将根据内容决定。其值通常是一个长度单位或者一个百分比。第35页flex-basis属性flex-basis属性用于设置或检flex属性flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。该属性是flex-grow、flex-shrink和flex-basis属性的简写属性。默认值为“01auto”，后两个属性可选该属性还有两个快捷值：auto(与11auto相同)和none(与00auto相同)。建议优先使用这个属性，而不是单独写3个分离的属性，因为浏览器会推算相关值。

第36页flex属性flex属性用于设置或检索弹性盒模型对象的子元素第37页align-self属性align-self属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。第37页align-self属性align-self属性允许第38页主要内容10.1多列布局10.2使用CSS定位与布局10.3弹性盒布局10.4本章小结 10.5思考和练习第38页主要内容10.1多列布局第39页10.4本章小结本章主要介绍了使用CSS进行网页布局的方法，包括多列布局、盒子的浮动和定位以及弹性盒布局。首先介绍的是多列布局，多列布局是CSS3新增的功能，只需几个简单的CSS属性设置，即可实现报纸那样的多栏效果；然后讲述了CSS的定位与布局，主要是position和float属性的使用，这两个属性也是CSS布局中用的最广泛的属性；最后讲述了CSS3新增的弹性盒布局，包括弹性盒子属性和弹性子元素属性的使用，引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。通过本章的学习，读者应掌握使用CSS进行网页布局的各种方法，在合适的场合使用正确的布局方式。第39页10.4本章小结本章主要介绍了使用CSS进行网第40页主要内容10.1多列布局10.2使用CSS定位与布局10.3弹性盒布局10.4本章小结

10.5思考和练习第40页主要内容10.1多列布局第41页10.5思考和练习1.column-width属性值为auto，表示将根据

属性指定的列数自动计算列宽。2.column-rule用于设置列边框，类似于border属性，所不同的是这个列边框不占用任何空间，它也包含3个子属性：

、

和

。3.在多列布局中，要实现标题跨列显示，可以使用

属性。4.在CSS布局中，position属性是一个使用较多的重要属性，很多特殊容器的定位必须使用position来完成。该属性有4个可能的取值：static、

、

和

。5.盒子的浮动使用的是什么属性？该属性有几个取值，分别是什么含义？6.使用浮动盒子时，如果希望浮动元素旁边没有任何内容，而周围的内容被推至浮动元素之下，可以使用

属性。第41页10.5思考和练习1.column-widt第42页第10章网页布局本章概述本章的学习目标主要内容第1页第10章网页布局本章概述第43页本章概述好的网页一定有一个好的布局，网页布局是指对页面中的标题、导航栏、主要内容、脚注、表单等各种构成元素进行合理地排版。使用CSS布局可以有很多方法，本章主要介绍了多列布局、盒子的浮动与定位，以及弹性盒布局。实际开发中，一些复杂的网页可能会用到不止一种布局，通常是先整体使用一种布局设计，在局部可以使用另一种布局方式。通过本章的学习读者应掌握使用CSS对网页进行布局的常用方法，深入了解盒子模型的设计思想和弹性盒布局的基本原理，能够对页面元素进行合理的排版布局。第2页本章概述好的网页一定有一个好的布局，网页布局是指对页面第44页本章的学习目标掌握多列布局相关的CSS属性的用法进一步了解盒子模型的设计思想掌握position属性的设置几种定位方式理解z-index属性的作用掌握float属性的基本用法理解弹性盒布局中弹性容器和弹性子元素的关系掌握弹性盒子的常用属性掌握弹性子元素属性的用法第3页本章的学习目标掌握多列布局相关的CSS属性的用法第45页主要内容10.1多列布局10.2使用CSS定位与布局10.3弹性盒布局10.4本章小结 10.5思考和练习第4页主要内容10.1多列布局第46页10.1多列布局在CSS3多列布局功能出现之前，如果想让文本呈多列显示，要么使用绝对定位，手动给文本分段落，要么使用JavaScript脚本进行控制。CSS3中新增的多列功能是对传统网页中块状布局模式的有力扩充。顾名思义，多列布局功能可以方便开发人员将文本排版成多列，实现报纸那样的多栏效果第5页10.1多列布局在CSS3多列布局功能出现之前，第47页设置列宽和列数column-width属性用于给列定义最小宽度。默认值为auto，表示将根据column-count属性指定的列数自动计算列宽。column-count属性用于指定文本显示的列数。在实际应用中，通常简写形式columns，一起指定这两个属性的值。第6页设置列宽和列数column-width属性用于给列定义第48页设置列间距默认情况下，浏览器根据列数和列宽来计算出列间距。但在实际项目中，默认列间距用得比较少，更多时候需要指定列间距。这就用到了column-gap属性，该属性的默认值为normal，相当于1em。需要注意的是，如果column-gap与column-width加起来大于总宽度，就无法显示column-count指定的列数，会由浏览器自动调整列数和列宽。第7页设置列间距默认情况下，浏览器根据列数和列宽来计算出列间第49页设置列边框由于浏览器宽度有限，当列数过多时，列与列之间的间隔就会比较窄，不方便阅读。这时可以在列与列之间设置一条边框线，使版面看起来更清晰。column-rule用于设置列边框，类似于border属性，所不同的是这个列边框不占用任何空间，因此设置column-rule不会导致列宽的变化。它也包含3个子属性：column-rule-width、column-rule-style和column-rule-color，分别用来设置列之间边框的宽度、样式和颜色。边框的宽度通常需要小于column-gap属性的值，否则可能会导致边框覆盖部分文字。第8页设置列边框由于浏览器宽度有限，当列数过多时，列与列之间设置跨列标题很多时候，一篇文章需要以多栏的方式显示内容，但有共同的标题，而标题不属于任何一列，标题是所有内容的标题。因此，在排版时，需要将标题放在顶部并跨列显示。这可以通过跨列属性column-span来实现。column-span属性有两个取值：默认值none表示不跨列，all表示跨越所有列。例如，文章标题可以设成all来跨列。第50页设置跨列标题很多时候，一篇文章需要以多栏的方式显示内容，但有统一列高column-fill属性用于统一列高。默认值为auto，各列的高度随内容自动调整；它还有另外一个值balance，当设置为balance时，所有列的高度都设为最高的列高。第51页统一列高column-fill属性用于统一列高。默认值为au第52页主要内容10.1多列布局10.2使用CSS定位与布局10.3弹性盒布局10.4本章小结 10.5思考和练习第11页主要内容10.1多列布局10.2使用CSS定位与布局在CSS中，一共有三种常用的“定位方案”(positioningscheme)用来布局页面中的元素：normal、float以及absolute。默认情况下，元素使用“正常流”(normal)或“静态流”(staticflow)在页面中进行布局。在正常流中，页面中的块级元素从顶部向底部流动(记住每个块级元素都以独占一个新行的形式出现)，而行内元素则从左向右流动(因为它们不会从新行开始显示)。第53页10.2使用CSS定位与布局在CSS中，一共有三种常用的第54页position属性position的中文含义是位置、状态。该属性有如下4个可能的取值：static：与正常流相同，并且为默认值。因此实际使用该属性时，很少会指定此值。relative：盒子的位置可以相对其在正常流中的位置出现偏移，对象不可层叠，将根据left、right、top和bottom等属性的值在正常流这偏移。absolute：将盒子对象从正常流中拖出，完全使用width、height、left、right、top、bottom等属性进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。其层叠通过z-index属性定义。fixed：固定在屏幕的某个位置，位置通过left、top、right和bottom属性指定，并且不随用户滚动窗口而改变位置。第13页position属性position的中文含义是位置第55页盒子偏移属性当盒子的position属性的值为relative、absolute或fixed时，它们同时会使用“盒子偏移”属性指定盒子应如何定位，盒子偏移属性的含义如下；top：指定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。left：指定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。bottom：对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边；对于相对定位元素，bottom属性设置单位高于/低于其正常位置的元素的底边。right：指定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。第14页盒子偏移属性当盒子的position属性的值为rel第56页相对定位相对定位能够将盒子移动到与其在正常流中的位置相关联的某个位置。例如，将一个盒子从其在正常流中应该出现的位置下移30像素，或右移100像素。它将会根据盒子偏移属性从其在正常流中的位置进行转移。当容器的position属性为relative时，就是对该盒子应用相对定位，使用相对定位的盒子的top、bottom、left和right属性的参照对象是其父容器的4条边框，而不是浏览器窗口。第15页相对定位相对定位能够将盒子移动到与其在正常流中的位置第57页绝对定位绝对定位是使用最广泛的一种定位方案，它能够精准地将元素移动到想要的位置。使用绝对定位的方法是将position属性设置为absolute，然后可以使用盒子偏移属性对其进行需要的定位。需要注意的是，因为绝对定位的盒子被从正常流中取出，即使两个垂直外边距相遇，它们的外边距也不会折叠。绝对定位的元素总是出现在相对定位元素之上，除非使用z-index属性进行设置。第16页绝对定位绝对定位是使用最广泛的一种定位方案，它能够精第58页固定定位position属性中需要了解的最后一个值是fixed。此值指定不仅元素的内容应完全从正常流中移除，该盒子在用户上下滚动页面时也不应该移动。这里的固定定位是指元素的位置相对于浏览器窗口是固定位置。第17页固定定位position属性中需要了解的最后一个值是第59页z-index属性z-index属性是针对网页显示中的一个特殊属性。因为显示器显示的图案是一个二维平面，用x轴和y轴来表示位置属性。为了表示三维立体中的层叠顺序，引入了z-index属性表示两个元素z轴的不同，从而表示元素在叠加顺序上的立体关系。使用绝对和相对定位的元素经常会与其他元素出现重叠。当发生这种情况时，默认的行为是第一个元素位于后来元素之下。这被称作“堆叠上下文”(stackingcontext)。z-index属性就用来指定重叠部分的上下层关系。z-index属性的值是一个数字，数字的值越大就越接近元素显示位置的顶部(例如，一个z-index值为10的元素会出现于z-index值为5的元素之上)。第18页z-index属性z-index属性是针对网页显示中第60页float属性float属性能够将某个元素从正常流中抽取出来，并将其尽可能远地放置在包含盒子的左侧或右侧。包含元素中的其他内容则会围绕关联有float属性的元素进行流动(就如文本与其他元素能够围绕图片流动一样)。float属性的最初目的是实现图文混排，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。当为一个元素指定float属性时，必须设置width属性以指定盒子应该占据的宽度。否则，它将自动占据包含盒子100%的宽度，不会给围绕它流动的内容留任何空间，从而使该元素显示的效果如同一个普通的块级元素。第19页float属性float属性能够将某个元素从正常流中第61页float属性使用float属性，除了可以建立网页的横向多列布局，还可以实现许多其他的网页内容的布局。该属性的可取值有如下几个：none：默认值，盒子不发生浮动，并保持在正常流中应处于的位置。left：盒子浮动到包含元素的左侧，而包含元素的其他内容浮动至其右侧。right：盒子浮动到包含元素的右侧，而包含元素的其他内容浮动至其左侧。inherit：从父元素继承该属性的值。第20页float属性使用float属性，除了可以建立网页的第62页clear属性clear属性定义了元素的哪边上不允许出现浮动元素。在CSS1和CSS2中，这是通过自动为清除元素(即设置了clear属性的元素)增加上外边距实现的。在CSS2.1中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。第21页clear属性clear属性定义了元素的哪边上不允许第63页clear属性clear属性的可取值如下：left：具有clear属性的元素在其左侧不能有任何内容。right：有clear属性的元素在其右侧不能有任何内容。both：clear属性的元素在其左右两侧都不能有任何内容。none：默认值，允许两侧出现浮动内容。第22页clear属性clear属性的可取值如下：第64页主要内容10.1多列布局10.2使用CSS定位与布局10.3弹性盒布局10.4本章小结 10.5思考和练习第23页主要内容10.1多列布局第65页10.3弹性盒布局在实际项目中，网站的布局要比我们想象的复杂，光靠前面介绍的多栏布局和盒布局还远远不够。本节将介绍一种CSS3中新增的一种布局方式——弹性盒布局。CSS3弹性盒(FlexibleBox或flexbox)是一整套布局规范，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。第24页10.3弹性盒布局在实际项目中，网站的布局要比我第66页定义弹性容器弹性盒子由弹性容器(Flexcontainer)和弹性子元素(Flexitem)组成。弹性容器通过设置display属性的值为flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。第25页定义弹性容器弹性盒子由弹性容器(Flexconta第67页弹性盒子属性弹性盒布局包含多个CSS属性，包括弹性盒子属性和弹性子元素属性两类，第26页弹性盒子属性弹性盒布局包含多个CSS属性，包括弹性盒第68页flex-direction属性flex-direction属性规定灵活项目的方向。如果元素不是弹性盒对象的元素，则flex-direction属性不起作用。row：默认值。元素将水平显示，正如一个行一样。row-reverse：与row相同，但是以相反的顺序显示。column：元素将垂直显示，正如一个列一样。column-reverse：与column相同，但从后往前排，最后一项排在最上面。第27页flex-direction属性flex-direc第69页flex-wrap属性flex-wrap属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。该属性的可取值如下：nowrap：默认值，弹性容器为单行，弹性子项可能会溢出容器，如图10-17所示。wrap：弹性容器为多行。弹性子项溢出的部分会被放置到新行，子项内部会发生断行。wrap-reverse：与wrap类似，但是顺序相反。第28页flex-wrap属性flex-wrap属性规定fl第70页flex-flow属性flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。第29页flex-flow属性flex-flow属性是fl第71页align-items属性align-items属性定义flex子元素在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。align-items属性的可取值如下：stretch ：默认值。子元素被拉伸以适应容器。center：子元素位于容器的中心。flex-start：子元素位于容器的开头。flex-end：子元素位于容器的结尾。baseline：子元素位于容器的基线上。第30页align-items属性align-items属性第72页justify-conten属性justify-conten属性用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。justify-conten属性的可取值如下：flex-start：默认值，弹性子元素向行头紧挨着填充。第一个弹性子元素的main-start外边距边线被放置在该行的main-start边线，后续弹性项依次平齐摆放。flex-end：弹性子元素向行尾紧挨着填充。第一个弹性子元素的main-end外边距边线被放置在该行的main-end边线，后续弹性项依次平齐摆放。center：弹性子元素居中紧挨着填充。如果剩余的自由空间是负的，则弹性子元素将在两个方向上同时溢出。space-between：弹性子元素平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性子元素的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻子元素的间隔相等。space-around：弹性子元素平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性子元素沿该行分布，且彼此间隔相等，同时首尾两边和弹性容器之间留有一半的间隔(如子元素间隔为20px，则首尾两边与容器之间间隔为1/2*20px=10px)。第31页justify-conten属性justify-coorder属性使用弹性盒布局时，可以通过order属性来改变各元素的显示顺序。可以在每个元素的样式中加入order属性，浏览器在显示元素的时候将根据order属性的值，按从小到大的顺序排列。该属性的默认值为0，且可以为负值。第73页order属性使用弹性盒布局时，可以通过order属性来改变flex-grow属性flex-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;}第74页flex-grow属性flex-grow属性用于设置或检索弹flex-shrink属性flex-shrink属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值。flex-shrink属性和flex-grow