登录  /  注册
首页 > web前端 > css教程 > 正文

css3中新增属性:css3多列布局属性的总结(附实例)

不言
发布: 2018-08-04 16:08:38
原创
3316人浏览过

css3中增加了多列布局的属性,什么是多列布局呢?所谓多列布局,就是创建多个列来对文本进行布局,像是报纸的排版差不多,那么,在本文中我们就来看一看多列布局中的一些相关属性及代码实例。

css3多列布局容器的属性:

column-width: auto | :给列定义一个最小宽度(min-width)。

auto: 列宽由其他元素决定。

length: 显式设置最小宽度。

column-count: auto | :定义列的数量。

auto: 元素只有一列。就像没有设置一样。

: 正整数值。取值是大于0的整数,负值无效。

columns: || :是column-width和column-count的简写。次序随意。

列宽 = ( 父元素宽度 - (列数-1) 列间隙 ) / 列数*
比如:父元素40em,分为4列,列间隙为2em。那么列宽为( 40 - (4-1) * 2) / 4 = 8.5em。
如果显式设置的列宽小于这个宽度,它会以这个宽度展示。
如果显式设置的列宽大于这个宽度,它会按照合适的尺寸重新排列列宽和列数。当前设置的列宽和列数并不准确。

column-gap: normal | :定义列间距。值过大时会撑破布局。

normal: 默认值,由浏览器解析,一般是lem。
: 有浮点数字和单位标识符组成的长度值。如:2.1em。

column-rule: | | :定义列边框。

    它的中心线始终和列间距的中心线一样。换言之,它总处于两列的中间。和border类似。如果列边框大于列间距,并不会自动消失。列边框超出列间距的部分就像是沉在文字的下方一样(背景效果)。

column-fill: auto | balance:定义多列中每一列的高度是否统一。

这个属性很奇怪。并且在浏览器中不统一。它有两个值:auto | balance。在 ie10/ie11/opera40/chrome52中测试的结果都是一样的,发现这两个属性并没有区别。在firefox49中测试,这两个属性是有区别的,其中balance是每列高度差不多(对齐),auto就自动合并成一列了,无论自己设置的是多少列。

css3多列布局项目(元素)属性:

column-span: none | all:定义一个元素横跨多少列。

如果我们常将标题横跨所有列。那么,column-span: all。其默认值是,column-span: none;表示不跨列。

css3多列布局代码:

     nbsp;html>
    
    
        <meta>
        <meta>
        <meta>
        <title>多列布局|column-span</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper {  
            width: 40em;
            margin:0 auto;
            border: 1px solid #ccc;
            /*多列布局*/
            -moz-column-count: 4;
            -webkit-column-count: 4;
            column-count: 4;
            -moz-column-gap: 2em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            -moz-column-rule: .1em dashed #ccc;
            -webkit-column-rule: .1em dashed #ccc;
            column-rule: .1em dashed #ccc;
            -webkig-column-fill: balance;
            -moz-column-fill: balance;
            column-fill: balance;
        }
        h1 {
            font-size: 1.5em;
            margin-bottom: 1em;
            -moz-column-span: all;
            -webkit-column-span: all;
            column-span: all;
            padding-bottom: 5px;
            text-align: center;
            border-bottom: 2px solid #ccc;
        }
        p {
            margin-bottom: 1em;
            text-indent: 2em;
            line-height: 1.625;
            font-size: .7em;
        }
    </style>
    <div>
        <h1>为什么您宁愿吃生活的苦,也不愿吃学习的苦?</h1>
      <h3>一. 为什么大多数人宁愿吃生活的苦,也不愿吃学习的苦?</h3>
        <p>记得小时候上学,学校每次放月假,爷爷就去车站接我回家。
那时家里离车站远,需要骑着车子来回。
一路上我们彼此相对无语,等到爷爷骑不动了,我们就这么一前一后推着车子走着,记得爷爷常常和我说:
“吃得苦中苦,方为人上人,你日后要好生读书。”
那时的我未解其意,只是默默记在心里,望着不远处稻田里的乡亲们弯腰割麦俯首插秧,我觉着他们太辛苦了。
几年过去了,我考入了省城上大学,学了这个城市最热门也最富前景的工程造价专业。
后来,我走进实习单位, 工地的环境有多么糟糕自不必多说,晴天尘土飞扬骄阳似火,雨天泥泞不堪污水四溢。
物质世界的贫瘠尚可以忍受,然而精神世界的荒芜会随着时间慢慢消磨你的梦想和纯真。
后来,我选择去了深圳,在那里我终于找到了自己热爱的行业,眼前陌生的一切都让我感到兴奋和欢愉。
人工智能、自动驾驶、虚拟现实、风投、天使轮这些名词让我看到了世界的另一面。
越是不断地拓宽知识面,越是觉得自己知识储备量的贫瘠与荒凉。</p>
        <h3>二. 生活的痛苦使人麻痹,学习的痛苦让人清醒 ;过去不按思维而生活,终将有一天要按照生活而思维</h3>
        <p>痛苦之所以不被人喜欢,大多数是因为人们从不会思考自己为何痛苦。
然而,这世上还有另一种痛苦是,对这个世界产生了失望的情绪,然后把自己对这个世界的失望,当作是自己本该如此,甚至误以为这就是吃苦的好处。
我总觉得苦难的意义,在于我们更好地去思考人生为何如此苦难,就像有人曾说:未经省察的人生,从不值得一过。
如果没有经过思索和自省,苦难终究只是苦难而已,没有任何意义。
有些人,年轻时总觉得学不学习无关紧要,反正自己体力好得很,只要自己身体好就能混口饭吃。
他们终将会明白,那些为了讨生活不得已而吃的苦,就是当年不吃学习苦的代价。
学习的苦,是枯燥的苦,是短期没有回报的苦,这种苦看得见,摸得着,谁都不愿吃。
生活的苦,是绝望的苦,是长期没有出路的苦,这种苦看不见,摸不着,谁都不想吃。
我从不喜欢自讨苦吃,如果我能通过学习和自我提升避免遇见这些痛苦的经历,我有什么理由不去学习?
生活其实并不苦,苦的是那个不知苦也不知如何避免吃苦的人生。
学习其实并不苦,苦的是早已被生活消磨掉的好奇心和敢于对未来报有期望的勇气。</p>
    </div>

登录后复制

运行效果:

2345截图20180804155144.png

相关文章推荐:

css3-columns多列布局_html/css_WEB-ITnose

浅谈CSS3新特性之多列布局模块

CSS3 Columns好用的分列式布局

以上就是css3中新增属性:css3多列布局属性的总结(附实例)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号