构建静态页面 之 [ 布局 ]

布局

描述

表示对页面中的显示效果进行一些排列
- 水平方向居中
- 垂直方向居中
- 居中布局

水平方向居中

第一种方式

水平居中 + 行内块级元素（text-align: center + display: inline-block）

<head>
    <meta charset="UTF-8">
    <title>水平居中的第一种方法</title>
    <style>
        /*
            text-align: center + display: inline-block
            * 该方法需作用在父子结构中
            * 为父级设置text-align属性、为子级设置display属性
            注意的问题：
            * text-align属性
             * 是设置文本内容对齐方式的，又是继承属性，会连后代元素一同设置
            * display属性
             * 要实现水平居中就得改变元素类型为行内块级，也会有行内块级本身的一些问题
         */
        #d1 {
            height: 200px;
            background-color: red;
            /* 为父级设置text-align属性 */
            text-align: center;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 为子级设置display属性 */
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

第二种方式

外边距特性（margin: 0 auto）

<head>
    <meta charset="UTF-8">
    <title>水平居中的第二种方式</title>
    <style>
        /*
            margin: 0 auto
            * 可以利用外边距的特性实现水平居中
            * display属性的属性值只能是block或table
         */
        #d1 {
            width: 100%;
            height: 200px;
            background-color: red;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 设置display属性的属性值为 block 或 table */
            display: block;
            /* 利用外边距实现水平居中 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

第三种方式

定位（position属性 + transform属性）

<head>
    <meta charset="UTF-8">
    <title>水平居中的第三种方式</title>
    <style>
        /*
            position属性 + transform属性
            * 可以使用定位属性实现水平居中
            * 在使用绝对定位时，注意目标元素的父级元素也要开启定位
            * 也可以使用相对定位，相对定位是相对于自身做定位，父级元素可以不用开启定位
         */
        #d1 {
            width: 100%;
            height: 200px;
            background-color: red;
            /* 父级开启定位 - 配合子级开启绝对定位 */
            position: relative;
        }
        /* 绝对定位的方法 */
        #d2 {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 开启绝对定位实现水平居中 */
            position: absolute;
            left: 50%;
            /* transform属性 - 用于调整元素的显示位置 */
            transform: translateX(-50%);
        }
        /* 相对定位的方法 */
        #d3 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 开启相对定位实现水平居中 */
            position: relative;
            left: 50%;
            /* transform属性 - 用于调整元素的显示位置 */
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
<div id="d3"></div>
</body>

垂直方向居中

第一种方式

定义元素类型 + 垂直居中（display: table-cell + vertical-align: middle）

<head>
    <meta charset="UTF-8">
    <title>垂直居中的第一种方式</title>
    <style>
        /*
            display: table-cell + vertical-align: middle
            * 该方法只能使用在目标元素的父级元素上
            * display: table-cell - 将元素是定义为表格中的单元格
            * vertical-align: middle - 设置垂直居中
         */
        #d1 {
            width: 200px;
            height: 800px;
            background-color: red;
            /* 将目标元素定义为单元格 */
            display: table-cell;
            /* 设置垂直居中 */
            vertical-align: middle;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

第二种方式

定位（position属性 + transform属性）

<head>
    <meta charset="UTF-8">
    <title>垂直居中的第二种方式</title>
    <style>
        /*
            position属性 + transform属性
            * 可以使用定位属性实现垂直居中
            * 在使用绝对定位时，注意目标元素的父级元素也要开启定位
            * 也可以使用相对定位，相对定位是相对于自身做定位，父级元素可以不用开启定位
         */
        #d1 {
            width: 200px;
            height: 800px;
            background-color: red;
            /* 父级开启定位 - 配合子级开启绝对定位 */
            position: relative;
        }
        /* 绝对定位的方法 */
        #d2 {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 开启绝对定位实现垂直居中 */
            position: absolute;
            left: 50%;
            /* transform属性 - 用于调整元素的显示位置 */
            transform: translateY(-50%);
        }
        /* 相对定位的方法 */
        #d3 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 开启相对定位实现垂直居中 */
            position: relative;
            left: 50%;
            /* transform属性 - 用于调整元素的显示位置 */
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
<div id="d3"></div>
</body>

居中布局

表示水平方向和垂直方向同时居中

第一种方式

水平方向 - 外边距（margin: 0 auto）
垂直方向 - 定义元素类型 + 垂直居中（display: table-cell + vertical-align: middle）

<head>
    <meta charset="UTF-8">
    <title>居中布局的第一种方式</title>
    <style>
        /*
            居中布局 - 表示水平方向和垂直方向同时居中
            * 水平方向 - margin: 0 auto
            * 垂直方向 - display: table-cell + vertical-align: middle
         */
        #d1 {
            width: 800px;
            height: 600px;
            background-color: lightgray;
            /* 父级元素设置垂直居中 */
            display: table-cell;
            vertical-align: middle;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            /* 子级元素设置水平居中 */
            display: table;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

第二种方式

定位（position属性 + transform属性）

<head>
    <meta charset="UTF-8">
    <title>居中布局的第二种方式</title>
    <style>
        /*
            position属性 + transform属性
            * 可以使用定位属性实现居中布局的效果
            * 在使用绝对定位时，注意目标元素的父级元素也要开启定位
            * 也可以使用相对定位，相对定位是相对于自身做定位，父级元素可以不用开启定位
         */
        #d1 {
            width: 800px;
            height: 800px;
            background-color: red;
            /* 开启定位 - 配合子级元素开启绝对定位 */
            position: relative;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 开启绝对定位实现居中布局效果 */
            position: absolute;
            left: 50%;
            top: 50%;
            /* 调整元素的显示位置 */
            transform: translate(-50%, -50%);
        }
        /* 相对定位的方式 */
        #d3 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 开启相对定位实现居中布局的效果 */
            position: relative;
            left: 50%;
            top: 50%;
            /* 调整元素的显示位置 */
            transform: translate(-50%, -50%);
        }

    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
<div id="d3"></div>
</body>

两列布局

表示水平排列的元素布局方式

第一种方式

浮动 + 外边距

<head>
    <meta charset="UTF-8">
    <title>第一种两列布局</title>
    <style>
        /*
            两列布局 - 表示水平排列的元素布局方式
            * 一列定宽，一列自适应
            * 浮动 + 外边距
         */
        div {
            height: 300px;
        }
        .d1 {
            /* 设置定宽 */
            width: 300px;
            background-color: red;
            /* 设置浮动 */
            float: left;
        }
        .d2 {
            width: 100%;
            background-color: green;
            /*
                使用外边距调整显示位置
                * 调整的距离等于定宽的宽度
             */
            margin-left: 300px;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>

第二种方式

通过浮动 + 外边距 + 父级容器实现两列布局

<head>
    <meta charset="UTF-8">
    <title>第二种两列布局</title>
    <style>
        /*
            通过浮动 + 外边距 + 父级容器实现两列布局
            * 为自适应的列添加父级容器
            * 通过外边距调整位置让元素显示在一列中（调整的数值为等于定宽的宽度）
         */
        .d1, .d2 {
            height: 300px;
        }
        .d1 {
            /* 定宽 */
            width: 300px;
            background-color: red;
            float: left;
            /* 开启定位 - 用于提高优先层次 */
            position: relative;
        }
        .rongqi {
            background-color: blue;
            float: right;
            /* 设置浮动后的宽度 */
            width: 100%;
            /* 通过外边距控制当前元素的显示位置 */
            margin-left: -300px;
        }
        .d2 {
            background-color: green;
            margin-left: 300px;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="rongqi">
    <div class="d2"></div>
</div>
</body>

第三种方式

浮动 + BFC模式

<head>
    <meta charset="UTF-8">
    <title>第三种两列布局</title>
    <style>
        /*
            第三种两列布局
            * 浮动 + BFC模式
         */
        div {
            height: 300px;
        }
        .d1 {
            /* 设置定宽 */
            width: 300px;
            background-color: red;
            /* 设置浮动 */
            float: left;
        }
        .d2 {
            background-color: green;
            /* 开启BFC模式 - 解决浮动后的堆叠显示问题 */
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>

第四种方式

通过display属性实现两列布局

<head>
    <meta charset="UTF-8">
    <title>第四种两列布局</title>
    <style>
        /*
            通过display属性实现两列布局
            * 将指定元素定义为表格中的单元格
            * 将指定元素的父级元素定义为表格
            * 通过表格特性实现两列不急
         */
        .rongqi {
            /* 通过display属性定义为表格 */
            display: table;
            table-layout: fixed;
            width: 100%;
        }
        .d1, .d2 {
            height: 300px;
            /* 通过display属性定义为表格中的单元格 */
            display: table-cell;
        }
        .d1 {
            /* 定宽 */
            width: 300px;
            background-color: red;
        }
        /* 由于表格中的单元格的特性，自适应的宽度会自行分配 */
        .d2 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="rongqi">
    <div class="d1"></div>
    <div class="d2"></div>
</div>
</body>

三列布局

右边自适应三列布局
中间自适应三列布局

右边自适应三列布局

在两列布局的基础上在加上一列定宽
可以按照两列布局的方式来实现

<head>
    <meta charset="UTF-8">
    <title>三列布局 - 右自适应</title>
    <style>
        /*
            右自适应的三列布局
            * 可以按照两列布局的方式来实现
         */
        body {
            margin: 0;
        }
        div {
            height: 300px;
        }
        .left {
            /* 设置浮动 - 让元素在一行中显示 */
            float: left;
            /* 设置定宽 */
            width: 200px;
            background-color: red;
        }
        .center {
            /* 设置浮动 - 让元素在一行中显示 */
            float: left;
            /* 设置定宽 */
            width: 200px;
            background-color: green;
        }
        .right {
            background-color: blue;
            /* 设置外边距 - 调整覆盖问题，调整的距离为两列定宽的宽度之和 */
            margin-left: 400px;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>

中间自适应三列布局

第一种方式

改变HTML代码顺序结构

<head>
    <meta charset="UTF-8">
    <title>三列布局 - 中间自适应</title>
    <style>
        /*
            中间自适应的三列布局 - 第一种方式
            * 由于浮动的问题右侧定宽的元素无法和其他元素显示在一行中
            * 可以通过改变HTML代码顺序结构来解决
            * 在对中间自适应的列进行压缩，解决覆盖问题
         */
        body {
            margin: 0;
        }
        div {
            height: 400px;
        }
        .left {
            /* 设置浮动 - 让元素显示在一行 */
            float: left;
            /* 设置定宽 */
            width: 200px;
            background-color: red;
        }
        .center {
            background-color: blue;
            /* 设置外边距 - 解决覆盖问题 */
            margin: 0 200px 0;
        }
        .right {
            /* 设置浮动 - 让元素显示在一行 */
            float: right;
            /* 设置定宽 */
            width: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="left"></div>
<!-- 改变HTML代码顺序结构 -->
<div class="right"></div>
<div class="center"></div>
</body>

第二种方式

为中间自适应的区域添加子级,解决覆盖问题

<head>
    <meta charset="UTF-8">
    <title>三列布局 - 中间自适应</title>
    <style>
        /*
            中间自适应的三列布局 - 第二种方式
            * 为中间自适应的区域添加子级
            * 调整子级的显示区域，解决覆盖问题
            * 对三列设置浮动，利用外边距调整位置使其显示在一行中
         */
        body {
            margin: 0;
        }
        div {
            height: 400px;
        }
        .left {
            /* 设置浮动 - 让元素显示在一行 */
            float: left;
            /* 设置定宽 */
            width: 200px;
            /* 开启定位 - 用于提高覆盖后的显示层级 */
            position: relative;
            background-color: red;
        }
        .center {
            background-color: blue;
            /* 设置浮动 - 用于让后面的下一个元素可以显示在同一行 */
            float: left;
            /* 设置宽度 - 自适应不能是定宽 */
            width: 100%;
            /* 利用外边距移动元素，使其在一行中显示 */
            margin-left: -200px;
        }
        .right {
            /* 设置浮动 - 让元素显示在一行 */
            float: left;
            /* 设置定宽 */
            width: 200px;
            /* 利用外边距移动元素，使其在一行中显示 */
            margin-left: -200px;
            background-color: green;
        }
        .neirong {
            /* 设置外边距压缩元素，解决覆盖问题 */
            margin: 0 200px 0;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="center">
    <!-- 通过子级解决覆盖问题 -->
    <div class="neirong"></div>
</div>
<div class="right"></div>
</body>

第三种方式

简易圣杯布局

<head>
    <meta charset="UTF-8">
    <title>三列布局 - 中间自适应</title>
    <style>
        /*
            中间自适应的三列布局 - 第三种方式
            * 圣杯布局
             * 添加整体容器
             * 通过设置内边距挤压出两边定宽的区域
             * 在通过定位将定宽的两列移动到指定区域，解决覆盖问题
         */
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
        }
        .rongqi {
            /* 设置内边距 - 挤压出两侧定宽的显示区域 */
            padding: 0 200px 0;
        }
        .rongqi > div {
            height: 400px;
        }
        .left {
            /* 设置浮动 - 让元素显示在一行 */
            float: left;
            /* 设置定宽 */
            width: 200px;
            /* 通过定位将元素移动到指定区域解决覆盖问题 */
            position: relative;
            left: -200px;
            background-color: red;
        }
        .center {
            background-color: blue;
            /* 设置浮动 - 用于让后面的下一个元素可以显示在同一行 */
            float: left;
            /* 设置宽度 - 自适应不能是定宽 */
            width: 100%;
            /* 利用外边距移动元素，使其在一行中显示 */
            margin-left: -200px;
        }
        .right {
            /* 设置浮动 - 让元素显示在一行 */
            float: left;
            /* 设置定宽 */
            width: 200px;
            /* 利用外边距移动元素，使其在一行中显示 */
            margin-left: -200px;
            /* 通过定位将元素移动到指定区域解决覆盖问题 */
            position: relative;
            right: -200px;
            background-color: green;
        }
    </style>
</head>
<body>
<!-- 添加整体容器 -->
<div class="rongqi">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>

第四种方式

简易双飞翼布局

<head>
    <meta charset="UTF-8">
    <title>三列布局 - 中间自适应</title>
    <style>
        /*
            中间自适应的三列布局 - 第四种方式
            * 双飞翼布局
             * 改变HTML代码顺序结构
             * 为中间自适应的区域添加子级
             * 调整子级的显示区域，解决覆盖问题
             * 对三列设置浮动，利用外边距调整位置使其显示在一行中
         */
        body {
            margin: 0;
        }
        div {
            height: 400px;
        }
        .left {
            /* 设置浮动 - 让元素显示在一行 */
            float: left;
            /* 设置定宽 */
            width: 200px;
            /* 利用外边距移动元素，使其在一行中显示 */
            margin-left: -100%;
            background-color: red;
        }
        .center {
            background-color: blue;
            /* 设置浮动 - 用于让后面的下一个元素可以显示在同一行 */
            float: left;
            /* 设置宽度 - 自适应不能是定宽 */
            width: 100%;
        }
        .right {
            /* 设置浮动 - 让元素显示在一行 */
            float: left;
            /* 设置定宽 */
            width: 200px;
            /* 利用外边距移动元素，使其在一行中显示 */
            margin-left: -200px;
            background-color: green;
        }
        .neirong {
            /* 设置外边距压缩元素，解决覆盖问题 */
            margin: 0 200px 0;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!-- 改变HTML代码顺序结构 - 便于浏览器搜索抓取 -->
<div class="center">
    <!-- 通过子级解决覆盖问题 -->
    <div class="neirong"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>

定分布局

表示子级元素平均分配父级元素的宽度
- 没有间隙的等分布局
- 有间隙的等分布局

没有间隙的等分布局

通过百分比来设置

<head>
    <meta charset="UTF-8">
    <title>等分布局</title>
    <style>
        /*
            等分布局 - 表示子级元素平均分配父级元素的宽度
            * 通过百分比来设置
             * 用父级元素的宽度（100%）除以子级元素的个数，得到每个子级元素所占的百分比宽度值
         */
        body {
            margin: 0;
        }
        div {
            /* 设置浮动 - 让元素水平排列 */
            float: left;
            /* 设置百分比宽度值会自行等分在父级元素中的所占区域 */
            width: 25%;
            height: 400px;
        }
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .d3 {
            background-color: blue;
        }
        .d4 {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</body>

通过display属性来实现等分布局

<head>
    <meta charset="UTF-8">
    <title>等分布局</title>
    <style>
        /*
            等分布局 - 表示子级元素平均分配父级元素的宽度
            * 通过display属性来实现等分布局
             * 为指定元素添加父级元素，并通过display属性将其定义为表格（table属性值）
             * 通过display属性将指定元素定义为表格中的单元格（table-cell属性值）
             * 通过表格的特性实现等分布局
         */
        body {
            margin: 0;
        }
        .table {
            /* 将该元素定义为表格 */
            display: table;
            /* 设置宽度 - 没有宽度表格没有显示 */
            width: 100%;
        }
        .table > div {
            /*
                将该元素定义为单元格
                 * 不需要设置单元格的宽度，通过表格的特性，会自行等分表格的宽度
             */
            display: table-cell;
            height: 400px;
        }
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .d3 {
            background-color: blue;
        }
        .d4 {
            background-color: yellow;
        }
    </style>
</head>
<body>
<!-- 添加容器 - 定义为表格 -->
<div class="table">
    <!-- 再将指定元素定义为表格中的单元格 -->
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
</div>
</body>

有间隙的等分布局

添加容器 + 外边距 + overflow属性

<head>
    <meta charset="UTF-8">
    <title>等分布局 - 有间距</title>
    <style>
        /*
            有间距的等分布局 - 第一种方式
            * 为指定元素添加整体容器，并在整体容器之上添加可视容器
            * 整体容器的宽度等于 指定元素的宽度之和 加上 指定元素的外边距之和
            * 可视容器的宽度等于 指定元素的宽度之和 加上 指定元素的外边距之和减一（一个元素的外边距）
            * 通过对可视容器设置overflow属性来去除对出的外边距
         */
        body {
            margin: 0;
        }
        .keshi {
            /* 设置可视容器的宽度 - 四个指定元素的宽度 + 三个指定元素的外边距 */
            width: 1260px;
            /*
                用解决内容溢出的方式去除第四的外边距
                同时解决由于子级设置浮动引出的高度塌陷问题
             */
            overflow: hidden;
            border: 1px solid blueviolet;
        }
        .keshi > .rongqi {
            /* 设置整体容器宽度 - 四个指定元素的宽度 + 四个指定元素的外边距 */
            width: 1280px;

            /* 设置高度解决高度塌陷 */
            /*height: 400px;*/

            /* 通过设置浮动开启BFC模式，解决高度塌陷 */
            float: left;
            background-color: #ff6700;
        }
        .keshi > .rongqi > div {
            /* 设置浮动 - 让元素水平排列显示 */
            float: left;
            width: 300px;
            height: 400px;
            /* 通过外边距设置元素间的间隙 */
            margin-right: 20px;
        }
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .d3 {
            background-color: blue;
        }
        .d4 {
            background-color: yellow;
        }
    </style>
</head>
<body>
<!-- 添加可视容器 -->
<div class="keshi">
    <!-- 添加整体容器 -->
    <div class="rongqi">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
        <div class="d4"></div>
    </div>
</div>
</body>

添加容器 + 外边距 + 定位

<head>
    <meta charset="UTF-8">
    <title>等分布局 - 有间距</title>
    <style>
        /*
            有间距的等分布局 - 第二种方式
            * 为指定元素添加整体容器，并在整体容器之上添加可视容器
            * 整体容器的宽度等于 指定元素的宽度之和 加上 指定元素的外边距之和
            * 可视容器的宽度等于 指定元素的宽度之和 加上 指定元素的外边距之和减一（一个元素的外边距）
            * 对整体容器开启定位，通过调整定位的显示位置来去除多余的外边距
         */
        body {
            margin: 0;
        }
        .keshi {
            /* 设置可视容器的宽度 - 四个指定元素的宽度 + 三个指定元素的外边距 */
            width: 1260px;
            border: 1px solid blueviolet;
        }
        .keshi > .rongqi {
            /* 设置整体容器宽度 - 四个指定元素的宽度 + 四个指定元素的外边距 */
            width: 1280px;
            /* 开启BFC模式解决高度塌陷 */
            overflow: hidden;
            /* 开启相对定位 */
            position: relative;
            /* 定位的距离等于外边距的数值 */
            left: -20px;
            background-color: #ff6700;
        }
        .keshi > .rongqi > div {
            /* 设置浮动 - 让元素水平排列显示 */
            float: left;
            width: 300px;
            height: 400px;
            /* 通过外边距设置元素间的间隙 */
            margin-left: 20px;
        }
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .d3 {
            background-color: blue;
        }
        .d4 {
            background-color: yellow;
        }
    </style>
</head>
<body>
<!-- 添加可视容器 -->
<div class="keshi">
    <!-- 添加整体容器 -->
    <div class="rongqi">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
        <div class="d4"></div>
    </div>
</div>
</body>

等高布局

等高布局 - 表示在一行中的元素拥有相同的高度
- 简单粗暴的方式 - 直接设置统一高度
- 通过display属性设置等高布局
- 通过设置内、外边距进行挤压实现伪等高

通过display属性设置等高布局

为指定元素添加整体容器，并且设置display属性，定义为表格（table属性值）
为指定元素设置display属性，定义为表格中的单元格（table-cell属性值）
通过表格的特性实现等高布局

<head>
    <meta charset="UTF-8">
    <title>等高布局</title>
    <style>
        /*
            等高布局 - 表示在一行中的元素拥有相同的高度
            * 简单粗暴的方式 - 直接设置统一高度

            * 通过display属性设置等高布局
             * 为指定元素添加整体容器，并且设置display属性，定义为表格（table属性值）
             * 为指定元素设置display属性，定义为表格中的单元格（table-cell属性值）
             * 通过表格的特性实现等高布局
         */
        body {
            margin: 0;
        }
        .rongqi {
            /* 将整体容器定义为表格 */
            display: table;
        }
        .rongqi > div {
            /* 将指定元素定义为单元格 */
            display: table-cell;
            width: 300px;
        }
        .left {
            background-color: red;
        }
        .right {
            background-color: green;
        }
    </style>
</head>
<body>
<!-- 添加整体容器 - 将容器定义为表格 -->
<div class="rongqi">
    <!-- 将指定元素定义为单元格 -->
    <div class="left">我是谁、我在那、我要干啥</div>
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet blanditiis cum enim inventore iure nihil odit, optio porro quasi reiciendis similique sit tempora voluptate voluptates voluptatibus. Amet, iure!</div>
</div>
</body>

通过设置内、外边距进行挤压实现伪等高

为指定元素设置下内边距，向下拉伸
为指定元素设置下外边距（负值），向上挤压
为整体容器设置overflow属性，隐藏多余的部分实现伪等高布局

<head>
    <meta charset="UTF-8">
    <title>等高布局</title>
    <style>
        /*
            等高布局 - 表示在一行中的元素拥有相同的高度
            * 通过设置 内、外边距 进行挤压实现伪等高
             * 为指定元素设置下内边距，向下拉伸
             * 为指定元素设置下外边距（负值），向上挤压
             * 为整体容器设置overflow属性，隐藏多余的部分实现伪等高布局
         */
        body {
            margin: 0;
        }
        .rongqi {
            width: 600px;
            /* 解决内容溢出 - 实现伪等高 */
            overflow: hidden;
        }
        .rongqi > div {
            float: left;
            width: 300px;
            /* 设置下内边距 */
            padding-bottom: 999px;
            /* 设置下外边距 */
            margin-bottom: -999px;
        }
        .left {
            background-color: red;
        }
        .right {
            background-color: green;
        }
    </style>
</head>
<body>
<!-- 添加整体容器 -->
<div class="rongqi">
    <div class="left">我是谁、我在那、我要干啥</div>
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet blanditiis cum enim inventore iure nihil odit, optio porro quasi reiciendis similique sit tempora voluptate voluptates voluptatibus. Amet, iure!</div>
</div>
</body>

全局布局

表示对整个页面进行布局
- 可以通过固定定位来实现

<head>
    <meta charset="UTF-8">
    <title>全屏布局</title>
    <style>
        /*
            全局布局 - 表示对整个页面进行布局
            * 可以通过固定定位来实现
            * 当偏移量的left和right的属性值都为 0 时，可以不设置宽度
            * 设置高度为百分值时，相对父级不能是页面
         */
        body {
            margin: 0;
        }
        header {
            /* 设置定高 */
            height: 100px;
            /* 设置固定定位 - 将顶部内容固定在页面顶部 */
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            background-color: #c9c9c9;
        }
        main {
            /* 设置固定定位 - 通过固定定位实现主体内容自适应 */
            position: fixed;
            left: 0;
            top: 100px;
            right: 0;
            bottom: 100px;
            overflow: auto;
            background-color: #00c3f5;
        }
        main > .left {
            /* 设置定宽 */
            width: 300px;
            height: 100%;
            position: fixed;
            background-color: #6fc749;
        }
        main > .right {
            height: 1000px;
            /* 通过外边距解决覆盖问题 */
            margin-left: 300px;
            background-color: yellow;
        }
        footer {
            height: 100px;
            /* 设置固定定位 - 将底部内容固定在页面底部 */
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: #666666;
        }
    </style>
</head>
<body>
<!-- 页面顶部 -->
<header></header>
<!-- 页面主体 -->
<main>
    <div class="left"></div>
    <div class="right"></div>
</main>
<!-- 页面底部 -->
<footer></footer>
</body>

构建静态页面 之 [ 布局 ]

布局

描述

水平方向居中

第一种方式

第二种方式

第三种方式

垂直方向居中

第一种方式

第二种方式

居中布局

第一种方式

第二种方式

两列布局

第一种方式

第二种方式

第三种方式

第四种方式

三列布局

右边自适应三列布局

中间自适应三列布局

第一种方式

第二种方式

第三种方式

第四种方式

定分布局

没有间隙的等分布局

通过百分比来设置

通过display属性来实现等分布局

有间隙的等分布局

添加容器 + 外边距 + overflow属性

添加容器 + 外边距 + 定位

等高布局

通过display属性设置等高布局

通过设置 内、外边距 进行挤压实现伪等高

全局布局

蔡志远

引用和评论

Ajax 之 [ jQuery中的Ajax ]

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

Jerry和您聊聊Chrome开发者工具

构建静态页面之 [ 布局 ]

通过设置内、外边距进行挤压实现伪等高