CSS3 简介

CSS 用于控制网页的样式和布局,CSS3 是最新的 CSS 标准。

CSS3速查手册使用

新增选择器

关系选择器

• E~F 选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。

属性选择器

• E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
• E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素。
• E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。

伪类选择器

• E:not(s) 匹配不含有s选择符的元素E。
• E:first-child (匹配父元素第一个子元素E)。
• E:last-child 匹配父元素的最后一个子元素E。
• E:nth-child(n) 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
• E:enabled 匹配用户界面上处于可用状态的元素E。
• E:disabled 匹配用户界面上处于禁用状态的元素E。
• E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

伪对象选择器

• E:before/E::before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
• E:after/E::after 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
• E::placeholder 设置对象文字占位符的样式。
• E::selection 设置标签中文本被选中的样式，只支持background-color，color及text-shadow(IE11尚不支持定义该属性)。

CSS3将伪对象选择器前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择器但以前的写法仍然有效。

取值与单位

长度

• rem 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
• vw 相对于视口的宽度。视口被均分为100单位的vw
• vh 相对于视口的高度。视口被均分为100单位的vh

角度

• deg 度（Degrees）。一个圆共360度

时间

• s 秒 1s = 1000ms
• ms 毫秒

颜色

• RGBA(R,G,B,A)
  • R： 红色值。正整数 | 百分数
  • G： 绿色值。正整数 | 百分数
  • B： 蓝色值。正整数 | 百分数
  • A： 透明度。取值0 - 1之间。
• HSL(H,S,L)
  • H：色调。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
  • S：饱和度。取值为：0.0% - 100.0%
  • L：亮度。取值为：0.0% - 100.0%
• HSLA(H,S,L,A)
  • A：透明度。取值0 - 1之间。

边框

• border-radius 简写属性。定义元素的圆角
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
• box-shadow 定义元素的阴影
  

背景

• background 简写属性。定义元素的背景特性
  • background-image 定义元素使用的背景图像
  • background-position 指定背景图像在元素中出现的位置
  • background-repeat 定义元素的背景图像如何填充
  • background-attachment 定义滚动时背景图像相对于谁固定
  • background-size 定义背景图像的尺寸大小

文本

• text-transform 定义元素的文本如何转换大小写
• text-shadow 定义文字是否有阴影及模糊效果

弹性盒子

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。使用弹性盒子可以更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子分为 容器 与 子元素， 通过情况下需要分别为容器与子元素设置属性。

1. 当标签设置属性display:flex后那么该元素就是弹性盒子容器。
2. 元素内部直接子级标签就是子元素。

容器属性

flex-direction

flex-direction 决定子元素的排列方向。

flex-direction：row | row-reverse | column | column-reverse

flex-wrap

flex-wrap 规定flex容器是子元素宽度超过容器时是否换行。

flex-wrap：nowrap | wrap | wrap-reverse

• nowrap 示例

  

• wrap示例

• wrap-reverse示例

flex-flow

flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow：<' flex-direction '> || <' flex-wrap '>

align-items

align-items 定义flex子元素在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

align-items：flex-start | flex-end | center | baseline | stretch

justify-content

justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

justify-content：flex-start | flex-end | center | space-between | space-around

子元素属性

order

order 设置子元素排列顺序

order：<integer>

flex-grow

flex-grow 设置或检索弹性盒子元素的扩展比率

flex-grow：<number>

flex-shrink

flex-shrink 子元素的收缩比率

flex-shrink：<number>

flex-basis

flex-basis 设置或检索弹性盒伸缩基准值

flex-basis：<length> | <percentage> | auto | content

flex

复合属性:flex-grow、flex-shrink 、flex-basis 。

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

align-self

align-self 子元素上使用。覆盖容器的 align-items 属性

align-self：auto | flex-start | flex-end | center | baseline | stretch

用户界面

修改盒子模型

box-sizing：content-box | border-box

1. 标准盒模型

1
2
3
4
5
6

.test1{
    box-sizing:content-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}

1. 怪异盒模型

1
2
3
4
5
6

.test1{
    box-sizing:border-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}

渐变

• linear-gradient() 用线性渐变创建图像。

• radial-gradient() 用径向渐变创建图像。

  • 示例

  1 2 3 4 5 6 7 8

  .box{ width: 250px; height: 250px; background: red; border-radius: 50%; /* 直径100px位置 左上35% */ background: radial-gradient(circle 100px at 35% 35%, #fff, #ff0); box-shadow: 0 0 8px #ff0; }

  

过渡 transition

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果

设置过渡的属性：transition-property

1. transition-property默认值为：all。默认为所有可以进行过渡的css属性。

2. 如果提供多个属性值，以逗号进行分隔。

   注意：不是所有的属性都可以设置过渡效果。

2d3d变换 transform

转换是CSS3中新特征之一，可以实现元素的位移、旋转、变形、缩放，等动画效果

2d

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<style>
    ul{
        list-style: none;
    }
    ul>li{
        width: 100px; height: 100px;
        background: red; border: 1px solid #fff;
        color: #fff; font-size: 2em;
        line-height: 100px; text-align: center; 
    }
    li:nth-child(1){
        /* 缩放 */
        transform: scale(.8);
    }
    li:nth-child(2){
        /* 平移 */
        transform: translate(10px);
    }
    li:nth-child(3){
        /* 旋转 */
        transform: rotate(45deg);
    }
    li:nth-child(4){
        /* 扭曲 */
        transform: skew(45deg);
    }
</style>
<ul>
    <li>缩放</li>
    <li>平移</li>
    <li>旋转</li>
    <li>扭曲</li>
</ul>

3d

位移案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<style>
    *{ padding: 0; margin: 0; }
    .box{
        width: 500px;height: 500px;
        border: 1px solid red;
        position: relative;
        transform: rotateX(60deg) rotateY(-30deg);
		//设置透视
        perspective: 1000px;
    }
    img{
        position: absolute;
        width: 100px; height: auto;
        border: 1px solid gray;
    }
    .img2{
        /* transform: perspective(1000px) translate3d(102px,0px,300px); */
        transform: translate3d(102px,0px,300px);
    }

</style>

<div class="box">
    <img class="img1" src="./img1.png" alt="">
    <img class="img2" src="./img1.png" alt="">
</div>

正方体案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .cube {
        position: relative;
        background: red;
        font-size: 80px;
        width: 2em;
        margin: 1.5em auto;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(30deg);
    }

    .cube>div {
        /* 所有子元素堆叠在一起 */
        position: absolute;
        width: 2em;
        height: 2em;
        background: rgba(0, 0, 0, .1);
        border: 1px solid #999;
        color: white;
        text-align: center;
        line-height: 2em;
    }

    .front {
        transform: translateZ(1em);
    }

    .top {
        transform: rotateX(90deg) translateZ(1em);
    }

    .right {
        transform: rotateY(90deg) translateZ(1em);
    }

    .left {
        transform: rotateY(-90deg) translateZ(1em);
    }

    .bottom {
        transform: rotateX(-90deg) translateZ(1em);
    }

    .back {
        transform: rotateY(-180deg) translateZ(1em);
    }
</style>
<div class="cube">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
</div>

动画

可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

keyframes 语法

@keyframes <name> { <keyframes-blocks> }

1
2
3
4
5
6
7
8

@keyframes testanimations {
	from { transform: translate(0, 0); }
	20% { transform: translate(20px, 20px); }
	40% { transform: translate(40px, 0); }
	60% { transform: translate(60px, 20); }
	80% { transform: translate(80px, 0); }
	to { transform: translate(100px, 20px); }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//动画使用案例
.box {
    width: 100px;  height: 100px;
    background: red;

    /* animation: testanim 1s 3; */
    animation-name: testanim; /*动画名称*/
    animation-duration: 1s; /*持续时间*/
    animation-iteration-count: 5; /*持续次数 */
}

@keyframes testanim {
    from {
        background: red;
        transform: translate(0, 0);
    }

    50% {
        background: yellow;
        transform: translate(60px,0);
    }

    to {
        background: black;
        transform: translate(100px,0);
    }
}

animate.css

Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.

安装 ：

1. npm install animate.css --save

2. cdn https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css

基本用法：

安装Animate.css之后，将类animate__animated以及动画名称添加到元素中（不要忘记animate__前缀！）

1

<h1 class="animate__animated animate__bounce">An animated element</h1>

媒体查询

在CSS2中媒体查询可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。css3在css2的基础之上改进了查找设备的类型，CSS3 根据设置自适应显示。媒体查询可用于检测很多事情，例如：viewport(视窗) 的宽度与高度、设备的宽度与高度、朝向 (智能手机横屏，竖屏) 、分辨率。

• @media 指定样式表规则用于指定的媒体类型和条件。

  • 示例

  1 2 3 4 5

  @media screen and (max-width: 300px) { body { background-color:lightblue; } }

字体图标库

字体图片库可以在让在页面中设置图标颜色大小像设置文本一样便捷。
推荐使用 阿里巴巴矢量图标库

网格布局（Grid)

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

Flex 布局是轴线布局，只能指定”项目”针对轴线(X,Y 水平线和垂直线)的位置，可以看作是一维布局。Grid 布局则是将容器划分成 行和列，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

窗口与子元素

网格分为 容器 与 子元素， 与flex一机子元素是指容器的直接子级。

display：grid 或 display：inline-grid 来创建一个网格容器。

网格的行和列

grid-template-columns 定义每一列的宽度。grid-template-rows 定义每一行的高度值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

 <style>
    .box {
        display: grid; /*网格布局*/
        
        grid-template-columns:100px 100px 100px; /* 定义网格有3列，并指定每一列的宽度值 */
        grid-template-rows: 100px 100px 100px; /* 定义每一行的高度值 */
    }
 </style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

运行效果：

grid-template-columns grid-template-rows 的取值个数并不固定，多个值之间用空格分隔， 第一个参数值表示第一行或第一列，第二个参数值表示第二行或第二列，以此类推。

1. grid-template-columns 定义了网格共有多少列，并指定每一列的宽度。
2. grid-template-rows 定义了网格中行的高度。如果实际的子元素组成的行超过了设置的行数值，则内容撑开行高。

单位 fr

grid-template-columns grid-template-rows 可以使用任意的长度单位来定义。新的fr单位代表网格容器中可用空间的一等份，可以使网络布局更加的灵活。

1
2
3
4
5

.box {
    display: grid;
    grid-template-columns:1fr 2fr 3fr; /* fr平分可用的父级可用的宽度值 */
    grid-template-rows: 100px 100px 100px; 
}

minmax(min, max)

是一个来定义大小范围的属性，大于等于min值，并且小于等于max值。如果max值小于min值，则该值会被视为min值。

1
2
3
4
5

.box {
    display: grid; 
    grid-template-columns:200px 1fr minmax(300px,500px); 
    grid-template-rows: 100px 100px 100px; 
}

auto

auto关键字表示由浏览器自己决定长度。

1
2
3
4
5

.box {
    display: grid; 
    grid-template-columns:200px auto minmax(300px,500px); 
    grid-template-rows: 100px 100px 100px; 
}

repeat()

使用 repeat() 函数可以简化行与列的赋值

1
2
3
4
5
6
7

.box {
    display: grid; 
    /* grid-template-columns:1fr 1fr 1fr;  */
    grid-template-columns:repeat(3, 1fr) ; 
    /* grid-template-rows: 100px 100px 100px;  */
    grid-template-rows: repeat(3,100px); 
}

repeat()函数参数说明：

1. 第一个参数: 列/行 数
2. 第二个参数: 第 行/列 的 高度/宽高值

多出单元格的设置宽高设置

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。

1
2
3
4
5
6
7

.box {
    display: grid; 
    grid-template-columns:repeat(2, 100px) ; 
    grid-template-rows: repeat(2,100px); 
    /* 设置超出部分 */
    grid-auto-rows: 50px;
}

运行效果：

网格行和列优先排列

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，即先填满第一行，再开始放入第二行。

grid-auto-flow 可以修改排列的顺序。默认值是row，即”先行后列”。也可以将它设成column，变成”先列后行”。

子元素设置

合并单元格

1. grid-column-start 合并列的起始位置

2. grid-column-end 合并列的结束位置

3. grid-row-start 合并行的起始位置

4. grid-row-end 合并行的结束位置

1
2
3
4
5
6
7
8
9
10
11
12

.box {
    display: grid; 
    grid-template-columns:repeat(3, 100px) ; 
    grid-template-rows: repeat(5,100px); 
}

.box>div:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

运行效果：

单元格层叠

在合并单元格时多个单元格可以占用同一个位置，出现单元格层叠。使用z-index可以控制单元格的层叠的顺序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.box {
    border: 1px solid gray;
    display: grid; 
    
    grid-template-columns:repeat(3, 1fr) ; 
    grid-template-rows: repeat(5,100px); 
}

.box>div:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;

    z-index: 900;
}

.box>div:nth-child(2){
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start:2;
    grid-row-end: 4;
    
    z-index: 700;
}

运行效果：

单元格间距

1. grid-column-gap 横向间距
2. grid-row-gap 纵向间距

1
2
3
4
5
6
7
8
9
10

.box {
    border: 1px solid gray;
    display: grid; 

    grid-template-columns:repeat(3, 1fr) ; 
    grid-template-rows: repeat(5,100px); 

    grid-column-gap: 10px; /* 列间距 */
    grid-row-gap: 20px; /* 行间距 */
}

运行效果：

网格嵌套

一个网格子元素可以也成为一个网格容器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<style>
        .box {
            border: 1px solid gray;
            display: grid; 
            
            grid-template-columns:repeat(3, 1fr) ; 
            grid-template-rows: repeat(5,100px); 

            grid-column-gap: 10px; /* 列间距 */
            grid-row-gap: 20px; /* 行间距 */
        }

        .box>div:nth-child(1){
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3;

            /* 子元素 也设置为网格布局 */
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(5,30px); 
        }
</style>
<div class="box">
    <div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
    </div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

网格布局的对齐方式

单元格内 内容对齐方式

1. justify-items属性设置单元格内容的水平位置（左中右）
2. align-items属性设置单元格内容的垂直位置（上中下）。

这两个属性的写法完全相同，都可以取下面这些值。

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

1. place-items属性是align-items属性和justify-items属性的合并简写形式。
   • place-items: <align-items> <justify-items>;

1
2
3
4
5
6
7
8

.box {
    display: grid; 
    grid-template-columns:repeat(3, 100px) ; 
    grid-template-rows: repeat(3,100px); 

    justify-items: end;
    align-items: end;
}

运行效果：

网格内容在容器内部了的对齐方式

1. justify-content 属性，
   justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
2. align-content 属性，
   align-content: start | end | center | stretch | space-around | space-between | space-evenly;
3. place-content 属性
   place-content: <align-content> <justify-content>

• start - 对齐容器的起始边框。
• end - 对齐容器的结束边框。
• center - 容器内部居中。
• stretch - 项目大小没有指定时，拉伸占据整个网格容器。
• space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
• space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
• space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

1
2
3
4
5
6
7
8
9
10
11
12

body,html,.box{
    height:  100%;
    background: rgb(223, 223, 223);
}
.box {
    display: grid; 
    grid-template-columns:repeat(3, 100px) ; 
    grid-template-rows: repeat(3,100px); 

    justify-content: center;
    align-content: center;
}

运行效果：

子元素内设置对齐方式

1. justify-self 属性，
   justify-self: start | end | center | stretch;
2. align-self 属性，
   align-self: start | end | center | stretch;
3. place-self 属性
   place-self: <align-self> <justify-self>;

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。