《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》 课件 第10章 CSS3页面布局.pptxVIP

第10章 CSS3页面布局内容提要网页的布局是通过盒模型来完成的，可以设置 CSS元素显示模式的display属性，控制这些盒子来完成整个页面的布局。本章首先详细介绍CSS伸缩盒和CSS网格两种布局方式，然后介绍CSS媒体查询，详细讨论CSS基本布局模板，接下来简单了解浏览器默认样式，最后详细介绍叮叮书店首页布局的过程和操作。《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》本章要点CSS伸缩盒。CSS网格。媒体查询。基本布局模板。《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》10.1 伸缩盒 如果将元素显示模式display属性显式设置为“flex”，则元素作为弹性伸缩盒显示。伸缩盒能够简单快速的创建一个具有弹性功能的布局，可以让伸缩盒内的元素在伸缩容器内进行自由扩展和收缩，从而很容易调整整个布局。伸缩盒使常见的布局模式（如三列布局）变得非常简单，已经得到了所有浏览器的支持。 一个伸缩盒布局是由一个伸缩盒和在这个容器里的伸缩项目组成，当一个标签元素display属性值显式设置为flex时，元素会变为伸缩容器，同时在伸缩容器内的所有子元素都会自动变成伸缩项目，伸缩项目的float、clear和 vertical-align属性将失效。伸缩容器有两根轴：水平的主轴和垂直的交叉轴。《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》10.1 伸缩盒CSS的伸缩盒布局属性。《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》10.1 伸缩盒——伸缩项目属性flex属性 flex属性用来设置伸缩盒的伸缩项目如何分配空间，是flex-grow、flex-shrink和flex-basis的简写。语法如下：flex：none|flex-grow flex-shrink? || flex- basis 默认值为0 1 auto，后两个属性可选。该属性有两个关键字：auto(1 1 auto)和none(0 0 auto)。《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》10.1 伸缩盒——伸缩项目属性flex-grow用来指定扩展比率，即剩余空间是正值时此伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例。默认值为0不参与剩余空间分配。剩余空间是正值时flex-shrink值不起作用。flex-shrink用来指定收缩比率，即剩余空间是负值时此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例。在收缩的时候收缩比率会以伸缩基准值加权，默认值为1。剩余空间是负值时 flex-grow值不起作用。《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》10.1 伸缩盒——伸缩项目属性flex-basis用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，伸缩项目长度的 起始数值。如果所有伸缩项目的基准值之和大于 剩余空间，则会根据每项设置的基准值，按比率 伸缩剩余空间。默认值为auto，如果该值被指定 为auto，则伸缩基准值的计算值是自身的width设置，如果自身的宽度没有定义，则长度取决于内容。《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》10.1 伸缩盒——伸缩项目属性例10.1 在flex explain.html中，假设有一个伸缩盒flex，里面有三个伸缩项目a，b，c。div class=flexdiv class=aa/divdiv class=bb/divdiv class=cc/div/div设伸缩盒宽度为800px，a、b、c伸缩项目扩展比率分别为1、2和3，伸缩项目收缩比率分别为1、2和3，伸缩基准值分别为300px、200px和 400px，样式定义如下：《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》10.1 伸缩盒——伸缩项目属性.flex {display: flex;width: 800px;height: 200px;}.a {flex: 1 1 300px;background-color: hsl(0, 3%, 77%);}.b {flex: 2 2 200px;background-color: hsl(0, 3%, 62%);}.c {flex: 3 3 400px;background-color: hsl(0, 3%, 77%);}整个伸缩盒宽度为800px，由于伸缩项目设置了伸缩基准值flex-basis，加起来为900px，这样伸缩盒剩余空间为800px-900px=-100px，所以a、b、c伸缩项目必须收缩，需要分别计算a、b、c伸缩项目在剩余空间100px内的收缩值。《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》10.1 伸缩盒——伸缩项目属性由于设置了flex-shrink收缩比率，首先要进行加权