您现在的位置是：首页 > 前端学习 > Web前端Web前端

多列布局（第十六章）(图文)

第十三双眼睛2020-03-11【Web前端】人已围观

简介我们经常阅读的报纸中，通常会将一个版面分成多个列进行排版，在传统的网页设计中，会使用表格布局或者浮动布局，但总会遇到错位的问题，因此需要反复调整，但是仍然不够完美，针对这种情况，CSS3提供了更好的方法，可以直接定义列数，列宽等，也可以定义列与列之间的间距，间隔线等。。还可以定义栏目跨栏和栏目高度，本章将详细讲解多列布局的基本属性及其用法，本章的主要知识点如下：
1理解多列布局的基本属性
2发现常见多列布局页面的布局原理
3实现自己的多列布局

CSS3新增的多列布局，可以从多个方面去设置，多列的列数，每列的列宽，列与列之间的距离，列与列之间的间隔线样式，跨多列设置和列的高度设置等。
多列属性columns,用于快速定义多列的列数目和每列的宽度，基于webkit的替代属性是-webkit-columns,gecko不支持。语法如下：
columns :column-width column-count
column-width:定义每列的列宽
column-count:定义列数
在实际布局中所定义的多列的列数，是最大列数，当外围宽度不足时，多列的列数会适当减少，而每列的宽度会自适应宽度，填满整个范围区域。
例子：把一片文章分成多列显示
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>多列属性</title>
       <style type="text/css">
           body{
               border: 1px solid #f90;
               padding: 10px;
               -webkit-columns: 200px 3;
               columns: 200px 3;
           }
           h1{
               font-size: 24px;
               padding: 5px 10px;
               background-color: #ccc;
           }
           h2{
               font-size: 14px;
               text-align: center;
           }
           p{
               text-indent: 2em;
               font-size: 18px;
               line-height: 26px;
           }
       </style>
   </head>
   <body>
       <h1>背影</h1>
       <h2>朱自清</h2>
       <p>
       我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，
       我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。
       父亲说，“事已如此，不必难过，好在天无绝人之路！”
       </p>
       <p>
           回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。
           丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。
       </p>
       <p>
           到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，
           叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。
           其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。
           我两三回劝他不必去；他只说，“不要紧，他们去不好！”
       </p>
   </body>
</html>

效果如下图所示:

列宽属性column-width
column-width属性用于定义每列的列宽度，基于webkit内核的替代属性是-webkit-column-width,基于gecko内核的替代属性是-moz-column-width
column-width属性的语法如下：
column-width:auto length
atuo:列的宽度由浏览器决定
length:直接指定列的宽度，由浮点数和单位标识符组成的长度值，不可以为负值
列数属性column-count，用于定义多列布局中的列数目，基于webkit内核的替代属性是-webkit-column-count,基于gecko内核的替代属性是-moz-column-count
语法如下：
column-count:auto number
auto:列的数目由其他属性决定，如column-width
number:直接指定列的数目，取值为大于0的整数，决定了多列的最大列数
列间距属性column-gap,用于定义多列布局中列与列之间的距离，基于webkit内核的替代私有属性是-webkit-column-gap,基于gecko内核的替代属性是-moz-column-gap,语法如下：
column-gap: normal length
normal:默认值，浏览器默认的列间距，一般是1em
length:指定列与列之间的距离，有浮点数字和单位标识符组成，不可为负值
定义列分隔线
column-rule属性，在多列布局中，用于定义列和列之间的分隔线，基于webkit内核的替代属性是-webkit-column-rule,基于gecko内核的替代属性是-moz-column-rule,
语法如下：
column-rule:column-rule-width column-rule-style column-rule-color
column-rule-width;定义分割线的宽度
column-rule-style:定义分隔线的样式
column-rule-color:定义分隔线的样式
派生的子属性
column-rule是一个复合的属性，包含3个子属性，分别定义分割线的宽度，样式风格和颜色。
column-rule-width:定义分隔线的宽度，为任意包含单位的长度，不可为负值
column-rule-style:定义分隔线样式风格，取值范围为border-style相同，包括none,dotted,dashed,solid,double,groove,ridge,inset,outset,inherit
column-rule-color:定义分隔线的颜色，为任意用于CSS的颜色，也包括半透明颜色。
定义横跨所有列属性column-span
CSS3新增的column-span属性，在多列布局中，用于定义元素跨列显示，基于webkit内核的替代属性为-webkit-column-span,基于gecko内核的不支持
语法如下：
column-span:1 all
1:默认值，元素在一列中显示
all:元素横跨所有列显示。
例子：横跨所有列
h1{
               font-size: 24px;
               padding: 5px 10px;
               background-color: #ccc;
               column-span: all;
}
h2{
font-size: 14px;
text-align: center;
column-span: all;
}