布局
描述
-
表示对页面中的显示效果进行一些排列
- 水平方向居中
- 垂直方向居中
- 居中布局
水平方向居中
第一种方式
- 水平居中 + 行内块级元素（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>
