Html5+Css3 — CSS3篇

419 阅读37分钟

内容

CSS3简介

如同人类的的进化一样,CSS3CSS2的“进化”版本,在CSS2基础上,增强新增了许多特性,弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。

CSS3现状

  • 浏览器支持程度差,需要添加私有前缀
  • 移动端支持优于PC端
  • 不断改进中
  • 应用相对广泛

如何对待?

  • 坚持渐进增强原则
  • 考虑用户群体
  • 遵照产品的方案
  • 听Boss的

如何使用手册?

  • [] 表示可选项
  • || 表示或者
  • | 表示多选一
  • ? 0个或1个
  • * 表示0个或多个
  • {} 表示范围

image.png

选择器

CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率精准度。css3选择器与jQuery中所提供的绝大部分选择器兼容

属性选择器

属性选择器:属性是相对于标签而言。所谓属性选择器就是根据指定名称的属性的值来查找元素。

a) E[attribute] 表示存在attr属性即可;
div[class]

b) E[attr = val] 表示属性值完全等于val;
div[class = mydemo]

c) E[attr *= val] 表示的属性值里包含val字符并且在“任意”位置;
div[class *= mydemo]

d) E[attr ^= val] 表示的属性值里包含val字符并且在“开始”位置;
div[class ^= mydemo]

e) E[attr $= value]:查找拥有指定的attr属性并且属性值以value开结束的E标签。

示例:

<style type="text/css">
    li[style] {
            text-decoration: underline;
    }
    li[class = red]{
            color: red;
    }
    li[class *= bigfontsize]{
            font-size: 20px;
    }
    li[class ^= bluebackground]{
            background-color: blue;
    }
</style>

<ul>
    <li class="" style="">语句1</li>
    <li class="red">语句2</li>
    <li class="red bigfontsize bluebackground">语句3</li>
    <li class="bluebackground bigfontsize red ">语句4</li>
</ul> 

image.png

伪类选择器

a) 之前学习的:a:hover a:link a:active a:visited
b) 以某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类

结构伪类 分为两类:
1 相对于兄弟元素的
2 相对于父元素的

1 . 相对于兄弟元素的结构伪类
+:获取当前元素的相邻的满足条件的元素。(只找相邻的后面的兄弟元素)
~:获取当前元素的满足条件的兄弟元素。(只找后面的兄弟元素)

示例:相对于兄弟元素的伪类。

<style type="text/css">
    .first{
        color: red;
    }
    /*
    查找:添加了.first样式的标签的相邻的li元素。
    */
    .first + li{
        text-decoration: underline;
    }
    .first ~ li{
        background-color: pink;
    }
</style>

<ul>
    <li>前端与移动开发</li>
    <li>java</li>
    <li class="first">javascript</li>
    <li>c++</li>
    <li>平面设计</li>
</ul>

image.png

2 . 相对于父元素的结构伪类

*-child系列
E:first-child 查找E这个元素的父元素的第一个子元素,再判断是否是E类型。
E:last-child 查找E这个元素的父元素的最后一个子元素,再判断是否是E类型。
E:nth-child(n) 第n个子元素,计算方法是E元素的全部兄弟元素
E:nth-last-child(n) 同E:nth-child(n)相似,只是倒着计算
E:nth-child(even) 所有的偶数
E:nth-child(odd) 所有的奇数

*-of-type系列
E:first-of-type 先筛选出E这个元素的父元素中的所有E类型的子元素,再找其中的第一个。
E:last-of-type 先筛选出E这个元素的父元素中的所有E类型的子元素,再找其中的最后一个。
E:nth-of-type(n) 索引n的取值范围:默认取值范围为 0 ~ 子元素的长度。但是当n<=0时,选取无效。

其它 E:empty 选中没有任何子节点的E元素,注意,空格也算子元素。
E:target 结台锚点进行使用,处于当前锚点的元素会被选中

注意
1、 *-child*-of-type的区别。
*-child 查找规则:先按位置查找,再判断类型。
*-of-type 查找规则:先筛选类型,再按照位置查找。

2、 指定索引位置:从1开始的索引 || 关键字 || 表达式 。

一些示例 示例1:*-child 查找规则。

li:first-child{
    background-color: pink;
}
li:last-child{
    background-color: blue;
}
li:nth-child(3){
    background-color: green;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    ...
    <li>35</li>
</ul>

image.png

实例2:*-of-type 查找规则。

li:first-of-type{
    background-color: pink;
}
li:last-of-type{
    background-color: blue;
}

<ul>
    <p>0</p>
    <li>1</li>
    ...
    <li>35</li>
    <p>36</p>
</ul>

image.png

示例3:
E:nth-of-type(-n+5) 表示查找E这个元素的父元素中所有E类型子元素中的前5个。
E:nth-last-of-type(-n+5) 表示查找E这个元素的父元素中所有E类型子元素中的后5个。

伪元素选择器

E::beforeE::after

特点:
1.它的功能完全等价于一个dom元素。
2.但它不会在dom树中生成。

1 是一个行内元素,如果想设置宽高,则需要转换成块级元素。
2 必须添加content,哪怕不设置内容,也需要content:""。
3 E:after、E:before在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before 会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理。
4 E::before 定义在一个元素的内容之前插入。content属性定义的内容与样式。
5 注意:
1 . IE6、IE7与IE8(怪异模式 Quirks mode )不支持此伪元素
2 . CSS2中E:before或者E:after,是属于伪类的,并且没有伪元素的概念,CSS3中提出伪元素的概念E::before和E::after,并且归属到了伪元素当中,伪类里就不再存在E:before或者E:after伪类。

E::first-letter 文本的第一个字母或字(不是词组)
E::first-line 文本第一行
E::selection 可改变选中文本的样式。它只能设置显示的样式,而不能设置内容大小。

示例

示例1:E::beforeE::after的基本使用。

<style type="text/css">
    div:nth-of-type(1){
        position: relative;
        float: left;
        width: 300px;
        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        line-height: 200px;
        background-color: red;
    }
    div:nth-of-type(2){
        position: relative;
        float: left;
        width: 100px;
        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        line-height: 200px;
        background-color: blue;
    }
    div:nth-of-type(2)::before{
        position: absolute;
        top: -10px;
        left: -10px;
        content: "";
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 10px;
    }
    div:nth-of-type(2)::after{
        position: absolute;
        bottom: -10px;
        left: -10px;
        content: "";
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 10px;
    }
</style>

<div>限时优惠</div>
<div>10元</div> 

image.png

示例2:

<style type="text/css">
    /* 实现首字下沉 */
    p::first-letter{
        float: left; /* 文本环绕 */
        font-size: 40px;
        color: red;
    }
    p::first-line{
        color: blue;
    }
    p::selection{
        color: #fff;
        background-color: green;
    }
</style>

<p>眉毛上的汗水和眉毛下的泪水,你必须选择一样<br>
你不努力,活该生活在社会的最底层</p>

image.png

颜色

HTML5中添加了一些新的颜色的表示方式。

颜色是6位的16进制的数据。

RGBA

1 . RGBA:说得简单一点就是在RGB的基础上加进了一个通道Alphs。RGBA在RGB的基础上多了控制alpha透明度的参数。

R、G、B三个参数:
正整数值的取值范围为:0- 255。 百分数值的取值范围为:0.0% - 100.0%。 超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。

A参数:
取值在0~1之间,不可为负值。 0 完全透明, 1 完全半透明。

RGBA比元素设置CSS的透明度opacity更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体,同时也不会影响到其他元素的相关透明度。

image.png

background-color: rgba(255, 255, 0, .8);

HSLA

此色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度。

语法:

  • H:Hue(色调,色相)。0(或 360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0-360,过渡为:(红橙黄绿青蓝紫红)。
  • S:Saturation(饱和度)。取值为:0.0% - 100.0%。
  • L:Lightness(亮度)。取值为:0.0% - 100.0%,50%是平衡值。
  • A:Alpha透明度。取值0~1之间。

image.png

关于透明度的补充说明︰
a) opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度。
b) transparent不可调节透明度,始终完全透明。
c) 使用rgba来控制颜色,相对opacity ,不具有继承性。

文字阴影

text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用,产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。

1 . 语法:
text-shadow : none | <length> none | [<shadow>, ] * <shadow>或none |<color>[, <color> ]*

<length>:长度值,可以是负值。用来指定阴影的延伸距离。其中XOffset是水平偏移值,YOffset是垂直偏移值。
<shadow>:阴影的模糊值,不可以是负值,用来指定模糊效果的作用距离。
<color>:指定阴影颜色,也可以是rgba透明色。

image.png

2 . 说明

可以给一个对象应用一组或多组阴影效果,方式如前面的语法显示一样,用逗号隔开。

text-shadow: X-OffsetY-Offset Blur Color中

X-Offset
表示阴影的水平偏移距离,其值为正值时阴影向右偏移,如果其值为负值时,阴影向左偏移。

Y-Offset
是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移反之其值是负值时阴影向顶部偏移。

Blur
是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0。

Color
是指阴影的颜色,其可以使用rgba色。

示例:

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .para{
        margin: 20px auto;
        padding: 30px;
        width: 600px;
        color: #fff;
        font: 80px bold;
        background-color: #666;
    }
    .para1{
        text-shadow: -2px -2px 5px red;
    }
    .para2{
        text-shadow: 0px 0px 30px #fff;
    }
    /* 多层阴影 */
    .para3{
        text-shadow: 0px 0px 30px #fff, 0px 0px 50px red, 0px 0px 70px #fff;
    }
    .para4{
        color: #000000;
        text-shadow: 0px 1px 0px #fff;
    }
    /* 浮雕立体效果 */
    .para5{
        text-shadow: -1px -1px 0px #eee, -2px -2px 0px #ddd, -3px -3px 0px #ccc;
    }
    .para6{
        color: transparent;
        text-shadow: 0px 0px 5px red;
    }
</style>

<div class="para para1">中华人民共和国</div>
<div class="para para2">中华人民共和国</div>
<div class="para para3">中华人民共和国</div>
<div class="para para4">中华人民共和国</div>
<div class="para para5">中华人民共和国</div>
<div class="para para6">中华人民共和国</div>

image.png

盒模型

1 . 在默认情况下,CSS 设置的width仅仅是内容区的宽度,而非盒子的宽度。同样,高度类似。

真正盒子的宽度(在页面呈现出来的宽度)和高度,需要加上一些其它的属性。 a) padding + border + width = 盒子的宽度
b) padding + border + height = 盒子的高度

很明显,这不直观,很容易出错,造成网页中其它元素的错位。

2 . CSS3中可以通过 box-sizing 来指定盒模型,即可指定为 content-boxborder-box,这样我们计算盒子大小的方式就发生了改变。

box-sizing: content-box
默认值。
对象的实际宽度等于设置的width 值和border、padding之和。

width属性值仅仅是内容的宽度,盒子的最终的宽高值在 width的基础上再加上padding和border的宽度。

box-sizing: border-box
对象的实际宽度就等于设置的 width 值,即使定义有border和padding 也不会改变对象的实际宽度。

设置的width属性值就是盒子的最终的宽度,包含了border和padding和内容。如果添加了padding和border ,那么真正放置内容的区域会减小--但是它可以稳固页面的结构。

边框圆角

border-radius 可以通过值来定义样式相同的角,也对每个角分别定义。

1 . 值的说明∶

border-radius: *px
将创建四个大小一样的圆角

border-radius:*px *px *px *px
四个值分别表示左上角、右上角、右下角、左下角

border-radius:*px *px
第一个值表示左上角、右下角,第二个值表示右上角、左下角

border-radius:*px *px *px
第一个值表示左上角,第二个值表示右上角、左下角,第三个值表示右下角。

设置椭圆圆角:
border-radius: *px/*px
将创建四个大小一样的椭圆圆角,斜杠前的值表示水平半径,斜杠后的值表示垂直半径。

设置单个圆角:
border-top|bottm(垂直方向)-left|right(水平方向)-radius: *px

设置单个椭圆圆角:
border-top|bottm-left|right-radius: *px *px
前一个值 水平半径,后一个值 垂直半径。

设置四个角点的不同方向上的不同圆角值:
border-radius: *px *px *px *px/*px *px *px *px *px
斜杠前的值 表示水平半径 左上 右上 右下 左下
斜杠后的值 表示垂直半径 左上 右上 右下 左下

2 . 示意图:
以你设置的圆心,绘制圆弧与边框进行相切。圆心的位置由水平半径垂直半径决定。

image.png

示例1:边框圆角。

<style type="text/css">
    .box1{
        margin: 50px auto;
        width: 300px;
        height: 100px;
        background-color: pink;
        border-radius: 50px 10px;
    }
    /* 椭圆圆角 */
    .box2{
        margin: 50px auto;
        width: 300px;
        height: 100px;
        background-color: yellowgreen;
        border-radius: 150px/50px;
    }
    /* 单个圆角 */
    .box3{
        margin: 50px auto;
        width: 300px;
        height: 100px;
        background-color: gold;
        border-top-right-radius: 50px;
    }
    /* 单个椭圆圆角 */
    .box4{
        margin: 50px auto;
        width: 300px;
        height: 100px;
        background-color: blue;
        border-top-right-radius: 150px 50px;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

image.png

案例:android机器人。

复习以下知识点:
1 伪元素选择器
2 边框圆角

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .content{
        margin: 50px auto;
        width: 500px;
        height: 500px;
        border: 1px solid black;
    }
    /* 头部 */
    .header{
        position: relative;
        margin: 10px auto;
        width: 250px;
        height: 125px;
        background-color: green;
        border-radius: 125px 125px 0 0/125px 125px 0 0; /* 只有上面两个圆角 */
    }
    .header::before,.header::after{ /* 伪元素选择器 */
        content: "";
        position: absolute;
        display: block;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 10px;
    }
    .header::before{
        top: 60px;
        left: 80px;
    }
    .header::after{
        top: 60px;
        right: 80px;
    }
    /* 身体 */
    .body{
        position: relative;
        margin: 0 auto;
        width: 250px;
        height: 200px;
        background-color: green;
        border-radius: 0 0 10px 10px/0 0 10px 10px; /* 只有下面两个圆角 */
    }
    .body::before, .body::after{
        content: "";
        position: absolute;
        top: 0;
        width: 20px;
        height: 150px;
        background-color: green;
        border-radius: 10px;
    }
    .body::before{
        left: -40px;
    }
    .body::after{
        right: -40px;
    }
    /* 脚 */
    .footer{
        position: relative;
        margin: 0 auto;
        width: 250px;
        height: 100px;
    }
    .footer::before, .footer::after{
        content: "";
        position: absolute;
        top: 0;
        width: 20px;
        height: 100px;
        background-color: green;
        border-radius: 0 0 10px 10px/0 0 10px 10px; /* 只有下面两个圆角*/
    }
    .footer::before{
        left: 40px;
    }
    .footer::after{
        right: 40px;
    }
</style>

image.png

渐变

渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变。

线性渐变

linear-gradient 线性渐变 指沿着某条直线朝一个方向产生渐变效果。

语法: linear-gradient([<point> || <angle>,]? <stop>, <stop> [,<stop>]*)

linear-gradient(方向,开始颜色位置,颜色2位置,颜色3位置...);

参数说明:

  • 第一个参数表示线性渐变的方向,
    1. to left:设置渐变为从右到左。相当于: 270deg;
    2. to right:设置渐变从左到右。相当于: 90deg;
    3. to top:设置渐变从下到上。相当于: 0deg;
    4. to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。也可以直接指定度数,如45deg。
  • 第二个参数是起点颜色,可以指定颜色的位置。
  • 第三个参数是终点颜色,你还可以在后面添加更多的参数,表示多种颜色的渐变。

image.png

示例:

<style type="text/css">
    .btn{
        margin: 10px auto;
        width: 300px;
        height: 100px;
    }
    .btn1{
        /* 渐变色 */
        background: linear-gradient(to right, red, blue, green);
    }
    .btn2{
        /* 渐变色 */
        background: linear-gradient(to top, red, blue, green);
    }
    .btn3{
        /* 渐变色 */
        background: linear-gradient(to right, red 20%, blue 60%);
    }
</style>

<div class="btn btn1"></div>
<div class="btn btn2"></div>
<div class="btn btn3"></div>

image.png

径向渐变

radial-gradient 径向渐变 指从一个中心点开始沿着四周产生渐变效果。

语法:
<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]?, | at <position>, ]?<color-stop>[ , <color-stop>]+)

radial-gradient(形状,)

取值:

  1. <position>
    确定圆心的位置。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标; 如果只提供一个,第二值默认为50%,即center。

    at position:坐标,默认在正中心。可以赋值坐标(参照元素的左上角),也可以赋值关键字(left center right top bottom)。

  2. shape
    渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle 显示一样。

    circle:产生正方形的渐变色。
    ellipse:适配当前的形状,如果是正方形的容器,两者效里一样;如果宽高不一样,默认效果切换到ellipse。

  3. size
    渐变的大小,即渐变到哪里停止,它有四个值。closest-side:最近边;farthest-side:最远边;closest-corner:最近角;farthest-corner:最远角。默认是最远的角farthest-corner。

  4. <color>
    指定颜色。Rgba hsla

示例:

<style type="text/css">
    .box{
        display: flex;
        justify-content: center;
        align-items: center;
        float: left;
        margin: 20px 20px;
        width: 200px;
        height: 200px;
        color: #fff;
    }
    .box1{
        /* 径向渐变 */
        background: radial-gradient(red, blue);
    }
    .box2{
        height: 100px;
        background: radial-gradient(ellipse, red, blue);
    }
    .box3{
        height: 100px;
        background: radial-gradient(circle, red, blue);
    }
    //设置圆心位置:参照盒子左上角
    .box4{
        background: radial-gradient(at 50px 50px,red, blue);
    }
    .box5{
        background: radial-gradient(at right center,red, blue);
    }
    //[最近|最远]-[边|角]
    .box6{
        height: 100px;
        background: radial-gradient(at 50px 50px,red, blue);
    }
    .box7{
        height: 100px;
        background: radial-gradient(closest-corner at 50px 50px,red, blue);
    }
    .box8{
        height: 100px;
        background: radial-gradient(closest-side at 50px 50px,red, blue);
    }
    .box9{
        height: 100px;
        background: radial-gradient(farthest-side at 50px 50px,red, blue);
    }
    //设置颜色位置
    .box10{
        background: radial-gradient(red, red 50%, blue 50%, blue);
    }
</style>

image.png

重复渐变

  • 重复线性渐变 repeating-linear-gradient()
  • 重复径向渐变 repeating-radial-gradient()

用来它们实现一些重复的渐变效果,非常简便。

示例:

<style type="text/css">
    body{
        background-color: #ccc;
    }
    .box1{
        float: left;
        margin: 10px;
        width: 300px;
        height: 300px;
        //也可以实现重复渐变的效果,但是比较繁琐。
        background: radial-gradient(
            #fff 0%, #fff 10%, 
            #000 10%, #000 20%,
            #fff 20%, #fff 30%,
            #000 30%, #000 40%,
            #fff 40%, #fff 50%,
            #000 50%, #000 60%,
            #fff 60%, #fff 70%,
            #000 70%, #000 80%,
            #fff 80%, #fff 90%,
            #000 90%, #000 100%
        );
    }
    .box2{
        float: left;
        margin: 10px;
        width: 300px;
        height: 300px;
        /* 重复渐变 */
        background: repeating-radial-gradient(
            circle at center center,
            #fff 0%, #fff 10%,
            #000 10%, #000 20%
        );
    }
    .box3{
        float: left;
        margin: 10px;
        width: 300px;
        height: 300px;
        /* 重复渐变 最近边 */
        background: repeating-radial-gradient(
            circle closest-side at center center,
            #fff 0%, #fff 10%,
            #000 10%, #000 20%
        );
    }
</style>

image.png

示例2:

<style type="text/css">
    body{
        background-color: #ccc;
    }
    .box{
        width: 300px;
        height: 300px;
        //重复线性渐变
        background: repeating-linear-gradient(
        45deg,
        #fff 0%,
        #fff 10%, 
        #000 10%,
        #000 20%);
}
</style>
 
<div class="box"></div>

image.png

背景 background

基本属性

1 . 添加背景颜色。
2 . 添加背景图片。
如果图片大于容器,那么默认就从容器左上角开始绘制;
如果图片小于容器,那么默认平铺;

设置平铺(图片小于容器时)。
no-repeat:不平铺。
round:先缩放图片,然后再平铺,使得图片以整数刚好排满容器,不留空白间隙。
space:不缩放图片,直接平铺,使得图片以整数刚好排满容器,不能完整显示整张图片的地方留出空白间隙。

设置在滚动容器的背景的行为。 background-attachment: scroll;
滚动容器时,背景图片跟随滚动。

background-attachment: fixed;
滚动容器时,背景图片固定不动。

background-attachment: local;
local和scroll的区别:前提是滚动的是当前容器的内容。
local:背景图片跟随内容一起滚动。
scroll:背景图片不会跟随内容一起滚动。

示例

示例1:设置平铺。

<style type="text/css">
    .box{
        float: left;
        margin: 10px;
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
    /* 1.添加背景颜色 */
    .box1{
        background: pink;
    }
    /* 2.添加背景图片  */
    /* 图片大于容器 */
    .box2{
        background: url(../imgs/pic2.jpg);
    }
    .box3{
        background: url(../imgs/people.webp);
    }
    /* 图片小于容器 */
    /* 设置平铺 no-repeat*/
    .box4{
        background: url(../imgs/people.webp) no-repeat;
    }
    /* 设置平铺 round*/
    .box5{
        background: url(../imgs/people.webp) round;
    }
    /* 设置平铺 space*/
    .box6{
        background: url(../imgs/people.webp) space;
    }
</style>
                
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>

image.png

示例2:fixed 背景图片固定。

<style type="text/css">
    .box{
        margin: 100px auto;
        width: 300px;
        height: 300px;
        border: 1px solid red;
        background: url(../imgs/people.webp);
        //背景图片固定
        background-attachment: fixed;
    }
    span{
        display: block;
        width: 100px;
        height: 2000px;
    }
</style>
                
<div class="box"></div>
<span></span>

fixed.gif

示例3:scroll 背景图片跟随滚动。

<style type="text/css">
    .box{
        margin: 100px auto;
        width: 300px;
        height: 300px;
        border: 1px solid red;
        background: url(../imgs/people.webp);
        //背景图片跟随滚动
        background-attachment: scroll;
    }
    span{
        display: block;
        width: 100px;
        height: 2000px;
    }
</style>
                
<div class="box"></div>
<span></span>

scroll.gif

示例4:local。

<style type="text/css">
.box{
    margin: 100px auto;
    width: 300px;
    height: 300px;
    overflow-y: scroll;
    border: 1px solid red;
    background: url(../imgs/people.webp);
    //背景图片跟随内容滚动。
    background-attachment: local;
}
span{
    display: block;
    width: 100px;
    height: 2000px;
}
</style>
<div class="box">
        <span></span>
</div>
</style>

local.gif

background-size属性

CSS 里的 background-size属性能够让程序员决定如何在指定的元素里展示,它通过改变背景尺寸。往往建议不要将图放大,如果有需要,尽量让图缩小。

1 . 语法:

background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)

2 . 参数说明:
a) auto:此值为默认值,保持背景图片的原始高度和宽度;
b) number:此值设置具体的值,可以改变背景图片的大小;
c) percentage:此值为百分值,可以是0%~100%之间任何值,但此值只能 应用在块元素上,参照当前元素的宽度,而不是图片的原始宽度

设置两个值时,第一个值为宽度,第二个值为高度。建议:在设置两个值时,要先确定它们的比例与图片的原始宽高的比例相同,否则会造成图片失真变形。
设置一个值时,为宽度,高度默认为auto,即高度保持比例进行缩放。

d) contain
按比例调整图片大小,使的图片宽高自适应整个元素的背景区域,使图片全部包含在容器内。
1 . 图片大于容器时:缩小图片,使得宽/高度 较大的那一个 刚好能够在容器中完全显示,有可能造成容器的空白区域
2 . 图片小于容器时:放大图片,使得宽/高度 较大的那一个 刚好能够在容器中完全显示,有可能造成容器的空白区域。

e) cover
按比例调整图片大小,使的图片宽高自适应整个元素的背景区域,图片不全部包含在容器内。
1 . 图片大于容器时:缩小图片,刚好能够在容器中完全显示,有可能造成图片部分溢出,溢出部分不可见
2 . 图片小于容器时:放大图片,刚好能够在容器中完全显示,有可能造成图片溢出。

contain和cover的区别:
都是等比例进行缩放。
contain 让背景图片完整显示在容器中,图片不能有溢出,容器可以留白;而cover 让背景图片完全铺满容器,图片可以有溢出,容器不可以留白。

在实际开发中,cover使用的比较多,配合background-position:center让溢出的那条边从中间部分开始显示。

示例:

<style type="text/css">
    .box{
        display: flex;
        justify-content: center;
        align-items: center;
        float: left;
        margin: 10px;
        width: 200px;
        height: 200px;
        color: blue;
        font-size: 30px;
        border: 1px solid red;
    }
    .box1{
        background-image: url(../imgs/pic2.jpg);
    }
    /* 设置背景图片的大小*/

    /* 带单位数值 */
    .box2{
        background-image: url(../imgs/pic2.jpg);
        background-size: 200px 200px;
    }
    .box3{
        background-image: url(../imgs/pic2.jpg);
        background-size: 200px;
        background-repeat: no-repeat;
    }
    /* 百分比 */
    .box4{
        background-image: url(../imgs/pic2.jpg);
        background-size: 50%;
        background-repeat: no-repeat;
    }
    /* contain 图片大于容器 */
    .box5{
        background-image: url(../imgs/pic2.jpg);
        background-size: contain;
        background-repeat: no-repeat;
    }
    /* contain 图片小于容器 */
    .box6{
        background-image: url(../imgs/people.webp);
        background-size: contain;
        background-repeat: no-repeat;
    }
    /* cover 图片大于容器 */
    .box7{
        background-image: url(../imgs/pic2.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    /* cover 图片小于容器 */
    .box8{
        background-image: url(../imgs/people.webp);
        background-size: cover;
        background-repeat: no-repeat;
    }
</style>
<body>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
    <div class="box box7">7</div>
    <div class="box box8">8</div>
</body>

image.png

示例2:

<style type="text/css">
    .box{
        margin: 20px auto;
        width: 1200px;
        height: 100px;
        background-color: pink;
        background-image: url(../imgs/bg.png);
        border: 1px solid blue;
    }
    //cover
    .box1{
        background-size: cover;
    }
    //cotain
    .box2{
        background-size: contain;
        background-repeat: no-repeat;
    }
</style>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>

image.png

image.png

边框图片 border-image

边框图片的原理:一一对应。

将背景图片 和 容器 都划分为九宫格,然后每个位置的格子一一对应。

原理图: image.png

border-image-source

border-image-source:url(图片路径) 指定边框图片路径。
默认只是填充到容器的四个角点。

border-image-slice

设置四个方向上的裁切距离。
fill:内容的填充。

示例:边框图片的基本使用。

<style type="text/css">
    .box{
        float: left;
        margin: 10px;
        width: 100px;
        height: 100px;
        border: 65px solid red;
    }
    .box1{
        /* 边框图片 */
        border-image-source: url(../imgs/number.png);
    }
    .box2{
        border-image-source: url(../imgs/number.png);
        /* 设置九宫格 填充边框 */
        border-image-slice: 65;
    }
    .box3{
        border-image-source: url(../imgs/number.png);
        /* fill:填充内容 */
        border-image-slice: 65 fill;
    }
</style>

<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</body>

image.png

image.png

image.png

border-image-width

设置边框图片的宽度。如果没有设置这个属性,那么宽度默认就是元素的原始的边框宽度。 建议:一般将该属性值设置为原始的边框的宽度。

细节
1 . 边框图片的本质是背景,并不会影响元素内容的放置。
2 . 内容只会被容器的border和padding影响。

示例:边框图片宽度。

<style type="text/css">
    .box{
        padding: 65px;
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
    .box1{
        border-image-source: url(../imgs/number.png);
        border-image-slice: 65;
        //设置边框图片的宽度。
        border-image-width: 65;
    }
</style>
<body>
    <div class="box box1">哈哈哈哈哈哈</div>
</body>

image.png

border-image-outset

扩展边框。该属性使用较少。

border-image-repeat

边框图片平铺。
可选值:
stretch:拉伸,默认值。
repeat:直接重复平铺(空间不够时,某个重复项可能只显示一部分)。
round:先缩放,然后完整重复平铺(每个重复项都是完整的)。

示例:边框图片平铺。

<style type="text/css">
    .box {
        float: left;
        margin: 20px;
        /* padding: 65px; */
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }

    .box1 {
        border-image-source: url(../imgs/number.png);
        border-image-slice: 65;
        border-image-width: 65;
        //repeat
        border-image-repeat: repeat;
    }

    .box2 {
        border-image-source: url(../imgs/number.png);
        border-image-slice: 65;
        border-image-width: 65;
        //round
        border-image-repeat: round;
    }
</style>
	
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>

image.png

border-image

缩写。

语法:
border-image: source slice / width/outset repeat;

注意:slice不能带单位px,而width、outset可以带单位。

示例:缩写。

<style type="text/css">
    .box {
        float: left;
        margin: 20px;
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }

    .box1 {
        //缩写
        border-image: url(../imgs/number.png) 65 / 65px/0px round;
    }
</style>
<body>
    <div class="box box1"></div>
</body>

image.png

案例

使用边框图片来给动态长度的文本设置一个按钮背景。

思路:
0 文本长度是动态的,所以按钮背景图片需要能够变大变小。如果直接对图片进行缩放,则圆角部分会变形。所以使用 边框图片 来实现比较好。
1 按钮背景图片的四个圆角 不用重复,避免在缩放时圆角变形。
2 边框图片的剪切半径(slice) == 容器边框的大小(border属性) == 按钮背景图片的 圆角的半径。

按钮背景图片:
image.png

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    .msg {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px auto;
        width: 200px;
        height: auto;
        border: 10px solid red;
        /* 边框图片 */
        border-image-source: url(../imgs/border_img.png);
        border-image-slice: 10 fill; //10:设置四个角的剪切半径, fill:填充中间部分。
        border-image-width: 10px; //10px:按钮背景图片中圆角的半径大小。
    }
</style>
	
<body>
    <div class="msg">动态长度的信息文本1。动态长度的信息文本1。</div>
    <div class="msg">动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。动态长度的信息文本1。</div>
</body>

image.png

过渡 transition

通过过渡 transition,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。要实现这一点,必须规定两项内容:1. 规定希望把效果添加到哪个cSS属性上,2. 规定效果的时长。

基本属性

1 . 语法:
transition: property duration timing-function delay;

2 . 参数说明: transition属性是一个简写属性,用于设置四个过渡属性: transition-property | transition-duration | transition-timing-function | transition-delay

描述
transition-property规定设置过渡效果的CSS属性的名称。
transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。
transition-delay定义过渡效果何时开始。

3 . 补充说明

  1. tansition-timing-function:属性规定过渡效果的速度曲线。
    默认为慢-快-慢。
    linear —— 匀速
    steps() —— 指定划分为多少步完成。

  2. 过渡效果执行完毕之后,默认会还原到原始状态。

  3. 为多个样式同时添加过渡效果:使用逗号隔开多个属性的过渡效果。

transition: property1 duration timing-function delay, property2 duration timing-function delay, ...;
  1. transition-property 取值all时,表示给全部属性添加同一个过渡效果。
    1.所有样式的过渡效果一样。
    2.效率低下,它会去查询所有添加的样式。
    3.建议:以后不要这么写。

  2. 过渡效果 只能添加给取值为数值的属性。
    过渡效果只能产生从某个数值到另外一个具体的数值的过渡,所以display属性无法添加滚动效果。

示例:
:active: 单击元素时,:active样式生效。

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        position: absolute;
        left: 100px;
        top: 100px;
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 过渡 */
        /* 
        transition-property: left;
        transition-duration: 2s;
        transition-timing-function: linear;
        transition-delay: 2s; */
        /* 简写 */
        transition: left 2s linear 2s; 
    }
    /* 单击 */
    .box:active{
        left: 500px;
        background: gold;
    }
</style>
	 
<body>
    <div class="box"></div>
</body>

transition.gif

设置步长 steps()

steps(n):可以让过渡效果分为指定的次数n来完成。
此时,过渡效果就是跳跃的,而不是连续的动画效果。

使用steps()时,不能同时使用 速度曲线 transition-timing-function。

示例:

...
//设置步长
transition: left 2s steps(5); 
....

transition2.gif

5 . 使用建议:
因为transition 最早是有由webkit 内核浏览器提出来的,mozilla和opera都是最近版本才支持这个属性,而我们的大众型浏览器E全家都是不支持,另外由于各大现代浏览器Firefox,SafariChrome,Opera都还不支持W3C的标准写法,所以在应用transition时我们有必要加上各自的前缀,最好在放上我们W3C的标准写法,这样标准的会覆盖前面的写法,只要浏览器支持我们的transition属性,那么这种效果就会自动加上去,如:

-moz-transition: all 5s ease 1s;
-webkit-transition: all 1s ease 1s;
-o-transition: all 1s ease 1s;
transition: all 1s ease 1s;

案例:手风琴菜单

1 鼠标移入一级菜单时,增大容器高度,显示出二级菜单;鼠标移出时,恢复高度,隐藏二级菜单。
2 为容器高度 height 添加过渡效果。
3 过渡效果只能产生从某个数值到另外一个具体的数值的过渡,如:display属性无法添加滚动效果。

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    //二级菜单 
    .newsBox{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 200px;
        margin: 50px auto;
        background-color: pink;
    }
    ul{
        list-style: none;
    }
    .item{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: #eee;
    }
    //一级菜单
    .item h3{
        padding: 10px 0;
        width: 100%;
        height: 30px;
        font-size: 16px;
        letter-spacing: 0.1em;
        text-align: center;
        line-height: 30px;
        background-color: pink;
    }
    .item .itemBox{
        width: 100%;
    }
    .item ul{
        width: 100%;
    }
    .item ul li{
        padding: 10px 0;
        width: 100%;
        height: 20px;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
    }
    .item{
        //容器的高度一开始时的值比较小,只够显示一级菜单。
        height: 50px;
        overflow: hidden;
        //为容器高度添加过渡效果。
        transition: height 0.25s;
    }
    .item:hover{
        //鼠标移入时,将容器高度增大,使得二级菜单能够完全显示出来。
        height: 210px;
    }
    .item ul li:hover{
        background-color: pink;
    }
</style>

<div class="newsBox">
    <div class="item">
        <h3>国际新闻</h3>
        <div class="itemBox">
            <ul>
                <li>深圳超市肉菜挡遭抢</li>
                <li>深圳超市肉菜挡遭抢</li>
                <li>深圳超市肉菜挡遭抢</li>
                <li>深圳超市肉菜挡遭抢</li>
            </ul>
        </div>
    </div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

transition3.gif

2D转换 transform

通过CSS3 transform转换,我们能够对元素进行移动、缩放、旋转、斜切操作。

translate 移动元素

2D移动: translate()。

使用translate()函数,你可以把元素从原来的位置移动。移动参照元素左上角原点。

1、 语法:translate(tx) | translate(tx,ty)

2、 tx是一个代表X轴(横坐标)移动的向量长度,当其值为正值时,元素向×轴右方向移动,反之其值为负值时,元素向×轴左方向移动。

3、 ty是一个代表Y轴(纵向标)移动的向量长度,当其值为正值时,元素向Y轴下方向移动,反之其值为负值时,元素向丫轴上方向移动。如果ty没有显式设置时,相当于ty=0。

4、 也可以使用 translateX(tx) 或者 translateY(ty)

5、补充:
transformtransition 可以结合使用,来为转换添加过渡效果。

示例1: 鼠标点击元素,移动开始。松开鼠标左键,移动恢复。

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        margin: 50px auto;
        width: 100px;
        height: 100px;
        background-color: pink;
        //可以为转换添加过渡效果
        transition: transform 1s;
    }
    .box:active{
        //转换 移动
        transform: translate(100px, 100px);
    }
</style>
	 
<body>
    <div class="box"></div>
</body>

translate.gif

scale 缩放元素

2D缩放:scale()
缩放函数 scale() 让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值,使一个元素缩小;而任何大于或等于1.01的值,让元素显得更大。参照元素中心点。

语法:scale(sx|ty) | scale(sx,sy)

1 . 如果只有一个参数,就代表x和y方向都进行相等比例的缩放。
2 . 如果有两个参数,就分别代表x/y方向。

sx:用来指定横向坐标(X轴)方向的缩放向量,如果值为0.01~0.99之间,会让对象在×轴方向缩小,如果值大于或等于1.01,对象在Y轴方向放大。

sy:用来指定纵向坐标(Y轴)方向的缩放量,如果值为0.01~0.99之间,会让对象在Y轴方向缩小,如果值大于或等于1.01,对象在Y轴方向放大。

也可以使用scaleX(sx)或者scaleY(sy)。

示例:

<style type="text/css">
    .box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 300px auto;
        width: 120px;
        height: 120px;
        color: #fff;
        font-size: 16px;
        background-color: pink;
        transition: transform 1s;
    }
    .box:hover{
        //缩放
        transform: scale(2); 
        /* transform: scaleX(2); */
    }
</style>
 
<body>
    <div class="box">文字会变大吗?</div> 
</body>

scale.gif

rotate 旋转元素

2D旋转:rotate()
旋转函数 rotate() 通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作,接受一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转﹔如果这个值为负值,元素相对原点中心逆时针旋转。

语法:rotate(a)

a:代表的是一个旋转的角度值。其取值可以是正的,也可以是负的。如果取值为正值时,元素默认之下相对元素中心点顺时针旋转;如果取值为负值时,元素默认之下相对元素中心点逆时针旋转。单位为deg。

示例:

<style type="text/css">
    .box{
        margin: 100px auto;
        width: 200px;
        height: 200px;
        background-color: pink;
        transition: transform 2s;
    }
    .box:hover{
        //旋转
        transform: rotate(45deg);
    }
</style>
	 
<body>
    <div class="box"></div>
</body>

rotate.gif

skew 倾斜元素

2D斜切:skew()
能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状。

语法:skew(ax) | skew(ax, ay)

ax:用来指定元素水平方向(×轴方向)倾斜的角度。
ay:用来指定元素垂直方向(Y轴方向)倾斜的角度。如果未显式的设置这个值,其默认为0。

也可以使用skewX(sx) 或者 skewY(sy)

如果角度为正,则往当前轴的负方向斜切(倾斜),如果角度为,则往当前轴的正方向斜切。

倾斜角度:如果要沿X轴倾斜30deg,那30度是怎么计算的呢?如图:倾斜前后的x轴都与边垂直,两个x轴之间的夹角为30度。 image.png

示例:

<style type="text/css">
    .box{
        margin: 100px;
        float: left;
        width: 100px;
        height: 200px;
        background-color: pink;
        transition: transform 1s;
    }
    //倾斜
    .box1:hover{
        transform: skewX(45deg);
    }
    .box2:hover{
        transform: skewY(45deg);
    }
    .box3:hover{
        transform: skew(45deg,45deg);
    }
</style>
 
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</body>

skew.gif

transform-origin属性

设置转换中心。

取值:
1 . x,y
2 . 关键字:left top right bottom center

取值是相对于元素初始状态时的位置的自身左上角(即未添加任何转换效果时的位置的自身左上角)。

示例1:将旋转中心设置成左上角。

<style type="text/css">
    .box{
        margin: 100px auto;
        width: 200px;
        height: 200px;
        background-color: pink;
        transition: transform 1s;
        /* 设置旋转中心:左上角 */
        transform-origin: left top;
    }
    .box:hover{
        transform: rotate(45deg);
    }
</style>
	 
<body>
    <div class="box"></div>
</body>

origin.gif

案例:设置旋转中心。

<style type="text/css">
    .box_wrapper{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 120px;
        height: 240px;
    }
    .box{
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        top: 0;
        margin: 100px auto;
        width: 100%;
        height: 100%;
        font-size: 20px;
        color: #fff;
        background-color: blue;
        transition: transform 1s;
        /* 设置旋转中心:右上角 */
        transform-origin: right top;
    }
    .box2, .box4, .box6{
        background-color: red;
    }
    .box3, .box5{
        background-color: blue;
    }
    .box_wrapper:hover .box2{
        transform: rotate(60deg);
    }
    .box_wrapper:hover .box3{
        transform: rotate(120deg);
    }
    .box_wrapper:hover .box4{
        transform: rotate(180deg);
    }
    .box_wrapper:hover .box5{
        transform: rotate(240deg);
    }
    .box_wrapper:hover .box6{
        transform: rotate(300deg);
    }
</style>

origin2.gif

同时添加多个transform属性值

多个转换效果 以空格隔开即可。

但注意:旋转rotate会将当前坐标系也旋转,会影响到移动translate的移动方向,因为当前坐标系也被旋转了。所以,多个转换效果的先后顺序要正确:旋转要放在最后面,避免改变当前坐标系。

示例:同时移动和旋转。

    transform: translateY(200px) rotate(360deg);

multi_transform.gif

清除transform

如何清除转换效果? 取none值即可。

transform:none;

示例:清除多个转换效果。

<style type="text/css">
    .box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 50px auto;
        width: 200px;
        height: 200px;
        /* background-color: pink; */
    }
    .item{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30%;
        height: 30%;
        font-size: 20px;
        color: #fff;
        background-color: blue;
        transition: transform 1s;
    }
    .item:nth-of-type(1){
        transform: translate(60px, 60px) rotate(40deg);
    }
    .item:nth-of-type(2){
        transform: translate(-200px, 200px) rotate(80deg);
    }
    .item:nth-of-type(3){
        transform: translate(200px, -200px) rotate(120deg);
    }
    .item:nth-of-type(4){
        transform: translate(-200px, -200px) rotate(160deg);
    }
    .item:nth-of-type(5){
        transform: translate(200px, -50px) rotate(200deg);
    }
    .item:nth-of-type(6){
        transform: translate(-50px, -200px) rotate(240deg);
    }
    .item:nth-of-type(7){
        transform: translate(-50px, -150px) rotate(280deg);
    }
    .item:nth-of-type(8){
        transform: translate(50px, 50px) rotate(320deg);
    }
    .item:nth-of-type(9){
        transform: translate(150px, 150px) rotate(360deg);
    }
    /* 清除transform */
    .box:hover .item{
        transform: none;
    }
</style> 
 
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</body>

multi_transform_none.gif

应用:实现任意元素居中

如何让子元素在父元素中垂直水平居中显示?

父元素设置:相对定位

position: relative;

子元素设置:绝对定位 + 移动

position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);

原理:
1 先绝对定位、"子绝父相"
先通过绝对定位,让子元素显示在父元素的50%宽、50%高的位置。
2 在转换-移动
然后再通过转换中的translate来移动元素,往回移动自身宽度的50%,自身高度的50%。
3 absolute绝对定位时,left/top等 若取百分比值,参照的是父元素的宽高。 translate取百分比时,参照的是自身的宽高。

3D转换 transform

三维变换使用基于二维变换的相同属性,可以让我们基于三个坐标方向对元素进行变换。 和二维变形一样,三维变形可以使用 transform属性 来设置。

image.png

3D移动 translate3d(x,y,z)

方法:translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写,如:translateX(length),translateY(length), translateZ(length)

transform: translate3d(100px, 100px, 100px);

注意:
1、因为Z轴与屏幕是垂直,所以元素在Z轴上移动时,人眼从屏幕的方向看去,是无法观察到元素的移动。需要从侧面才能看到元素在Z轴上的移动。

image.png

3D缩放 scale3d(x,y,z)

scale3d(number,number,number) 使元素在这三个纬度中缩放,也可分开写,如: scaleX(),scaleY(),scaleZ()。

transform: scale3d(2,2,2);

3D旋转 rotate3d(x,y,z,angle)

rotate3d(x,y,z,angle):指定需要进行旋转的坐标轴。 x:代表x轴方向上的一个向量值。y、z也以此类推。

rotateX(angle)是元素依照x轴旋转
rotateY(angle)是元素依照y轴旋转
rotateZ(angle)是元素依照z轴旋转

image.png

透视/景深效果

左手法则:大拇指指向当前坐标轴的下方向,手指环绕的方向就是正方向。

perspective属性

1、perspective属性 为一个元素设置三维透视的距离。

语法:perspective: length; 单位px

仅作用于元素的后代,而不是其元素本身。

当perspective:none/0;时,相当于没有设perspective(length)。

比如你要建立一个小立方体,长宽高都是 200px。如果你的perspective < 200px,那就相当于站在盒子里面看的结果,如果perspective非常大那就是站在非常远的地方看(立方体已经成了小正方形了),意味着perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。

perspective(length):设置观察立方体的距离。默认是正方体沿Z轴方向的正前方。

perspective-origin属性

2、perspective-origin属性:规定了镜头在平面上的位置。默认是放在元素的中心。

transform-style属性

3、transform-style属性:使被转换的子元素保留其3D转换(需要设置在父元素中):

默认情况下,转换效果只显示一次,做完后就会恢复转换前的效果。 类似于过渡效果。

那如何让它保持转换效果呢?transform-style:preserve-3d。

描述
flat子元素将不保留其3D位置——平面方式。
preserve-3d子元素将保留其3D位值——立体方式。

案例1:3D立方体

1、判断旋转的正方向。
左手法则:左手握着X轴,大拇指指向X轴正方向,其余四指弯向正方向,旋转设置正值时,旋转方向与其余四指弯向的方向相同。Y、Z轴的旋转正方向也是同样判断。

2、立方体的6个面分别是如何进行转换的。
前面 沿着Z轴移动100px;后面 沿着Z轴移动-100px。
左面 沿着X轴移动-100px,再旋转90deg;右面则反之。
上面 沿着y轴移动-100px,再旋转90deg;下面则反之。

3、保持转换效果。
父元素要设置 transform-style:preserve-3d,让子元素保持3d转换后的效果。

5、观察角度。
为了更好地观察每个面的转换效果,需要让父元素进行3d旋转,得到一个合适的观察角度。
此时,Z轴就不再垂直屏幕了,就可以看地得出前面、后面在Z轴上的移动距离了。 image.png

6、示意图

image.png

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        position: relative;
        margin: 100px auto;
        width: 200px;
        height: 200px;
        /* 让父元素旋转,方便观察子元素的3d转换效果 */
        transform: rotate3d(1,1,0,-30deg);
        /* 让子元素保留3d变换之后的效果 */
        transform-style: preserve-3d;
    }
    .box>div{
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 20px;
        color: #fff;
    }
    .front{
        transform: translateZ(100px);
        background-color: pink;
        opacity: 0.5;
    }
    .back{
        transform: translateZ(-100px);
        background-color: blue;
    }
    .left{
        /* 移动+旋转 */
        transform: translateX(-100px) rotateY(-90deg);
        background-color: red;
    }
    .right{
        /* 移动+旋转 */
        transform: translateX(100px) rotateY(90deg);
        background-color: green;
        opacity: 0.5;
    }
    .up{
        background-color: gold;
        /* 移动+旋转 */
        transform: translateY(-100px) rotateX(90deg);
        opacity: 0.5;
    }
    .down{
        /* 移动+旋转 */
        transform: translateY(100px) rotateX(-90deg);
        background-color: slategray;
    }
</style>

<div class="box">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="left">3</div>
    <div class="right">4</div>
    <div class="up">5</div>
    <div class="down">6</div>
</div>

image.png

案例2:透视/景深效果。

在案例1完成的立方体效果上,来观察透视/景深效果。

1、perspective属性:设置观察的距离。

给父元素设置perspective属性,将值从0px一直增大到400px。 效果:一开始是从立方体内部进行观察,perspective属性值改足够大后,变成了从立方体外部进行观察。

.box{
    ...
    /* 添加透视/景深效果 */
    perspective: 0px;
}

如图:

perspective.gif

2、perspective-origin属性:设置观察的角度。

给父元素设置perspective-origin属性,然后调整取值大小,观察立方体如何变化。

第一个值,可调整水平方向;
第二个值,可调整垂直方向。

.box{
    ...
    perspective: 300px;
    /* 设置透视的观察角度 */
    perspective-origin: 0px 0px;
}

perspective-origin.gif

动画

也称为关键帧动画。

过渡 和 动画 的区别:
它们本质上都是关键帧动画,但过渡只有两个关键帧,而动画可以有多个关键帧。

image.png

animation 和 @keyframes的区别:
animation属性 用来为元素添加动画,@keyframes关键字 用来创建动画。

animation

animation 有以下一些基本属性:

1 . animation-name

指定动画名称。

2 . animation-duration

设置动画的总耗时。

3 . animation-iteration-count

设置动画的播放次数,默认为1次。
infinite —— 无数次。

4 . animation-direction

设置动画方向。

alternate 交替动画:从开始帧到结束帧,再从结束帧反着到开始帧。

5 . animation-delay

设置动画的延迟。

6 . animation-fill-mode

设置动画结束时的状态。

默认情况下,动画执行完毕之后,会回到原始状态。

  • forwards
    会保留动画结束时的状态。

    在有延迟的情况下,并不会立刻进行到动画的初始状态。

    初始状态:即0%时的状态。

  • backwards
    不会保留动画结束时的状态。

    在添加了动画延迟的前提下,如果动画有初始状态,那么在动画开始前会立刻进入开始状态。

  • both
    会保留动画的结束时状态。

    在有延迟的情况下也会立刻进入到动画的初始状态。

7 . animation-timing-function

设置动画的时间函数。

linear —— 线性
steps(数值) —— 两个关键帧之间划分为几步来完成。

1、setup()函数 和 linear等 只能取其中一个值,不能同时写。
2、setup(n)函数 划分的是任意相邻的两个关键帧之间,而不是整个动画。

8 . animation-play-state

设置动画的播放状态。

paused:暂停
running:播放

通过js方式控制元素动画的开始和暂停:

Element.style.animationPlayState = "running""paused"; 

@keyframes

创建动画。

在添加动画之前,需要使用@keyframes关键字来创建具体的一个动画,为了兼容不同的浏览器,需要添加前缀。

from 等于 0%,to 等于 100%。

案例1:无缝滚动 ★★★

0、溢出隐藏、flex布局。
1、复制了两组相同的图片,第一组的末尾接上第二组的开始。
2、使用translate来移动容器,只移动 一组图片 总宽度 的距离。
3、动画设置为无限重复播放。
4、动画结束后,会恢复原始状态,重新执行动画。
5、鼠标移入,暂停动画;鼠标移出,启动动画。

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        margin: 100px auto;
        width: 1200px;
        height: 200px;
        overflow: hidden;
    }
    ul{
        display: flex;
        justify-content: center;
        width: 2400px;
        height: 100%;
        list-style: none;
        background-color: green;
    }
    li{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #fff;
    }
    li:nth-of-type(1),li:nth-of-type(7){
        background-color: #769149;
    }
    li:nth-of-type(2),li:nth-of-type(8){
        background-color: #585eaa;
    }
    li:nth-of-type(3),li:nth-of-type(9){
        background-color: #45b97c;
    }
    li:nth-of-type(4),li:nth-of-type(10){
        background-color: #f3715c;
    }
    li:nth-of-type(5),li:nth-of-type(11){
        background-color: #33a3dc;
    }
    li:nth-of-type(6),li:nth-of-type(12){
    background-color: #ef5b9c;
    }
    /* 创建动画 */
    @keyframes move{
        from{
            transform: translateX(0);
        }
        to{
            transform: translateX(-1200px);
        }
    }
    /* 添加动画 */
    ul{
        animation: move 5s infinite 1s linear;
    }
</style>
	 
<div class="box">
    <ul>
        //第一组图片
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        //第二组图片
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

<script type="text/javascript">
    let box = document.querySelector('.box')
    let ul = document.querySelector('ul')
    //鼠标移入、移出事件
    ul.onmouseenter = function(){
        ul.style.animationPlayState = "paused"
    }
    ul.onmouseleave = function(){
        ul.style.animationPlayState = "running"
    }
</script>

wufengundong.gif

案例2:时钟 ★★★

思路
1、时钟 页面结构分析。
2、结构代码。
3、添加动画。

技术点
1、时钟的外轮廓。
圆角+边框

2、刻度线。
水平垂直居中+旋转+遮罩

3、时分秒指针。
水平垂直居中+旋转中心+旋转+遮罩

注意
1、多个转换效果要写在一起,而不要写在两个地方。
如果一定要分开写,则后面的要把前面的转换效果也写上。

//正确:多个效果会同时生效。
.a{
    transform: translate(-50%, -50%) rotate(-30deg); //同时生效
}

//错误:后面的会覆盖前面的,只有后面的会生效。
.a{
    transform: translate(-50%, -50%); //不生效
}
.b{
    transform: rotate(-30deg); //生效
}

2、border-radius取50%时,参考的是盒子的宽高度(内容区+内边距+边框),而不是content内容区的宽高度。

3、setup(15) 为什么取值15?
秒针 旋转动画 一共定义了5个关键帧(0%、25%、50%、75%、100%),则有4个间隔,每个间隔划分为15步,则总步数为60步。

4、
秒针 走一圈 是60s,则整个旋转动画总耗时也是60s。
分针 走一圈 是1个小时,即60分钟,即60x60s,则整个旋转动画总耗时也是3600s。
时针 走一圈 是12小时,即12x60x60s,则整个旋转动画总耗时也是43200s。

5、如何定义 旋转动画 关键帧?

百分比是指整个动画时长的百分比。

如果是匀速旋转一周,那么,时间百分比值和旋转角度值应该是成正比的。
如:50%时 应该旋转了180deg,而不是其它值。如果取其它值,则旋转就不是匀速的了。

<style type="text/css">
    .clock {
        position: relative;
        margin: 100px auto;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        border: 10px solid #eee;
    }

    /* 刻度条 */
    .scale {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 300px;
        height: 10px;
        background-color: #eee;
    }

    /* 大刻度 */
    .scale1 {
        transform: translate(-50%, -50%);
    }

    .scale2 {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    /* 小刻度 */
    .scale3 {
        height: 5px;
        transform: translate(-50%, -50%) rotate(-60deg);
    }

    .scale4 {
        height: 5px;
        transform: translate(-50%, -50%) rotate(-30deg);
    }

    .scale5 {
        height: 5px;
        transform: translate(-50%, -50%) rotate(30deg);
    }

    .scale6 {
        height: 5px;
        transform: translate(-50%, -50%) rotate(60deg);
    }

    /* 遮罩 */
    .mask {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background-color: #fff;
    }

    /* 时分秒指针 */
    .pointer{
        position: absolute;
        left: 50%;
        top: 50%;
        /* 设置旋转中心为元素左中位置 */
        transform-origin: left center;
    }
    .hour {
        transform: translate(0, -50%) rotate(-90deg);
        width: 80px;
        height: 6px;
        background-color: red;
    }

    .minute {
        transform: translate(0, -50%) rotate(-60deg);
        width: 100px;
        height: 4px;
        background-color: blue;
    }

    .second {
        transform: translate(0, -50%) rotate(-30deg);
        width: 110px;
        height: 2px;
        background-color: green;
    }

    /* 中心遮罩 */
    .inner_mask {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #eee;
    }

    /* 创建动画 */
    /* 秒指针 */
    @keyframes second {
        0% {
            transform: rotate(-30deg);
        }
        25% {
            transform: rotate(60deg);
        }

        50% {
            transform: rotate(150deg);
        }

        75% {
            transform: rotate(240deg);
        }

        100% {
            transform: rotate(330deg);
        }
    }
    /* 分指针 */
    @keyframes minute {
        0% {
            transform: rotate(-60deg);
        }
        25% {
            transform: rotate(30deg);
        }

        50% {
            transform: rotate(120deg);
        }

        75% {
            transform: rotate(210deg);
        }

        100% {
            transform: rotate(300deg);
        }
    }
    /* 时指针 */
    @keyframes hour {
        0% {
            transform: rotate(-90deg);
        }
        25% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(90deg);
        }

        75% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(270deg);
        }
    }

    /* 添加动画 */
    .second {
        animation: second 60s infinite steps(15);
    }
    .minute{
        animation: minute 3600s infinite linear;
    }
    .hour{
        animation: hour 43200s infinite linear;
    }
</style>

<body>
    <div class="clock">
        <div class="scale scale1"></div>
        <div class="scale scale2"></div>
        <div class="scale scale3"></div>
        <div class="scale scale4"></div>
        <div class="scale scale5"></div>
        <div class="scale scale6"></div>
        <div class="mask"></div>
        <div class="pointer hour"></div>
        <div class="pointer minute"></div>
        <div class="pointer second"></div>
        <div class="inner_mask"></div>
    </div>
</body>

clock.gif

web字体

开发人员可以为自已的网页指定特殊的字体,无需考虑用户电脑上是否安装了此特殊字体,从此把特殊字体处理成图片的时代便成为了过去。它的支持程度比较好,甚至IE低版本浏览器也能支持。

常见字体格式

不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。

TrueType(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;

OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式,其内置在TureType 的基础上,支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;

Web Open Font Format(.woff)格式

woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;

Embedded Open Type(.eot)格式

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+;

SVG(.svg)格式

.svg字体是基于SVG 字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

如何获取、使用 web字体?

1、阿里巴巴矢量图标库 / 更多 / 在线字体
2、输入文字 / 选择字体 / 查看字体效果 / 本地下载 / 解压 / 复制字体文件
3、使用字体
第一步:使用@font-face声明字体

@font-face {
    font-family: 'webfont';
    font-display: swap;
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

第二步:定义使用 webfont 的样式

.web-font {
    font-family: "webfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

第三步:为文字加上对应的样式

<i class="web-font">知识就像内-裤,看不见但很重要。</i>

注意事项:
1、@font-face 声明字体时,字体文件的引用路径 要确保正确。
2、生成字体时,输入什么文字,在使用字体时,就只能为这些文字添加字体效果,而其它文字不生效。

示例:

image.png


<style type="text/css">
    @font-face {
        font-family: 'webfont';
        font-display: swap;
        src: url('../fonts/webfont.eot'); /* IE9 */
        src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/webfont.woff2') format('woff2'),
        url('../fonts/webfont.woff') format('woff'), /* chrome、firefox */
        url('../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
    }
    .web-font {
        font-family: "webfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
</style>
	
<body>
    <p class="web-font">知识就像内-裤,看不见但很重要。</p>
    <p>知识就像内-裤,看不见但很重要。</p>
    <p class="web-font">其它文字,字体效果不生效。</p>
</body>

image.png

字体图标

字体图标:本质上是字体,但是以图标的方式进行显示。

字体图标和web字体在使用方法上是一样的。先从网络上下载,再来使用。

字体图标 一般是通过伪元素 ::before 来使用的。

修改字体图标的样式,也需要使用伪元素。

常见的是把网页常用的一些小的图标,借助工具帮我们生成一个字体包,然后就可以像使用文字一样使用图标了。

a) 优点

  • 将所有图标打包成字体库,减少请求;
  • 具有矢量性,可保证清晰度;
  • 使用灵活,便于维护;

b) 生成字体图标文件

1、生成字体图标。
阿里巴巴矢量图标库 / 图标库 / 选择需要的图标 / 添加入库 / 下载代码 / 解压复制字体文件

2、使用字体图标。
解压后会有一个demo.html文件,上面有使用说明。

一般来说,常以font class的方式来使用字体图标。
1.引入字体图标的css文件。
2.通过伪元素来修改字体图标的样式。
3.通过css类名来使用字体图标。

示例:

image.png

//引入字体图标的css文件
<link rel="stylesheet" type="text/css" href="../iconfont/iconfont.css"/>
<style type="text/css">
    //通过伪元素来修改字体图标的样式
    i::before{
        font-size: 30px;
        color: red;
    }
</style>
 
<body>
    //通过css类名来使用字体图标
    <i class="iconfont icon-arrow-down"></i>
</body>

image.png

多列布局

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行;人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样。

1.常用属性
a) column-count:属性设置列的具体个数。
b) column-width:属性控制列的宽度。
c) column-gap:两列之间的缝隙间隔。
d) column-rule:规定列之间的宽度、样式和颜色。
e) column-span:规定元素应横跨多少列(n:指定跨n列 all:跨所有列)。

补充:
1、column-rule 和 边框border 的使用方法是一样的,可以设置宽度、线类型、颜色。

2、column-width属性 的 取大优先 原则。

多列布局时,浏览器会根据容器的宽度和设置的列数来自动计算出每列的宽度。也可以通过column-width属性手动设置每列的宽度。

如果 column-width * column-count 的乘积 大于 容器的总宽度时,则需要通过一个原则:取大优先,来决定最终生效的列宽。

1.如果人为设置宽度大,则取更大的值,但是会填充整个屏幕,意味最终的宽度可能也 大于设置的宽度--填充满整个屏幕。
2.如果人为设置宽度更小,则使用默认计算的宽度。

3、可以通过 column-span:all 来让 文章标题 跨多列来显示。
原理:本质上是让元素变成块级元素,从而占据整行。

4、多列布局的应用场景:更友好地显示大段的文章。

示例:

<style type="text/css">
html,body{
    margin: 0;
    padding: 0;
}
.wrapper{
    margin: 30px 30px;
    /* 多列布局 */
    column-count: 3;
    column-rule: 3px dashed red;
    column-gap: 50px;
}
h4{
    /* 跨列显示 */
    column-span: all;
    text-align: center;
}

<div class="wrapper">
    <h4>李开元:寻访汉文帝霸陵</h4>
    <p>12月14日,国家文物局“考古中国”...</p>
    <p>秦汉时代,事死如事生。皇帝即位,...</p>
    <p>仁君刘恒,以代王入继大统,用代国...</p>
    <p>汉文帝的第五个历史功绩,是减少...</p>
</div>

不使用多列布局时: image.png

使用多列布局时: image.png

伸缩布局

布局的传统解决方案,基于盒状模型,依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。

1.重要属性

display:flex

如果一个容器设置了这个属性,那么这个盒子里面的所有直接子元素都会自动的变成伸缩项(flex item)。

justify-content

设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,语法:justify-content: flex-start | flex-end | center | space-between | space-around。

取值说明:
flex-start:弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。

flex-end:弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。

center:弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐,同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距(如果剩余空间是负数,则保持两端相等长度的溢出)。

flex-start:让子元素从父容器的起始位置开始排列。
flex-end:让子元素从父容器的结束位置开始排列。
center:让子元素从父容器的中间位置开始排列。
space-between:左右对齐父容器的开始和结束,中间平均分页,产生相同的间距。
space-around:将多余的空间平均的分页在每一个子元素的两边,类似于margin:0 auto,造成中间盒子的间距是左右两边盒子间距的两倍。

flex-flow

是flex-wrap和flex-direction的综合。

flex-wrap

控制子元素是否换行显示,默认不换行。

nowrap:不换行--则收缩
wrap:换行
wrap-reverse:翻转,原来是从上到下,翻转后就是从下到上来排列

flex-direction

设置子元素的排列方向,就是用来主轴方向,默认主轴方向是row(水平方向)。

row:水平排列方向,从左到右。
row-reverse:水平排列方向,从右到左。
column:垂直排列方向,从上到下。
column-reverse:垂直排列方向,从下到上。

flex

flex 是用来设置当前伸缩子项占据剩余空间的比例值。

flex属性是flex-grow, flex-shrink和flex-basis的简写,默认值为0 1 auto。后两个属性可选。

语法:
flex: [flex-grow][flex-shrink][flex-basis]
大多数情况下没必要使用这种语法。

flex: [number] 这个语法指定了一个数字,代表了这个伸缩项目该占用的剩余空间比例。
flex: auto 属性值被设为auto的伸缩项目,会根据主轴自动伸缩以占用所有剩余空间。

flow-grow

可以来扩展子元素的宽度。

设置当前元素应该占据剩余空间的比例值比例值。

计算:当前空间的flex-grow / 所有兄弟元素的flex-grow的总和

flex-grow的默认是0,即子元素并不会去占据剩余的空间。

flex-shrink

定义收缩比例,通过设置的值来计算收缩空间。

比例值计算:当前空间的flex-shrink / 所有兄弟元素的flex-shrink的和。

flex-shrink默认值为1,即父容器空间不足时,子项目会收缩。

align-items

设置子项目在侧轴方向上的对齐方式。

center:设置在侧轴方向上居中对齐。
flex-start:设置在侧轴方向上顶对齐。
flex-end:设置在侧轴方向上底对齐。
stretch:拉伸,默认值,让子元素在侧轴方向上进行拉伸,填充满整个侧轴方向。
baseline:文本基线。

英文字体是以基线对齐的。 image.png

align-items:baseline效果:
多个子项目中,字体大小不一样的文字 在主轴方向是以基线对齐。

image.png

align-self

设置单个元素在侧轴方向上的对齐方式。

取值和align-itmes相同。

注意:它要设置给子项目。

案例:宽高自适应布局

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .layout{
        /* 设置伸缩布局 */
        display: flex;
        /* 设置主轴为垂直方向 */
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        background-color: #eee;
    }
    header{
        width: 100%;
        height: 60px;
        background-color: red;
    }
    footer{
        width: 100%;
        height: 60px;
        background-color: red;
    }
    main{
        /* 设置当前子项目占据父容器剩余的高度 */
        flex: 1;
        width: 100%;
        /* 设置伸缩布局 */
        display: flex;
    }
    aside{
        flex-grow: 1;
        background-color: blue;
    }
    article{
        flex-grow: 3;
        background-color: green;
    }
</style>

<div class="layout">
    <header>头部</header>
    <main>
        <aside>侧边栏</aside>
        <article>主体</article>
    </main>
    <footer>脚部</footer>
</div>

responsive.gif

总结

学习资源

官方文档

_ w3cschool

视频教程

_ Html5+Css3由浅入深教程 2016

参考文章

其它

进度:211218-211227