CSS3学习笔记(六)

2019-08-27  本文已影响0人  dev_winner

布局样式

columns:<column-width> || <column-count>
column-width: auto | <length>
属性值 说明
auto 若设置值为auto或者没有显式地设置值时,元素多列的列宽将由其他属性来决定,比如前面的示例就是由列数column-count来决定。
<length> 使用固定值来设置元素列的宽度;由数值和长度单位组成;只能是正值,不能为负值。
column-count:auto | <integer>
属性值 说明
auto 默认值,表示只有一列,其主要依靠浏览器计算自动设置。
<integer> 此值为正整数值,主要用来定义元素的列数,取值为大于0的整数,非正值无效。
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>columns</title>
    <style type="text/css">
    .columns {
        width: 600px;
        padding: 5px;
        border: 1px solid green;
        margin: 20px auto;
        -webkit-columns: 180px 3;
        -moz-columns: 180px 3;
        -o-columns: 180px 3;
        -ms-columns: 180px 3;
        /*定义每列的宽为180px 一共有3列*/
        columns: 180px 3;
    }
    </style>
</head>
<body>
    <div class="columns">
        <h2>科比·布莱恩特</h2>
        <p>1996年,科比被当时的夏洛特黄蜂以首轮第13顺位选中,随即他被交易到湖人。在漫长的职业生涯里,科比帮助球队先后夺取5座总冠军。而飞侠本人在07-08赛季荣膺常规赛MVP。在目前的历史得分榜上,科比排名第三位,仅次于贾巴尔与马龙。</p>
        <p>北京时间11月30日,科比在《球员论坛网》发表文章,宣布本赛季结束后正式退役。距离湖人送给勇士开局第16场连胜仅过去5天,那场比赛科比全场14投仅1中。他说:“这个赛季结束后,我已经离开了”。他曾经说:“当我退役时,那是因为我自己选择离开”。</p>
    </div>
</body>
</html>
设置多列布局
column-gap: normal || <length>
属性值 说明
normal 默认值为1em(若字号单位为px,则默认值为设置的font-size值)。
<length> 此值用来设置列与列之间的距离,其可以使用pxem单位的任何整数值,但不能是负值
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
属性值 说明
column-rule-width 类似于border-width属性,主要用来定义列边框的宽度,其默认值为medium,接受任意浮点数,但不接受负值。但也像border-width属性一样,可以使用关键词:mediumthickthin
column-rule-style 类似于border-style属性,主要用来定义列边框样式,其默认值为none。其与border-style属性值相同,包括nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
column-rule-color 类似于border-color属性,主要用来定义列边框颜色,其默认值为前景色color的值,使用时相当于border-color。其接受所有的颜色;若不希望显示颜色,也可以将其设置为transparent(透明色)
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>列表边框column-rule</title>
    <style type="text/css">
    .columns {
        padding: 5px;
        border: 1px solid green;
        width: 900px;
        margin: 20px auto;

        -webkit-column-count: 3;
        -moz-column-count: 3;
        -o-column-count: 3;
        -ms-column-count: 3;
        column-count: 3;

        -webkit-column-gap: 2em;
        -moz-column-gap: 2em;
        -o-column-gap: 2em;
        -ms-column-gap: 2em;
        column-gap: 2em;

        -webkit-column-rule: 3px solid grey;
        -moz-solumn-rule: 3px solid grey;
        -o-column-rule: 3px solid grey;
        -ms-column-rule: 3px solid grey;
        column-rule: 3px solid grey;
    }
    </style>
</head>
<body>
    <div class="columns">
        <h2>科比·布莱恩特</h2>
        <p>1996年,科比被当时的夏洛特黄蜂以首轮第13顺位选中,随即他被交易到湖人。在漫长的职业生涯里,科比帮助球队先后夺取5座总冠军。而飞侠本人在07-08赛季荣膺常规赛MVP。在目前的历史得分榜上,科比排名第三位,仅次于贾巴尔与马龙。</p>
        <p>北京时间11月30日,科比在《球员论坛网》发表文章,宣布本赛季结束后正式退役。距离湖人送给勇士开局第16场连胜仅过去5天,那场比赛科比全场14投仅1中。他说:“这个赛季结束后,我已经离开了”。他曾经说:“当我退役时,那是因为我自己选择离开”。</p>
        <p>科比的职业生涯随湖人队5夺NBA总冠军(2000年、2001年、2002年、2009年与2010年);荣膺1次常规赛MVP(2007-08赛季),2次总决赛MVP(2009年与2010年),4次全明星赛MVP(2002年、2007年、2009年与2011年),与鲍勃·佩蒂特并列NBA历史第一;共18次入选NBA全明星阵容,15次入选NBA最佳阵容,12次入选NBA最佳防守阵容。</p>
        <p>科比是NBA最好的得分手之一,生涯赢得无数奖项,突破、投篮、罚球、三分球他都驾轻就熟,几乎没有进攻盲区,单场比赛81分的个人纪录就有力地证明了这一点。除了疯狂的得分外,科比的组织能力也很出众,经常担任球队进攻的第一发起人。另外科比还是联盟中最好的防守人之一,贴身防守非常具有压迫性。</p>
    </div>
</body>
</html>
设置列表边框样式
column-span: none | all
属性值 说明
none 默认值,表示不跨越任何列。
all 这个值跟none值刚好相反,表示的是元素跨越所有列,并定位在列的Z轴之上。
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>跨列设置column-span</title>
    <style type="text/css">
    .columns {
        padding: 5px;
        border: 1px solid green;
        width: 900px;
        margin: 20px auto;
        text-align: center;

        -webkit-column-count: 3;
        -moz-column-count: 3;
        -o-column-count: 3;
        -ms-column-count: 3;
        column-count: 3;

        -webkit-column-gap: 2em;
        -moz-column-gap: 2em;
        -o-column-gap: 2em;
        -ms-column-gap: 2em;
        column-gap: 2em;

        -webkit-column-rule: 3px gray solid;
        -moz-column-rule: 3px gray solid;
        -o-column-rule: 3px gray solid;
        -ms-column-rule: 3px gray solid;
        column-rule: 3px gray solid;
    }
    h2 {
        background: green;
        padding: 10px;
        color: #fff;
    }
    /*让所有偶数段落和标题,跨越所有列*/
    h2,
    p:nth-child(2n) {
        -webkit-column-span: all;
        -moz-column-span: all;
        -o-column-span: all;
        -ms-column-span: all;
        column-span: all;
    }
    </style>
</head>
<body>
    <div class="columns">
        <h2>科比·布莱恩特</h2>
        <p>1996年,科比被当时的夏洛特黄蜂以首轮第13顺位选中,随即他被交易到湖人。在漫长的职业生涯里,科比帮助球队先后夺取5座总冠军。而飞侠本人在07-08赛季荣膺常规赛MVP。在目前的历史得分榜上,科比排名第三位,仅次于贾巴尔与马龙。</p>
        <p>北京时间11月30日,科比在《球员论坛网》发表文章,宣布本赛季结束后正式退役。距离湖人送给勇士开局第16场连胜仅过去5天,那场比赛科比全场14投仅1中。他说:“这个赛季结束后,我已经离开了”。他曾经说:“当我退役时,那是因为我自己选择离开”。</p>
        <p>科比的职业生涯随湖人队5夺NBA总冠军(2000年、2001年、2002年、2009年与2010年);荣膺1次常规赛MVP(2007-08赛季),2次总决赛MVP(2009年与2010年),4次全明星赛MVP(2002年、2007年、2009年与2011年),与鲍勃·佩蒂特并列NBA历史第一;共18次入选NBA全明星阵容,15次入选NBA最佳阵容,12次入选NBA最佳防守阵容。</p>
        <p>科比是NBA最好的得分手之一,生涯赢得无数奖项,突破、投篮、罚球、三分球他都驾轻就熟,几乎没有进攻盲区,单场比赛81分的个人纪录就有力地证明了这一点。除了疯狂的得分外,科比的组织能力也很出众,经常担任球队进攻的第一发起人。另外科比还是联盟中最好的防守人之一,贴身防守非常具有压迫性。</p>
        <p>科比是NBA最好的得分手之一,生涯赢得无数奖项,突破、投篮、罚球、三分球他都驾轻就熟,几乎没有进攻盲区,单场比赛81分的个人纪录就有力地证明了这一点。除了疯狂的得分外,科比的组织能力也很出众,经常担任球队进攻的第一发起人。另外科比还是联盟中最好的防守人之一,贴身防守非常具有压迫性。</p>
        <p>2016年4月14日,科比·布莱恩特在生涯最后一场主场对阵爵士的常规赛后宣布退役。 [1] 2017年12月19日,湖人主场对阵勇士,中场时刻为科比的8号和24号2件球衣举行了退役仪式。 [3] 2018年3月13日,科比凭借和动画师格兰·基恩合作的短片《亲爱的篮球》获得第90届奥斯卡最佳短片奖。</p>
    </div>
</body>
</html>
设置元素跨列

CSS3盒子模型

盒模型的3D展示图

1、W3C标准盒模型

外盒尺寸计算(元素空间尺寸)
element空间高度=内容高度+内距+边框+外距
element空间宽度=内容宽度+内距+边框+外距
内盒尺寸计算(元素大小)
element高度=内容高度(height)+内距+边框
element宽度=内容宽度(width)+内距+边框

2、IE传统下盒模型(IE6以下,不包含IE6版本或“QuirksMode下IE5.5+”)

外盒尺寸计算(元素空间尺寸)
element空间高度=内容高度+外距(height包含了元素内容宽度、边框、内距)
element宽间宽度=内容宽度+外距(width包含了元素内容宽度、边框、内距)
内盒尺寸计算(元素大小)
element高度=内容高度(height包含了元素内容宽度、边框、内距)
element宽度=内容宽度(width包含了元素内容宽度、边框、内距)
box-sizing: content-box | border-box | inherit
属性值 说明
content-box 默认值,其让元素维持W3C的标准盒模型,即element width/height = border + padding + content width / height
border-box 重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的盒模型(IE6以下版本和IE6-7怪异模式),也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知,这里的内容宽度或高度包含了元素的borderpadding内容的宽度或高度(此处的内容宽度或高度=盒子的宽度或高度—边框—内距)。
inherit 使元素继承父元素的盒模型模式
content-box与border-box的区别
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子模型</title>
    <style type="text/css">
    h1 {
        font-size: 20px;
        margin: 0;
        color: #fff;
    }
    /*推荐使用before和after伪元素清除浮动元素*/
    #page:after,
    #page:before {
        content: "";
        /*  此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
        块级可清除浮动元素
        */
        display: table;
    }
    #page:after {
        /*清除浮动元素*/
        clear: both;
        /*隐藏溢出的内容*/
        overflow: hidden;
    }
    #page {
        margin-bottom: 20px;
    }
    #header {
        width: 100%;
        background: green;
        margin-bottom: 10px;
        padding: 20px;
    }
    .main {
        width: 60%;
        padding: 20px;
        background: orange;
        /*设置浮动*/
        float: left;
    }
    .sidebar {
        width: 38%;
        /*设置浮动,使得其紧跟在元素main content后面并排成一行*/
        float: right;
        background: #f36;
        padding: 20px;
    }
    #footer {
        width: 100%;
        background: #36f;
        padding: 20px;
        /*清除浮动元素*/
        clear: both;
    }
    #header,
    .main,
    .sidebar,
    #footer {
        /*默认是box-sizing:content-box;
        改为 border-box 盒子不被撑破,使布局能正常显示
        */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }
    </style>
</head>
<body>
    <div id="header">
        <h1>Header Content</h1>
    </div>
    <div id="page">
        <div class="main">
            <h1>Main Content</h1>
        </div>
        <div class="sidebar">
            <h1>Sidebar Content</h1>
        </div>
    </div>
    <div id="footer">
        <h1>Footer Content</h1>
    </div>
</body>
</html>
image.png

参考文章

上一篇 下一篇

猜你喜欢

热点阅读