CSS3学习笔记（六）

作者: dev_winner | 来源:发表于2019-08-27 11:25 被阅读0次

CSS3学习笔记（六）
Scss进阶篇3
css3学习笔记
css3学习笔记
CSS3学习笔记
CSS3 学习笔记
CSS3学习笔记
07day
GO——学习笔记（七）
前端学习笔记-CSS3

布局样式

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module），其主要应用在文本的多列布局方面。
语法：就两个属性参数：列宽和列数。例如：要显示2栏显示，每栏宽度为200px，代码为columns: 200px 2;。

columns：<column-width> || <column-count>

column-width属性在定义元素列宽时，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示：

column-width: auto | <length>

属性值	说明
auto	若设置值为auto或者没有显式地设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。
<length>	使用固定值来设置元素列的宽度；由数值和长度单位组成；只能是正值，不能为负值。

column-count：用来给元素指定列数或允许的最大列数。语法：

column-count：auto | <integer>

例如：将列分成四列显示，代码如下：column-count:4;

属性值	说明
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：用来设置列与列之间的间距。语法：

column-gap: normal || <length>

例如：将内容分三列显列，列与列之间的间距为2em，实现代码为：column-count: 3; column-gap: 2em;

属性值	说明
normal	默认值为`1em`（若字号单位为`px`，则默认值为设置的`font-size值`）。
<length>	此值用来设置列与列之间的距离，其可以使用`px`、`em`单位的任何整数值，但`不能是负值`。

column-rule：用来定义列与列之间的边框宽度、边框样式和边框颜色。类似于border属性。但column-rule是不占用任何空间位置，在列与列之间改变其宽度不会改变任何列的位置！语法：

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

属性值	说明
column-rule-width	类似于border-width属性，主要用来定义`列边框的宽度`，其默认值为`medium`，接受`任意浮点数`，但`不接受负值`。但也像border-width属性一样，可以使用关键词：`medium`、`thick`和`thin`。
column-rule-style	类似于border-style属性，主要用来定义`列边框样式`，其默认值为`none`。其与border-style属性值相同，包括`none`、`hidden`、`dotted`、`dashed`、`solid`、`double`、`groove`、`ridge`、`inset`、`outset`。
column-rule-color	类似于border-color属性，主要用来定义`列边框颜色`，其默认值为`前景色color的值`，使用时相当于`border-color`。其接受所有的颜色；若不希望显示颜色，也可以将其设置为`transparent(透明色)`。

例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为：column-rule: 2px dotted green;。

<!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：用来定义一个分列元素中的子元素能跨列多少。语法：

column-span: none | all

属性值	说明
none	默认值，表示不跨越任何列。
all	这个值跟none值刚好相反，表示的是`元素跨越所有列`，并定位在`列的Ｚ轴`之上。

<!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盒子模型

CSS中有一种基础设计模式叫盒模型，盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型，包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响。

盒模型的3D展示图

从图中可以看出padding属性和content属性层叠background-image属性，继而层叠background-color属性，它们四者之间构成了Ｚ轴（垂直屏幕的坐标）多重层叠关系。但是border属性与margin属性、padding属性三者之间应该是平面上的并级关系，并不能构成Ｚ轴的层叠关系。
box-sizing：在CSS中盒模型被分为两种：w3c的标准模型和IE的传统模型，其相同之处都是对元素计算尺寸的模型，具体说是对元素的width、height、padding和border以及元素实际尺寸的计算关系；不同之处是两者的计算方法不一致，原则上来说盒模型是分得很细的，这里所看到的主要是外盒模型和内盒模型，如下面计算公式：

1、W3C标准盒模型

外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋内距＋边框＋外距
element空间宽度＝内容宽度＋内距＋边框＋外距
内盒尺寸计算（元素大小）
element高度＝内容高度（height）＋内距＋边框
element宽度＝内容宽度（width）＋内距＋边框

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

外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）
内盒尺寸计算（元素大小）
element高度＝内容高度（height包含了元素内容宽度、边框、内距）
element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下：

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怪异模式），也就是说`元素的宽度或高度`等于`元素内容的宽度或高度`。从上面盒模型介绍可知，这里的内容宽度或高度包含了`元素的border`、`padding`、`内容的宽度或高度`（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。
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>