布局

第一步拆解页面布局：按照垂直方向进行划分

第二步拆解页面布局：按照水平方向进行分化

第三步拆解页面局部：垂直方向继续划分

布局名称说明
块布局用来布置文件。块布局包含以文档为中心的功能。
行内布局用来布置文本
表格布局用来布置表格
定位布局用来对那些与其他元素五交互的定位元素进行布置
弹性盒子布局用来布置那些可以顺利调整大小的复杂页面。
网格布局用来布置那些与一个固定网格相关的元素.

居中布局

  1. 垂直方向

    • vertical-align

      前提：为父级元素设置display

      /*
1. 将父级元素改为 display:table-cell
2. 为父级元素设置 vertical-align：middle
*/

    • 定位(相对定位)

      1. 为父级开启相对定位
2. 为子级元素开启绝对定位
3. 设置属性
    top:50%
    transform:translateX(一半的值)
    也可以使用margin-top

      真实代码

      1. 第一种

        <!-- 第一种方式 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            height: 600px;
            width: 700px;
            border: 1px solid gray;
            /* 为父级设置vertical-align属性即可 */
            display: table-cell;
            vertical-align: middle;
        }

        .b {
            width: 300px;
            height: 350px;
            background-color: lightcoral;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b"></div>
    </div>
</body>

</html>

      2. 第二种

        <!-- 第二种方式 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            height: 600px;
            width: 700px;
            border: 1px solid gray;
            position: relative;
        }

        .b {
            width: 300px;
            height: 300px;
            background-color: lightcoral;
            position: absolute;
            top: 50%;

            /* 此div的高度的50% */
            transform: translateY(-150px);
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b"></div>
    </div>
</body>

</html>

  2. 水平方向

    • 外边距（margin: 0 auto）

    • 如果当前容器元素或后代元素中包含文本内容，该文本内容居中显示

      text-align属性(可继承)原本的作用就是实现文本居中显示

    • 定位（一般使用相对定位，因为不脱离文档流）

      只有在父级容器开启定位后，才是相对于父级进行定位

      /* 
a)将 left 偏移量设置为 50%
b)将子级元素向左移动(子级元素宽度的1/2)
*/
transform: translateX(-150px) - CSS3新增属性
margin-left: -150px

    真实代码：

    1. 第一种

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            height: 300px;
            width: 400px;
            border: 1px solid gray;

        }

        .b {
            width: 200px;
            height: 150px;
            background-color: lightcoral;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b"></div>
    </div>
</body>

</html>

    2. 第二种

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            height: 300px;
            width: 400px;
            border: 1px solid gray;
            /*  
            为父级设置text-align属性
                - 子级必须是行内块级元素
                - 因为此属性具有遗传性，因此会将子元素中的元素也居中
             */
            text-align: center;
        }

        .b {
            width: 200px;
            height: 150px;
            background-color: lightcoral;
            display: inline-block;
            /* 解决子级元素居中问题 */
            text-align: left;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b">测试文字</div>
    </div>
</body>

</html>

    3. 第三种

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            height: 300px;
            width: 400px;
            border: 1px solid gray;
            position: relative;
        }

        .b {
            width: 200px;
            height: 150px;
            background-color: lightcoral;
            left: 50%;
            /* 
            父级元素必须开启定位
            此值为此元素宽度的一半（50%）
             */
            transform: translateX(100px);
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b">测试文字</div>
    </div>
</body>

</html>

  3. 同时垂直水平居中:

    1. 第一种

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            height: 300px;
            width: 400px;
            border: 1px solid gray;
            position: relative;
        }

        .b {
            width: 200px;
            height: 150px;
            background-color: lightcoral;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
    </div>
</body>
</html>

    2. 第二种

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            height: 300px;
            width: 400px;
            border: 1px solid gray;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .b {
            width: 200px;
            height: 150px;
            background-color: lightcoral;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b"></div>
    </div>
</body>

</html>

    3. 第三种

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            height: 300px;
            width: 400px;
            border: 1px solid gray;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .b {
            width: 200px;
            height: 150px;
            background-color: lightcoral;
            display: inline-block;
            text-align: left;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b"></div>
    </div>
</body>

</html>

多列布局

两列布局

一列定宽，一列自适应 关键在于自适应列

  1. 第一种

    这种方式存在的问题：如果改变左边div的宽度，则需要同时改变右边div的左外边距(margin-left)。

    解决方案 ：可以将margin-left修改为overflow:hidden （但依然存在问题：内容溢出隐藏）

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            margin: 0 auto;
        }

        .left {
            width: 200px;
            height: 100%;
            background-color: lightcoral;
            /* 为左边div设置浮动 */
            float: left;
        }

        .right {
            height: 100%;
            background-color: lightskyblue;
            /* 可以将外边距设置为 overflow:hidden */
            margin-left: 200px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>

</body>

</html>

  2. 第二种

    table-cell属性说明

    • 设置定宽 则自适应

    • 不设置则自适应

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            margin: 0 auto;
            display: table;
            table-layout: fixed;
        }
        .left,.right{
            display: table-cell;
        }
        .left {
            width: 200px;
            height: 100%;
            background-color: lightcoral;
        }

        .right {
            height: 100%;
            background-color: lightskyblue;
            margin-left: 200px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>

</body>

</html>

三列布局

两列定宽，一列自适应

等分布局

  1. 通过浮动实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 800px;
            height: 400px;
            border: 1px solid gray;
            margin: 0 auto;
        }
        .column{
            width: 25%;
            height: 100%;
            float: left;
            box-sizing: border-box;
        }
        .box1{
            background-color: lightcoral;
        }
        .box2{
            background-color: lightgreen;
        }
        .box3{
            background-color: lightskyblue;
        }
        .box4{
            background-color: lightpink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column box1"></div>
        <div class="column box2"></div>
        <div class="column box3"></div>
        <div class="column box4"></div>
    </div>
</body>
</html>

  2. 通过表格实现

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 400px;
            border: 1px solid gray;
            margin: 0 auto;
            display: table;
            table-layout: fixed;
        }

        .column {
            height: 100%;
            box-sizing: border-box;
            display: table-cell;
        }

        .box1 {
            background-color: lightcoral;
        }

        .box2 {
            background-color: lightgreen;
        }

        .box3 {
            background-color: lightskyblue;
        }

        .box4 {
            background-color: lightpink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="column box1"></div>
        <div class="column box2"></div>
        <div class="column box3"></div>
        <div class="column box4"></div>
    </div>
</body>

</html>

  3. 通过无序列表实现

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            margin: 0 auto;
            padding: 0;
            border: 1px solid gray;
            width: 800px;
            height: 400px;
        }

        .column {
            list-style: none;
            float: left;
            width: 25%;
            height: 100%;
        }
    </style>
</head>

<body>
    <ul class="container">
        <li class="column">示例样式</li>
        <li class="column">示例样式</li>
        <li class="column">示例样式</li>
        <li class="column">示例样式</li>
    </ul>
</body>

</html>

等高布局

  1. 通过表格实现

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 400px;
            border: 1px solid gray;
            margin: 0 auto;
            display: table;
            table-layout: fixed;
        }

        .left,
        .right {
            /* 表格中的单元格默认时等高的 */
            display: table-cell;
        }

        .left {
            width: 300px;
            background-color: lightcoral;

        }

        .right {
            width: 300px;
            background-color: lightskyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="column left"></div>
        <div class="column right"></div>
    </div>
</body>

</html>

全屏布局

没有滚动条，布局根据窗口大小改变。

  • 宽度问题

    直接设置成100%即可

  • 高度问题

    • 为body设置height:100%,为子级元素设置height:100%
    • vh单位，即设置height:100vh即可

实现方案1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;

            overflow: hidden;
        }

        .top,
        .content,
        .bottom {
            position: absolute;
        }

        .top {
            width: 100%;
            height: 50px;
            background-color: lightcoral;

            left: 0;
            top: 0;
            right: 0;
        }

        .content {
            width: 100%;
            /* height: 100px; */
            background-color: lightgreen;

            left: 0;
            right: 0;
            top: 50px;
            bottom: 50px;
        }

        .left,
        .right {
            float: left;
            position: relative;
        }

        .left {
            width: 300px;
            height: 100%;
            background-color: lightskyblue;

            z-index: 9999;
        }

        .right {
            width: 100%;
            height: 100%;
            background-color: mediumorchid;
            margin-left: -300px;
            z-index: 0;
        }

        .bottom {
            width: 100%;
            height: 50px;
            background-color: lightgray;

            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <!-- 全屏布局容器 -->
    <div class="container">
        <!-- 顶部栏 -->
        <div class="top"></div>
        <!-- 主体: 菜单+内容区 -->
        <div class="content">
            <!-- 菜单 -->
            <div class="left"></div>
            <!-- 内容区 -->
            <div class="right"></div>
        </div>
        <!-- 底部栏 -->
        <div class="bottom"></div>
    </div>
</body>

</html>

实现方案2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始化边距 */
        body,
        p {
            margin: 0;
        }
        /* 初始化高度 */
        body,
        html,
        .parent {
            height: 100%;
        }
        /* 将上部 中部 下部 水平铺满 */
        .top,
        .middle,
        .bottom {
            position: absolute;
            left: 0;
            right: 0;
        }
        /* 顶部始终在上 */
        .top {
            top: 0;
            height: 50px;
        }
        /* 底部始终在下 */
        .bottom {
            bottom: 0;
            height: 50px;
        }
        /* 中部位置 */
        .middle {
            top: 50px;
            bottom: 50px;
        }

        .left,
        .right {
            position: absolute;
            top: 0;
            bottom: 0;
        }
        /* 左 */
        .left {
            width: 100px;
        }
        /* 右 */
        .right {
            left: 120px;
            right: 0;
            overflow: auto;
        }

        .right-in {
            height: 1000px;
        }
    </style>
</head>

<body>
    <div class="parent" id="parent" style="background-color: lightgrey;">
        <div class="top" style="background-color: lightblue;">
            <p>top</p>
        </div>
        <div class="middle" style="background-color: pink;">
            <div class="left" style="background-color: orange;">
                <p>left</p>
            </div>
            <div class="right" style="background-color: lightsalmon;">
                <div class="right-in">
                    <p>right</p>
                </div>
            </div>
        </div>
        <div class="bottom" style="background-color: lightgreen;">
            <p>bottom</p>
        </div>
    </div>
</body>

</html>