您现在的位置是:首页 > 前端学习 > 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;
}

效果如下图所示:

 

Tags:HTML   HTML网页

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计64篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们