任务11.5 多列布局

网页设计项目教程（HTML5+CSS3+JavaScript）模块11CSS布局任务11.5多列布局学习目标从认识多列布局的适用场景，到掌握创建多列与修饰列的常用属性知识目标了解CSS3多列布局的适用场景；掌握column-count、column-width两个创建多列的属性；掌握column-gap、column-rule、column-span三个修饰列的属性。能力目标能够将一段文本分成多列显示；能够设置列间隙与列间边框线；能够让标题跨越多列；能够按列宽自动控制列数。素养目标培养细致认真的职业素养；体会版面编排中的审美意识；养成规范、简洁的编码习惯。任务描述CSS3提供的多列布局，可以像报纸杂志那样把文本分成多列，提高开发效率针对类似于报纸杂志中文章的排版，使用float浮动、position定位、弹性盒子或者其他动态CSS技术，是较难实现的；因为文本内容的数量是动态的，每个div或p显示多少个文字难以精准控制。CSS3提供的多列布局可以创建多列文本布局，允许将文本按照报纸杂志排版分成多列，降低了开发难度，提高了开发效率。使用多列布局时，只需在包含文本的容器上设置列数、列宽、列间隙等属性，浏览器就会自动完成文本的分列与排列。本任务目标：掌握多列布局的常用属性，能够使用多列布局实现报纸杂志式的多列文本排版。11.5.1基本使用：创建多列使用column-count属性定义要创建的列数<style>.container{column-count:3;/*将文本分成3列*/}</style><divclass="container">晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，<!--此处省略更多文字--></div>图11-353列文本要点column-count属性设置在包含文本的容器（父元素）上；取值即为列数，如3表示把文本平均分成3列。列间隙：column-gap在创建多列的基础上，使用column-gap属性指定列与列之间的间隙.container{column-count:3;column-gap:60px;/*新增column-gap*/}图11-36列间隙为60px要点column-gap用于设置列与列之间的间隙大小；不设置时使用默认间隙，设置后列与列之间明显分开。代码基于"创建多列"中的代码，仅新增column-gap一行。列间边框：column-rule在列间隙的基础上，使用column-rule属性绘制列与列之间的边框线.container{column-count:3;column-gap:60px;column-rule:2pxdotted#333;/*新增column-rule*/}图11-37列之间的边框线要点column-rule的语法与border类似：宽度样式颜色，如2pxdotted#333。边框线绘制在列间隙的中间位置，不占据列宽。跨越多列：column-spancolumn-span属性指定元素跨越的列数，常用于让标题横跨所有列<style>.container{column-count:3;}h2{text-align:center;column-span:all;/*标题跨越所有列*/}</style><divclass="container"><h2>桃花源记</h2>晋太元中，武陵人捕鱼为业。……</div>column-span取值：none默认，元素不跨多列；all元素跨越所有列。桃花源记图11-38标题跨越多列桃花源记图11-39标题不跨越多列（处于第一列内）列宽度：column-widthcolumn-width定义列的宽度，浏览器结合容器宽度自动计算列数<style>.container{/*column-count:3;删除column-count*/column-width:100px;/*新增column-width*/}</style><divclass="container">晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，<!--此处省略更多文字--></div>图11-40固定列宽度为100px无需与column-count一起使用：浏览器按列宽与容器宽度自动算出列数。多列布局常用属性一览五个属性设置在包含文本的容器上，分别用于控制列数、列宽与列的修饰column-count定义要创建的列数；如column-count:3把文本分成3列。column-gap指定列与列之间的间隙大小；如column-gap:60px。column-rule绘制列与列之间的边框线；语法同border，如2pxdotted。column-span指定元素跨越的列数；none不跨列（默认），all跨越所有列。column-width定义列的宽度；浏览器按列宽自动计算列数，一般不与count同用。提示：设置多列布局时，只要在容器上给出列数（column-count）或列宽（column-width）即可完成分列；column-gap、column-rule、column-span属于对列的进一步修饰。任务实施：使用多列布局完成页面效果打开配套的task-column.html文件，编写CSS代码实现图11-41的页面效果01打开文件打开配套的task-column.html文件02设置列数为容器添加column-count03调整间隙使用column-gap设置列间距04绘制边线使用column-rule添加列间线05标题跨列为标题设置column-span:all桃花源记图11-41页面效果注意事项·column-span:none时元素不跨列，只有取all才跨越所有列；·column-width与column-count一般不同时使用，本任务用column-count指定列数；·多列属性全部写在包含文本的容器上，而不是写在段落p上。任务小结本任务完成了从"创建多列"到"修饰多列"的学习会描述说出多列布局的适用场景与各属性的含义。会创建使用column-c