一、堆叠顺序

CSS可以通过【z-index】属性，设置元素的堆叠顺序，【z-index】属性值是一个数字，可以是负数、整数、0，数字越大优先级越高，也就是位于最上层。

1.1、默认堆叠顺序

CSS默认情况下，定位元素的堆叠顺序是按照元素定义的先后顺序来确定的，也就是说，后面定义的元素会覆盖前面定义的元素，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index</title>
    <style>
        div > div {
            width: 100px;
            height: 100px;
            float: left;
        }
        .a  {
            background-color: bisque;
            position: absolute;
        }
        .b {
            background-color: cadetblue;
            position: absolute;
            top: 50px;
            left: 30px;
        }
        .c {
            background-color: coral;
            position: absolute;
            top: 30px;
            left: 80px;
        }
    </style>
</head>
<body>
    <div>
        <div class="a">盒子1</div>
        <div class="b">盒子2</div>
        <div class="c">盒子3</div>
    </div>
</body>
</html>

上面代码运行效果如下：

1.2、设置堆叠顺序

CSS通过使用【z-index】属性，可以设置元素的堆叠顺序，从而使得堆叠顺序和元素的先后定义顺序没有关系。【z-index】属性取值是数字，数字越大，优先级越高，元素就会位于最上层。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index</title>
    <style>
        div > div {
            width: 100px;
            height: 100px;
            float: left;
        }
        .a  {
            background-color: bisque;
            position: absolute;
            /* 设置堆叠顺序 */
            z-index: 20;
        }
        .b {
            background-color: cadetblue;
            position: absolute;
            top: 50px;
            left: 30px;
            /* 设置堆叠顺序 */
            z-index: 50;
        }
        .c {
            background-color: coral;
            position: absolute;
            top: 30px;
            left: 80px;
            /* 设置堆叠顺序 */
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        <div class="a">盒子1</div>
        <div class="c">盒子3</div>
        <div class="b">盒子2</div>
    </div>
</body>
</html>

运行效果如下：

二、宽高自适应

2.1、设置宽高自适应

CSS通过【百分比%】的形式来设置宽度、高度，从而实现宽度、高度的自适应，即：当浏览器窗口大小发生变化时候，元素的宽度、高度会自动变化。【百分比%】是以父容器的宽度、高度来进行计算的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宽高自适应</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        div {
            width: 50%;
            height: 50%;
            margin: auto;
            border: 5px solid blue;
        }
    </style>
</head>
<body>
    <div>
        设置宽高自适应
    </div>
</body>
</html>

运行效果：

2.2、最小最大宽高

CSS提供了【min-width、min-height、max-width、max-height】属性，可以用于设置元素的最小、最大宽高。元素的最小、最大宽度、高度只能够设置具体的数字，不能够使用百分比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宽高自适应</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        div {
            width: 50%;
            height: 50%;
            min-width: 300px;
            max-width: 400px;
            min-height: 150px;
            max-height: 200px;
            margin: auto;
            border: 5px solid blue;
        }
    </style>
</head>
<body>
    <div>
        设置宽高自适应
    </div>
</body>
</html>

三、calc数学函数

3.1、calc函数

calc()是CSS提供的一个数学函数，这个函数作用就是计算表达式，【clac()】函数可以接受一个表达式，它能够计算出表达式的值。例如：

calc(100% – 100px)、calc(50% – 200px)

下面通过一个案例来看下calc函数的使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宽高自适应</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            height: 400px;
            /* 设置元素高度自适应 */
            overflow: auto;
        }
        .left {
            width: 210px;
            height: 100%;
            float: left;
            background-color: cadetblue;
        }
        .right {
            width: calc(100% - 210px);
            height: 100%;
            float: left;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">左侧布局</div>
        <div class="right">右侧布局</div>
    </div>
</body>
</html>

上面案例就是左侧宽度固定，右侧宽度自适应的布局。