网页开发基础–排版布局进阶

一、浮动与溢出

浮动可以让一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动。碰到父元素内容区的边界，或其它浮动元素就会停止。通常有左浮动、右浮动、不浮动三种情况：

  • 浮动属性float：用于控制元素的浮动。

    • 属性值：left - 元素浮动到其容器的左侧
    • 属性值：right - 元素浮动在其容器的右侧
    • 属性值：none - 元素不会浮动，默认值。

    最简单的用法是，float 属性可实现文字包围图片的效果。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
        img {
            float: left;
        }
    </style>

    <div>
        <img src="http://nocturne.bczcdn.com/img/1653015268137_56434/float.png">
        <p>CSS的 float 属性的值有以下几种情况：</p>
        <p>属性值：left - 元素浮动到其容器的左侧</p>
        <p>属性值：right - 元素浮动在其容器的右侧</p>
        <p>属性值：none - 元素不会浮动，默认值。</p>
        <p>最简单的用法是，float 属性可实现文字包围图片的效果。</p>
    </div>

1.左浮动

属性值left，表示向左浮动。上例图片向左浮动时，文本元素将围绕浮动元素。

2.右浮动

只需将属性值设置为right。以下图片向右浮动时，因为文本元素默认对齐方式为左对齐，此时不会围绕浮动元素。

1
2
3
4
5
<style>
    img {
        float: right;
    }
</style>

3.不浮动

果将属性值设置为none，那么元素就不会浮动。示例中，图片不浮动时，那么图片和段落元素p，就会从上往下依次排列，这也是默认情况下的排列。

1
2
3
4
5
<style>    
    img {
        float: none;
    }
</style>

4.两列布局

通过浮动属性float：对盒子1设置左浮动；对盒子2设置右浮动，由此就得到了两列布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
    .box {
        width: 400px;
        margin: auto;
    }
    .box1 {
        width:150px;
        height: 150px;
        background-color: #5E80F4;
        float: left;
    }
    .box2 {
        width: 150px;
        height: 150px;
        background-color: #FFB033;
        float: right;
    }
</style>

<div class="box">
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
</div>

5.多列布局

可以将盒子全部设置为左浮动，盒子就会从左至右紧挨着依次排列。

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
<style>
    .box1 {
        width: 25%;
        height: 150px;
        background-color: #5E80F4;
        float: left;
    }
    .box2 {
        width: 25%;
        height: 150px;
        background-color: #FFB033;
        float: left;
    }
    .box3 {
        width: 25%;
        height: 150px;
        background-color: #87CEEB;
        float: left;
    }
</style>
<body>
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <div class="box3">盒子3</div>
</body>

我们也可以加上外边距margin来间隔这几个盒子。

**注意:**在设置盒子的宽度和外边距时，总宽度不要超过父元素的宽度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
    .box1 {
        width: 25%;
        height: 150px;
        margin: 20px;
        background-color: #5E80F4;
        float: left;
    }
    .box2 {
        width: 25%;
        height: 150px;
        margin: 20px;
        background-color: #FFB033;
        float: left;
    }
    .box3 {
        width: 25%;
        height: 150px;
        margin: 20px;
        background-color: #87CEEB;
        float: left;
    }
</style>

6.清除浮动

元素浮动，可以实现文字环绕图片、两列布局、多列布局等我们想要的效果。但是元素浮动后，有时候会对周围元素造成一定的负面影响。为了消除这种影响，我们需要使用clear属性来清除浮动。

清除浮动属性是指：前面的元素使用了float属性浮动之后，后面的元素使用clear属性来消除前面浮动元素的影响。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .box1 {
        width: 25%;
        height: 150px;
        background-color: #5E80F4;
        float: left;
    }
    .box2 {
        border: 3px solid #FFB033;
        height: 50px;
        clear: left;
    }
</style>

<div>
    <h3>使用clear属性</h3>
    <div class="box1">盒子1</div>
    <div class="box2">这是盒子2。clear: left; 会清除前面元素（盒子1）的左浮动影响，把盒子2移动到浮动的盒子1下方。</div>
</div>

  • 清除浮动的属性值:清除和浮动要匹配使用，前面元素设置了左浮动，后面元素要消除左浮动才能生效。

  • 清除右浮动影响:当然，能清除前面元素的左浮动影响，也就能清除右浮动的影响。我们只需将属性值设置为right。

  • 清除左右浮动的影响:如果我们要清除前面元素的浮动影响，最常用的还是clear: both;
    * 简单来说clear:left或者clear:right起作用的地方，都可以使用clear:both替换。

  • 不清除浮动:清除浮动的属性值也可以是：none，是默认值，表示不会清除前面元素的浮动影响。

7.溢出

溢出，是指盒子中添加的内容太多，而盒子不足以装下所有的内容，导致一部分的内容从盒子中溢出。为了能更好处理溢出的内容，我们需要用到CSS中的overflow属性。

  • overflow属性：用于设置如何处理溢出盒子外的内容。

    注意：overflow属性，仅用于具有指定高度的块元素。

7.1溢出可见：

属性值visible，表示可见的，是默认情况。即对溢出内容不做处理，内容会在盒子之外显示。

1
2
3
4
5
6
7
8
9
10
<style>
    div {
        width: 200px;
        height: 80px;
        border: 3px solid;
        overflow: visible;
    }
</style>

<div>默认情况下，溢出是可见的(visible)。设置overflow的属性的值为visible，表示对溢出的内容不做处理，内容会在盒子之外显示。</div>

7.2隐藏溢出内容

设置overflow的属性值为hidden，会将溢出的内容隐藏。

1
2
3
4
5
6
7
8
<style>
    div {
        width: 200px;
        height: 60px;
        border: 3px solid;
        overflow: hidden;
    }
</style>
7.3 必要时添加滚动条

设置overflow的属性的值为auto，只会在必要时添加滚动条。

  1. 当内容溢出时，隐藏溢出内容，并添加滚动条；
  2. 当内容没有溢出时，不会添加滚动条。

注意：在Mac中，滚动条默认情况下是隐藏的，仅在滑动时显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
    .box1{
        width: 100px;
        height: 60px;
        border: 1px solid black;
        overflow: auto;
    }
    .box2{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        margin-top: 10px;
        overflow: auto;
    }
</style>

<body>
    <div class="box1">
        这一块内容将会超出盒子的大小，溢出部分将会隐藏并添加滚动条。
    </div>
    <div class="box2">
        这一块内容不会超出盒子的大小，滚动条不会存在。
    </div>
</body>

本节总结：

二、定位

1.相对定位

相对定位，就是元素相对于自己的默认位置来进行位置调整。需要通过top、bottom、left和right四个属性的组合，来设置元素相对于默认位置的偏移量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    .relative {
        width: 100px;
        height: 50px;
        text-align: center;
        border: 2px solid #565656;
        color: #FFFFFF;
        background-color: #5E80F4;
        position: relative;
        top: 60px;
        left: 50px;
    }
</style>

<div class="relative">相对定位</div>
  • 定位属性：position属性，用于指定一个元素在网页中的定位方式。
  • 定位的属性值为relative，表示相对定位。
  • top属性：表示元素相对于自己的默认位置的顶部偏移量。
  • left属性：表示元素相对于自己的默认位置的左侧偏移量。
  • 元素位置属性：注意，选择了定位方式后，需要结合top、left、right和bottom四个属性，来设置元素相对于默认位置的偏移量。
  • 位置属性的优先级：
    • 位置属性的使用有一定的优先级，若同时指定了top和bottom属性，top优先级高于bottom。
    • 同理，left优先级高于right。

2.绝对定位

绝对定位，是一个元素相对于父元素或页面进行定位。同样需要使用top、bottom、left和right四个属性的组合，来设置元素的偏移量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid #000000;
        position: relative;
    }
    .absolute {
        width: 100px;
        height: 50px;
        text-align: center;
        border: 1px solid #565656;
        color: #FFFFFF;
        background-color: #5E80F4;
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
</style>

<div class="box">
    <div class="absolute">绝对定位</div>
</div>

注意：一个元素相对于父元素进行绝对定位时，一定需要保证父元素是非静态定位。示例中，将父元素设置为相对定位。

设置父元素的相对定位后，然后对子元素进行绝对定位。绝对定位的position属性的值为absolute。

  • 简而言之，只有父元素是非静态定位，子元素才是相对于父元素进行绝对定位。

  • 相对于网页定位：若一个元素的父元素是静态定位或没有定位，那么，此元素就会相对于页面的边界进行定位。下面的例子中，我们给元素设置了绝对定位。但是，由于它的父元素没有设置定位方式，我们会发现元素会相对于页面进行定位。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000000;
        }
        .absolute {
            width: 100px;
            height: 50px;
            text-align: center;
            border: 1px solid #565656;
            color: #FFFFFF;
            background-color: #5E80F4;
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
    </style>

    <div class="box">
        <div class="absolute">绝对定位</div>
    </div>

3.固定定位

固定定位，是一个元素相对于浏览器窗口进行定位。它不会随着浏览器窗口的滚动而移动，始终位于同一位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    .box {
        height:500px;
    }

    img {
        position: fixed;
        bottom: 0;
        right: 0;
    }
</style>

<div class="box">
    <img src="http://nocturne.bczcdn.com/file/1645597751069_39196/head.png"  alt="">
    </div>
</div>

第7-9行，使用固定定位，将图片固定在浏览器的右下角。

4.粘性定位

是基于用户的滚动位置来进行定位，它会在相对定位和固定定位之间切换。

当滚动页面时，它的效果和相对定位相同。当滚动到一定程度时，它又呈现出固定定位的效果，像是被“粘贴”在适当的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    div {
        height: 800px;
    }
    h1 {
        text-align: center;
        color: #2F5DF2;
    }
    .sticky {
        line-height: 50px;
        background-color: #2F5DF2;
        text-align: center;
        color: #FFFFFF;
        position: sticky;
        top: 0;
    }
</style>

<div>
    <h1>夜曲编程</h1>
    <p class="sticky">粘性定位</p>

示例中，位置属性top的值为0有两层含义：

  1. 在粘性元素与顶部距离不为0时，此元素为相对定位；
  2. 当滑动到粘性元素与顶部距离为0时，此元素为固定定位。
4.1 粘性定位规则

粘性定位，必须定义top、bottom、right、left 四个位置属性之一，否则只会处于相对定位。

5.元素堆叠属性

如图，实际的网页其实是三维结构的，定位的元素之间可能会发生堆叠现象。

需要通过CSS中的元素堆叠属性z-index，来设置元素的堆叠顺序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    img {
        position: absolute;
        top: 10px;
        z-index: 0;
    }
    p {
        position: relative;
        top: 10px;
        z-index: 1;
    }
</style>

<div>
    <img src="http://nocturne.bczcdn.com/img/1646644675891_31336/website.jpg" alt="" width="500">
    <p>编程需要精通爬虫，可视化，数据分析，人工智能等领域。</p>
</div>

z-index属性的值为整数，根据大小决定元素堆叠的顺序。简单来说，值大的会堆放在值小的上面。

示例中，图片的堆叠属性的值为0，p元素的为1，说明p元素会堆放在图片上面。

三、阴影和转换

1.阴影

1.1文本阴影

CSS中，我们需要使用属性text-shadow为文本添加阴影效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>文本阴影</title>
    <style>
        p {
            font-size: 32px;
            text-align: center;
            color: #2F5DF2;
        }
        p:first-child {
            text-shadow: 3px 5px 4px #565656;
        }
    </style>
</head>

<body>
    <p>编程学习</p>
    <p>编程学习</p>
</body>

</html>

第13-15行，通过结构伪类:first-child给第一个子元素p添加一个阴影效果。

  • 文本阴影属性:text-shadow属性，用于给元素的文本，添加阴影。
  • 必选属性值:使用text-shadow属性设置文本的阴影时，必选属性值为水平偏移量和垂直偏移量。并且，水平偏移量在前，垂直偏移量在后。示例中，水平偏移量为3px，垂直偏移量为5px。
  • 模糊半径:是可选属性值，默认值为0。模糊半径的值越大，阴影越模糊。
  • 阴影颜色:也是可选属性值。示例中，设置阴影颜色为#565656。注意，颜色属性值在偏移量之前指定也是正确的。如：text-shadow: #565656 3px 5px 4px;
  • 负的偏移量:水平和垂直偏移量为正时，分别表示阴影向右下偏移。当然，水平和垂直偏移量都允许为负值。
    • 水平偏移量为负值时，表示阴影向左偏移；
    • 垂直偏移量为负值时，表示阴影向上偏移。
1.2 盒子阴影

盒子阴影与文本阴影的使用方法相似，但盒子阴影主要用于给元素框添加阴影效果。网页中几乎所有元素，都可以使用属性box-shadow来添加阴影效果。

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            text-align: center;
            color: #FFFFFF;
            background-color: #5E80F4;
        }
        .shadow {
            position: relative;
            top: 10px;
            box-shadow: 3px 5px 2px 1px #4F4F4F;
        }
    </style>
</head>

<body>
    <div>普通盒子</div>
    <div class="shadow">盒子阴影</div>
</body>

</html>

第18行，使用属性box-shadow给第二个div，添加盒子阴影效果。

  • 必选属性值:使用box-shadow属性设置元素的边框阴影时，必选属性值也为水平偏移量和垂直偏移量。同样，水平偏移量在前，垂直偏移量在后。

  • 可选属性值:属性box-shadow还包括模糊半径、扩散半径、阴影颜色三个可选属性值。

    • 模糊半径：表示阴影的模糊效果。值越大，阴影越模糊；
    • 扩散半径：表示阴影的尺寸大小。值越大，阴影尺寸越大。

    示例中，模糊半径2px，扩散半径1px，阴影颜色#4F4F4F。同样，颜色属性值可以放在偏移量之前。

1.3 内部阴影

在盒子阴影中，默认阴影在边框外，即阴影向外扩散。可以使用inset属性值，使得阴影落在盒子内部，这样看起来就像是内容被压低了。

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            text-align: center;
            color: #FFFFFF;
            background-color: #5E80F4;
        }
        .shadow {
            position: relative;
            top: 10px;
            box-shadow: 2px 2px 5px #4F4F4F inset;
        }
    </style>
</head>

<body>
    <div>普通盒子</div>
    <div class="shadow">盒子阴影</div>
</body>

</html>

2.转换

在CSS中，transform属性用于设置元素的移动，旋转，缩放和倾斜等变换操作。transform属性的值主要有四个：移动、旋转、缩放、倾斜。

2.1 移动属性，translate()函数

移动属性值，由两部分构成。

第一部分为translate()，表示移动函数，需要传入参数进行移动。

第二部分为translate()函数的参数，两个参数以逗号隔开:

  • 第一个参数表示水平移动距离，正数向右，负数向左；
  • 第二个参数表示垂直移动距离，正数向下，负数向上。
1
2
3
4
5
6
7
<style>
    img {
        transform: translate(50px, 20px);
    }
</style>

<img src="http://nocturne.bczcdn.com/file/1646125582615_85556/head.png">

示例中，表示水平向右移动50px，垂直向下移动20px。

2.2 旋转属性，rotate()函数

rotate()函数包含一个参数，代表旋转的角度，角度由数值和单位组成。

1
2
3
4
5
6
7
8
9
<style>
    img:nth-child(2) {
        transform: rotate(90deg);
    }
</style>
<div>
    <img src="http://nocturne.bczcdn.com/file/1646125582615_85556/head.png">
    <img src="http://nocturne.bczcdn.com/file/1646125582615_85556/head.png">
</div>

示例中，将第二张图片顺时针旋转90度，其中deg是英文degree(角度)的简写。注意:角度为正表示顺时针旋转，角度为负表示逆时针旋转。

2.3 缩放属性，scale()函数

scale()函数包含两个参数，依次表示元素水平方向和垂直方向的缩放比例。

1
2
3
4
5
6
7
8
9
10
11
<style>
    img:nth-child(2) {
        margin-left: 60px;
        margin-top: 30px;
        transform: scale(1.5,1.5);
    }
</style>
<div>
    <img src="http://nocturne.bczcdn.com/file/1646125582615_85556/head.png">
    <img src="http://nocturne.bczcdn.com/file/1646125582615_85556/head.png">
</div>

示例中，第二张图片的水平和垂直方向都放大1.5倍。

2.4 倾斜属性，skew()函数

skew()函数包含两个参数，依次表示元素水平方向和垂直方向的倾斜角度。

1
2
3
4
5
6
7
8
9
<style>
    img:nth-child(2) {
        transform: skew(30deg,10deg);
    }
</style>
<div>
    <img src="http://nocturne.bczcdn.com/file/1646125582615_85556/head.png">
    <img src="http://nocturne.bczcdn.com/file/1646125582615_85556/head.png">
</div>

示例中，将第二张图片在水平方向倾斜了30度，垂直方向倾斜了10度。

2.5 多个属性值

transform属性支持多个属性值同时使用，属性值间用空格隔开。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>多个转换属性值</title>
    <style>
         img:nth-child(2) {
            transform: translate(50px, 20px) rotate(45deg) scale(1.2,1.2); 
        }
    </style>
</head>

<body>
    <img src="http://nocturne.bczcdn.com/file/1646125582615_85556/head.png">
    <img src="http://nocturne.bczcdn.com/file/1646125582615_85556/head.png">
</body>

</html>

第9行，同时使用了移动、旋转、缩放属性值。

本节总结：

四、渐变和过渡

1.渐变

1.1线性渐变

线性渐变，是指颜色沿一条直线进行渐变，例如从上到下、从左到右。要创建线性渐变，至少需要定义两个颜色，来保证从一个颜色平滑过渡到另一个颜色。

1
2
3
4
5
6
7
8
9
10
11
<style>
    div {
        width: 200px;
        height: 100px;
        color: #FFFFFF;
        text-align: center;
        background: linear-gradient(to bottom,#5E80F4,#FFB033);
    }
</style>

<div>线性渐变</div>

第7行，给盒子的背景设置了线性渐变的效果。

  • 背景属性:在CSS中，设置渐变效果，需要使用background属性。也可以使用background-image属性。

  • 线性渐变属性值:这里的linear-gradient(to bottom,#5E80F4,#FFB033)

    表示线性渐变。

  • 线性渐变函数:设置线性渐变需要用linear-gradient()函数。

    • 渐变方向参数:用于定义渐变的方向。示例中，to bottom表示从上到下渐变，是默认的渐变方向。渐变方向还有从下到上to top，从右到左to left，从左到右to right等。
    • 颜色参数:表示渐变时平滑过渡的颜色。示例中，开始颜色为#5E80F4，结束颜色为#FFB033。
1.1.1对角线渐变

除了四个基本的渐变方向，还可以设置对角线渐变：

  • to left top，表示从右下到左上；

  • to left bottom，表示从右上到左下；

  • to right bottom，表示从左上到右下；

  • to right top，表示从左下到右上。

    1
    2
    3
    4
    5
    6
    7
    8
    9
     <style>
        div {
            width: 200px;
            height: 100px;
            background: linear-gradient(to right bottom,#5E80F4,#FFB033);
        }
    </style>

    <div></div>
1.1.2 角度渐变

CSS中也支持使用角度来设置渐变的方向，角度单位为deg。

0deg，为12点钟方向，表示从下到上渐变。

90deg，为3点钟方向，表示从左到右渐变。

1
2
3
4
5
6
7
8
9
 <style>
    div {
        width: 200px;
        height: 100px;
        background: linear-gradient(45deg,#5E80F4,#FFB033);
    }
</style>

<div></div>
1.1.3 多颜色渐变

可以使用使用多种颜色来设置线性渐变效果。多种颜色之间，通过英文逗号分隔。

1
2
3
4
5
6
7
8
9
<style>
    div {
        width: 200px;
        height: 100px;
        background: linear-gradient(to right,#FFC0CB,#5E80F4,#FFB033);
    }
</style>

<div></div>
1.2 径向渐变

径向渐变与线性渐变类型的不同之处，在于它是由中心向外延伸的渐变。可以指定中心点的位置，还可以设置渐变的形状。

1
2
3
4
5
6
7
8
9
10
11
<style>
    div {
        width: 200px;
        height: 100px;
        color: #FFFFFF;
        text-align: center;
        background: radial-gradient(circle 50px at 50% 50%,#000000,#5E80F4,#FFB033);
    }
</style>

<div>径向渐变</div>

第7行，给盒子的背景设置了径向渐变的效果。

  • 设置径向渐变需要用radial-gradient()函数

  • 形状参数：radial-gradient()函数的形状参数，用于定义渐变的形状。可选值有circle(圆形)、ellipse(椭圆)示例中，circle就表示圆形

  • 大小参数：用于指定渐变形状的大小，使用数值和长度单位来指定circle的半径。示例中，50px表示circle的半径为50像素。

  • 定位渐变中心：使用at加百分比，来自定义渐变的中心位置。渐变中心需要定义横纵坐标，格式为at 横坐标 纵坐标。示例中，at 50% 50%表示渐变中心在区域的正中心

  • 颜色参数：径向渐变与线性渐变一样，至少需要两种颜色，也可以是多种颜色。颜色间以英文逗号隔开。

  • 渐变中心的位置，除了使用百分比外，还可以使用数字和长度单位表示。例如60px 50px依次表示和左侧，上方的距离为60和50像素。

  • 椭圆形状参数：椭圆是默认形状，不设置形状参数和半径就能展示出椭圆。

2.过渡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div {
        width: 100px;
        height: 80px;
        background-color: #5E80F4;
        transition-property: width;
        transition-duration: 2s;
        transition-timing-function: ease;
        transition-delay: 0s;
    }

    div:hover {
        width: 200px;
    }
</style>

<p>请把鼠标悬停在下面的div元素上，来查看过渡效果：</p>
<div></div>

  • 选择元素:首先，需要选择待过渡的元素。同时，使用状态伪类:hover对此元素设置鼠标悬停效果。

  • 待过渡属性:transition-property属性，用于指定元素中参与过渡的属性名称。示例中，transition-property属性的值为width，表示元素的宽度属性width，会参与过渡。

  • 过渡时间:transition-duration属性，用于指定过渡要花费的时间。其属性值以秒(s)或毫秒(ms)为单位。默认值为0s，此时不会出现过渡效果，所以该属性的值不要设置为0s。

  • 过渡速度曲线:transition-timing-function属性，表示过渡效果的速度曲线。它的属性值默认为ease，表示过渡效果以缓慢地开始，然后变快，最后缓慢地结束。

  • 延迟过渡属性:transition-delay属性，用于规定过渡效果开始之前需要等待的时间。它的属性值以秒(s)或毫秒(ms)为单位，这个值表示过渡效果什么时候开始。示例中，属性值为0s，表示无需等待，立即开始过渡。

  • 所有过渡属性:有时候，我们想给所有属性设置过渡效果，此时可以使用all来表示过渡的所有属性。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
        div {
            width: 100px;
            height: 80px;
            background-color: #5E80F4;
            transition: all 2s;
        }

        div:hover {
            width: 200px;
            height: 160px;
        }
    </style>

    <p>请把鼠标悬停在下面的div元素上，来查看过渡效果：</p>
    <div></div>

    示例中，元素的宽度和高度属性都会产生过渡效果。在2s内，由初始的100px，80px平滑过渡到200px，160px。

  • 转换和过渡的结合：可以给转换过程，添加过渡效果。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style>
        div {
            width: 80px;
            height: 80px;
            background-color: #5E80F4;
            transition: all 2s;
        }

        div:hover {
            width: 160px;
            height: 160px;
            transform: rotate(180deg);
        }
    </style>

    <p>请把鼠标悬停在下面的div元素上，来查看过渡效果：</p>
    <div></div>

    示例中，给所有属性设置过渡效果，在:hover中添加旋转180度的转换。

本节总结：

五、弹性盒子

弹性盒子，也叫弹性布局，能十分灵活地控制父容器中子元素的布局，排列以及分布。

它由flex container和flex item组成。

flex container，简称”容器”，表示设置了弹性布局的父元素。

flex item，简称”项目”，表示容器的直接子元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    .container {
        display: flex;
        background-color: #5E80F4;
    }
    .container div {
        margin: 10px;
        padding: 20px;
        font-size: 30px;
        background-color: #F1F1F1;
    }
</style>

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
</div>
<p><i>display</i> 属性设置为 <i>flex</i> 的父元素为容器。</p>
<p>容器的直接子元素会自动成为项目。</p>

第3行，通过声明display: flex;设置了弹性容器。

第15-17行，这些子元素就叫做容器的一个个项目。

  • display属性，用于指定元素的盒子类型。
  • 属性值flex，表示生成一个弹性容器，简称容器。

1.排列属性

1
2
3
4
5
.container {
       display: flex;
       flex-direction: column;
       background-color: #5E80F4;
   }

第3行，指定容器内的项目从上到下排列。

  • 当flex-direction的属性值为column-reverse时，项目会从下到上排列。
  • 当flex-direction的属性值为row时，项目会从左到右排列。也是默认的排列情况。
  • 当flex-direction的属性值为row-reverse时，项目会从右到左排列。

2.换行属性

当所有项目的宽度超过容器的宽度时，弹性布局会压缩项目的宽度或者高度。此时，我们可以让多出的项目切换到下一行来解决这个问题。因为，弹性布局的默认情况是不换行。所以，当我们要换行时，需要设置换行属性。

1
2
3
4
5
6
.container {
       background-color: #5E80F4;
       width: 600px;
       display: flex;
       flex-wrap: wrap;
   }

第5行，设置了项目在需要时换行。

  • 换行属性值有常见的3种情况：
    • nowrap，表示项目不会换行，是默认情况；
    • wrap，表示项目会在需要时换行；
    • wrap-reverse，表示项目会在需要时以相反的顺序换行。

3.水平对齐属性

1
2
3
4
5
6
.container {
       background-color: #5E80F4;
       width: 600px;
       display: flex;
       justify-content: center;
   }

第5行，设置了项目在水平方向居中对齐。

justify-content属性，用于设置盒子的项目在水平方向的对齐方式:

  • 水平左对齐:当justify-content的属性值为flex-start时，项目会水平左对齐，是默认的对齐方式。

  • 水平右对齐:当justify-content的属性值为flex-end时，项目会水平右对齐。

  • 项目间隔相等:当justify-content的属性值为space-around时，则项目之间的间隔相等。

  • 水平两端对齐:当justify-content的属性值为space-between时，则项目会两端对齐，且项目之间的间隔是相等的。

    各种对齐见下图：

4.垂直对齐属性

容器中的项目设置垂直方向的对齐方式时，会用到align-items和align-content两个属性。

区别就在于：

align-items用于单行项目；

align-content用于多行项目。

4.1单行的垂直对齐

align-items属性，用于设置单行项目的垂直对齐方式。

1
2
3
4
5
6
7
.container {
       background-color: #5E80F4;
       width: 600px;
       height: 200px;
       display: flex;
       align-items: center;
   }

第6行，表示设置单行项目在垂直方向居中对齐。

align-items属性常见的4种属性值:

align-items属性的值 作用
stretch 项目未设置高度时，将被拉伸以适合容器（默认情况）
flex-start 项目垂直上对齐
flex-end 项目垂直下对齐
center 项目垂直居中对齐

单行垂直对齐效果：

4.2 多行的垂直对齐

align-content属性，用于设置多行项目的垂直对齐方式。

1
2
3
4
5
6
7
8
.container {
       background-color: #5E80F4;
       width: 350px;
       height: 240px;
       display: flex;
       flex-wrap: wrap;
       align-content: flex-start;
   }

为了展示多行项目的效果，我们在第7行，使用了flex-wrap: wrap;设置了需要时换行。

第7行，表示设置多行项目，整体垂直上对齐。

align-content属性常见的6种属性值:

align-content属性的值 作用
stretch 项目未设置高度时，将被拉伸以适合容器（默认情况）
flex-start 多行项目垂直上对齐
flex-end 多行项目垂直下对齐
center 多行项目垂直居中对齐
space-around 多行项目间隔相对
space-between 多行项目两端对齐

本节总结：

5.顺序属性

容器属性，用于设置项目的整体样式。而要设置容器中项目的局部样式，就需要利用弹性盒子的项目属性。

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
<style>
    .container {
        background-color: #5E80F4;
        display: flex;
    }
    .container div {
        width: 80px;
        margin: 10px;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        background-color: #F1F1F1;
    }
    .item5 {
        order: 1;
    }
    .item2 {
        order: 2;
    }
    .item7 {
        order: 3;
    }
</style>

<div class="container">
    <div class="item2">2</div>
    <div class="item5">5</div>
    <div class="item7">7</div>
    <div class="item9">9</div>
</div>

第15、18、21行，通过顺序属性order定义了容器中项目的出现顺序。

  • 顺序属性值:为整数，可以为负数，数字大小决定项目出现的先后顺序。数字越小，排列越靠前，默认值为0。示例中，分别给5、2、7所在的项目，设置顺序属性值1、2、3。而9所在项目未设置属性值，为默认值0。所以项目呈现出9527。

6.长度属性

flex属性，是广义上的长度属性。它包含了项目的放大属性、缩小属性和初始长度属性。

6.1放大属性
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
<style>
    .container {
        background-color: #5E80F4;
        display: flex;
    }
    .container div {
        margin: 10px;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        background-color: #F1F1F1;
    }
    .container div:nth-child(1) {
        flex-grow: 1;
    }
    .container div:nth-child(2) {
        flex-grow: 2;
    }
    .container div:nth-child(3) {
        flex-grow: 3;
    }
</style>

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>0</div>
</div>

第14、17、20行，通过放大属性flex-grow，定义了容器中项目的相对放大比例。

flex-grow属性，用于定义容器中项目的相对放大比例。

**注意:**在容器还有剩余空间时，项目才能体现出放大的效果。

放大属性值，默认值为0，没有放大效果，会展示默认长度。示例中，分别给1、2、3所在的项目，设置放大属性值1、2、3。而0所在的项目未设置属性值，为默认值0。故0所在的项目为默认长度，剩余的空间会被1、2、3所在的项目将按照1:2:3的比例进行分配。

若只有一个项目设置了放大属性，只要放大属性值大于等于1，那么此项目会分配剩余的所有空间。

6.2 缩小属性

容器空间不足时，我们就需要使用缩小属性，来对项目进行收缩。

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
<style>
    .container {
        background-color: #5E80F4;
        width: 300px;
        display: flex;
    }
    .container div {
        width: 80px;
        margin: 10px;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        background-color: #F1F1F1;
    }
    .shrink {
        flex-shrink: 2;
    }  
</style>

<div class="container">
    <div>1</div>
    <div>1</div>
    <div class="shrink">2</div>
    <div>1</div>
</div>

第16行，通过缩小属性flex-shrink，定义了容器中项目的相对缩小比例。

flex-shrink属性，用于定义容器中项目的相对缩小比例。

**注意:**在容器空间不足时，项目才能体现出缩小的效果。

缩小属性值，默认值为1，即空间不足，项目将缩小。示例中，容器宽度200px，项目宽度60px，四个项目超出了容器的空间。因为数字2所在的项目，设置了缩小属性值为2，所以2所在的项目会缩小的比例更大。

有时，我们不想因为容器空间的不足，而去压缩容器的某些项目。这时候，我们就可以将项目的缩小属性的值设置为0，表示此项目不会因为空间不足而缩小。

6.3 初始长度属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
    .container {
        background-color: #5E80F4;
        display: flex;
    }
    .container div {
        margin: 10px;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        background-color: #F1F1F1;
    }
    .basis {
        flex-basis: 150px;
    }
</style>

<div class="container">
    <div>1</div>
    <div class="basis">2</div>
    <div>3</div>
    <div>4</div>
</div>

第14行，通过初始长度属性flex-basis，设置了项目的初始长度。

  • flex-basis属性，用于定义容器中项目的初始长度。当项目左右排列时，项目长度和宽度类似；当项目上下排列时，项目长度和高度类似。

  • 初始长度属性值，默认值为auto，即项目本来的大小。示例中，给数字2所在的项目设置初始长度为150px，其余项目未设置属性值，为默认值auto。

  • 属性优先级:当项目左右排列时，若元素同时设置了flex-basis属性和width属性，flex-basis的优先级更高。

6.4 flex属性

实际上，经常使用它们的简写形式 flex。简写形式 flex的属性值依次为： flex-grow、flex-shrink、flex-basis。

  • flex属性的默认值为：0 1 auto表示不会放大，空间不足会缩小，初始长度自动。

    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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex属性</title>
        <style>
            .container1,.container2,.container3 {
                background-color: #5E80F4;
                width: 600px;
                margin: 10px;
                display: flex;
            }
            .container1 div,.container2 div,.container3 div {
                width: 80px;
                margin: 10px;
                text-align: center;
                line-height: 60px;
                font-size: 30px;
                background-color: #F1F1F1;
            }
            /* TODO 设置容器1中的第一个项目的flex属性为0 0 auto */
            
            .container1 div:first-child {
                flex: 0 0 auto;
            }
            
            /* TODO 设置容器2中的第一个项目的flex属性为1 0 auto */
             .container2 div:first-child {
                flex: 1 0 auto;
            }
            
            
            /* TODO 设置容器3中的偶数位置的项目的flex属性为0 0 150px */
             .container3 div:nth-child(2n) {
                flex: 0 0 150px;
            }
            
            
        </style>
    </head>

    <body>
        <p>第一个项目不放大，不缩小，初始长度自动:</p>
        <div class="container1">
            <div>1</div><div>2</div><div>3</div><div>4</div>
        </div>
        
         <p>第一个项目放大，不缩小，初始长度自动:</p>
        <div class="container2">
            <div>1</div><div>2</div><div>3</div><div>4</div>
        </div>
        
        <p>偶数位置的项目不放大，不缩小，初始长度150px:</p>
        <div class="container3">
            <div>1</div><div>2</div><div>3</div><div>4</div>
        </div>
        
    </body>
    </html>

6.5 自适应布局

在弹性布局时，经常会使用自适应布局。自适应布局会充分分配容器的尺寸，分为两种：

  • 内敛的flex: 1;
  • 霸道的flex: auto;
6.5.1内敛的flex: 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .container {
           display: flex;
           border: 3px dashed #979797;
    }
   .container div {
       margin: 10px;
       border: 2px solid #5E80F4;
       flex: 1;
   }
</style>

<div class="container">
      <div>元素充分利用剩余空间，同时不会侵占其他元素应有的宽度的时候使用</div>
      <div>项目2</div>
      <div>项目3</div>
</div>

  • flex: 1;等同于设置flex: 1 1 0%;
  • flex: 1;的尺寸表现更为内敛，当项目未设置宽度时，其会优先牺牲自己的尺寸。通常是我们希望元素充分利用剩余空间，同时不会侵占其他元素应有的宽度的时候使用。
  • 简单来说，一般在等分布局时使用。
6.5.2 霸道的flex: auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .container {
           display: flex;
           border: 3px dashed #979797;
    }
   .container div {
       margin: 10px;
       border: 2px solid #5E80F4;
       flex: auto;
   }
</style>

<div class="container">
      <div>元素充分利用剩余空间，同时不会侵占其他元素应有的宽度的时候使用</div>
      <div>项目2</div>
      <div>项目3</div>
</div>

  • flex: auto;等同于设置flex: 1 1 auto;`
  • flex: auto;的尺寸表现更为霸道，当项目未设置宽度时，其会优先扩展自己的尺寸。
  • 通常是我们希望元素充分利用剩余空间，但各自的尺寸按照各自内容进行分配的时候使用。简单来说，一般适合内容动态适配的布局。

7.单项目对齐属性

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
<style>
    .container {
        width: 600px;
        height: 200px;
        background-color: #5E80F4;
        display: flex;
        align-items: center;
    }
    .container div {
        width: 80px;
        margin: 10px;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        background-color: #F1F1F1;
    }
    .container div:last-child {
        align-self: flex-start;
    }
</style>

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

第18行，设置了某个项目自身在垂直方向上对齐。

  • align-self属性，用于为某个项目设置不同于其它项目的垂直对齐方式

  • 示例中，flex-start表示上对齐。

  • 优先级：单项目对齐属性align-self会覆盖垂直对齐属性align-items的值。

  • align-self属性常见的5种属性值：

    align-self属性的值 作用
    auto 继承父容器的align-items属性的值（默认）
    stretch 项目未设置高度时，将被拉伸以适应容器
    flex-start 项目垂直上对齐
    flex-end 项目垂直下对齐
    center 项目垂直居中对齐

    示例：

    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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>单项目对齐属性</title>
        <style>
            .container {
                width: 400px;
                height: 400px;
                display: flex;
                background-color: #5E80F4;
                /* TODO 设置容器为垂直居中对齐 */
                align-items: center; 
            }
            .container div {
                width: 60px;
                margin: 5px;
                text-align: center;
                line-height: 60px;
                font-size: 30px;
                background-color: #F1F1F1;
            }
            .item1 {
                /* TODO 设置项目1的对齐方式为默认值auto */
                align-self: auto;
            }
            .item2 {
                /* TODO 设置项目2的对齐方式为垂直上对齐 */
                align-self: flex-start;
            }
            .item3 {
                /* TODO 设置项目3的对齐方式为垂直下对齐 */
                align-self: flex-end;
            }
            .item4 {
                /* TODO 设置项目4的对齐方式为居中对齐 */
               align-self: center; 
            }
            .item5 {
                /* TODO 设置项目5的对齐方式为stretch */
              align-self: stretch;  
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="item1">1</div>
            <div class="item2">2</div>
            <div class="item3">3</div>
            <div class="item4">4</div>
            <div class="item5">5</div>
        </div>
    </body>
    </html>

    代码效果：

本节总结：