布局

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

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

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

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

居中布局

  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>