一. 圣杯布局
思路:
1. 定义三个标签 两侧标签固定宽度 中间标签宽度自适应(100%) 将中间标签放在最前面 使其优先渲染
2. 将三个标签浮动 在清浮动 然后给左侧标签设置 margin - left : -100%; 右侧标签设置 margin - left 等于负的本身宽度
3. 最后给三个标签的父级标签添加左右内边距 padding 等于左右标签的宽度 使两侧标签挤出去 然后在给左右两侧标签设置相对定位(注意子绝父相)
缺点: 当中间标签小于左侧标签时 布局会发生混乱
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 中间盒子自适应100% */
.center {
width: 100%;
height: 400px;
background-color: springgreen;
/* 浮动 */
float: left;
}
/* 两侧盒子固定高度 */
.left {
width: 200px;
height: 400px;
background-color: red;
float: left;
margin-left: -100%;
/* 设置相对定位 */
position: relative;
left: -200px;
}
.right {
width: 200px;
height: 400px;
background-color: yellow;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
/* 给父盒子设置相对定位 */
.box {
padding-left: 200px;
padding-right: 200px;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="center">月亮</div>
<div class="left">太阳</div>
<div class="right">地球</div>
</div>
</body>
</html>
二. 双飞翼布局
思路:
1. 定义三个标签 两侧标签固定宽度 中间标签宽度自适应(100%) 将中间标签放在最前面 使其优先渲染
2. 将三个标签浮动 在清浮动 然后给左侧标签设置 margin - left : -100%; 右侧标签设置 margin - left 等于负的本身宽度
3. 给中间标签添加一个空的标签div 设置左右外边距margin
缺点: 相对于圣杯布局多嵌套了一层标签
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 中间盒子宽度自适应 */
.center {
width: 100%;
height: 400px;
background-color: pink;
float: left;
}
/* 给中间盒子的子盒子设置左右外边距 */
.center1 {
margin: 0 200px 0 200px;
}
/* 左右固定宽度 */
.left {
width: 200px;
height: 400px;
background-color: indianred;
/* 浮动 */
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 400px;
background-color: indigo;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="center">
<!-- 给中间盒子加一个子盒子 -->
<div class="center1">
地球
</div>
</div>
<div class="left">太阳</div>
<div class="right">月亮</div>
</div>
</body>
</html>
三. 等高布局
等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧
实现要点:
1. 多个列要单独设置自己的背景色
2. 一列变高 其他列等高变化
1. 假等高
利用内外边距相抵消 (注意设置父元素overflow: hidden;)
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.box {
width: 1200px;
overflow: hidden;
margin: 0 auto;
}
.left {
width: 400px;
background-color: royalblue;
float: left;
/* 利用内外边距相抵消 */
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.center {
width: 400px;
background-color: red;
float: left;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.right {
width: 400px;
background-color: seagreen;
float: left;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="left">
青天有月来几时？我今停杯一问之。
人攀明月不可得，月行却与人相随。
皎如飞镜临丹阙，绿烟灭尽清辉发。
但见宵从海上来，宁知晓向云间没。
白兔捣药秋复春，嫦娥孤栖与谁邻？
今人不见古时月，今月曾经照古人。
古人今人若流水，共看明月皆如此。
</div>
<div class="center">
青天有月来几时？我今停杯一问之。
人攀明月不可得，月行却与人相随。
皎如飞镜临丹阙，绿烟灭尽清辉发。
但见宵从海上来，宁知晓向云间没。
白兔捣药秋复春，嫦娥孤栖与谁邻？
今人不见古时月，今月曾经照古人。
古人今人若流水，共看明月皆如此。
唯愿当歌对酒时，月光长照金樽里。
青天有月来几时？我今停杯一问之。
人攀明月不可得，月行却与人相随。
皎如飞镜临丹阙，绿烟灭尽清辉发。
但见宵从海上来，宁知晓向云间没。
白兔捣药秋复春，嫦娥孤栖与谁邻？
今人不见古时月，今月曾经照古人。
古人今人若流水，共看明月皆如此。
唯愿当歌对酒时，月光长照金樽里。
青天有月来几时？我今停杯一问之。
人攀明月不可得，月行却与人相随。
皎如飞镜临丹阙，绿烟灭尽清辉发。
但见宵从海上来，宁知晓向云间没。
白兔捣药秋复春，嫦娥孤栖与谁邻？
今人不见古时月，今月曾经照古人。
古人今人若流水，共看明月皆如此。
唯愿当歌对酒时，月光长照金樽里。
</div>
<div class="right">
青天有月来几时？我今停杯一问之。
人攀明月不可得，月行却与人相随。
皎如飞镜临丹阙，绿烟灭尽清辉发。
但见宵从海上来，宁知晓向云间没。
白兔捣药秋复春，嫦娥孤栖与谁邻？
今人不见古时月，今月曾经照古人。
古人今人若流水，共看明月皆如此。
唯愿当歌对酒时，月光长照金樽里。
青天有月来几时？我今停杯一问之。
人攀明月不可得，月行却与人相随。
皎如飞镜临丹阙，绿烟灭尽清辉发。
但见宵从海上来，宁知晓向云间没。
白兔捣药秋复春，嫦娥孤栖与谁邻？
今人不见古时月，今月曾经照古人。
古人今人若流水，共看明月皆如此。
唯愿当歌对酒时，月光长照金樽里。
</div>
</div>
</body>
</html>
2. 真等高
利用内容撑开父元素的特点 给每列添加相对应的容器 并进行相互嵌套 并在每个容器中设置背景色 (注意: 有多少列就要有多少个容器 如有三列就要有三个容器)
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.left {
width: 500px;
float: left;
position: relative;
left: 1000px;
}
.right {
width: 500px;
float: left;
position: relative;
left: 1000px;
}
.center {
width: 500px;
float: left;
position: relative;
left: 1000px;
}
.a {
width: 1500px;
background-color: slateblue;
margin: 0 auto;
overflow: hidden;
}
.b {
width: 1500px;
background-color: springgreen;
margin-left: -500px;
}
.c {
width: 1500px;
background-color: yellow;
margin-left: -500px;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="c clearfix">
<div class="left">
1青天有月来几时？我今停杯一问之。
人攀明月不可得，月行却与人相随。
皎如飞镜临丹阙，绿烟灭尽清辉发。
但见宵从海上来，宁知晓向云间没。
白兔捣药秋复春，嫦娥孤栖与谁邻？
今人不见古时月，今月曾经照古人。
古人今人若流水，共看明月皆如此。
唯愿当歌对酒时，月光长照金樽里。
</div>
<div class="center">
2青天有月来几时？我今停杯一问之。
人攀明月不可得，月行却与人相随。
皎如飞镜临丹阙，绿烟灭尽清辉发。
但见宵从海上来，宁知晓向云间没。
白兔捣药秋复春，嫦娥孤栖与谁邻？
今人不见古时月，今月曾经照古人。
古人今人若流水，共看明月皆如此。
唯愿当歌对酒时，月光长照金樽里。
青天有月来几时？我今停杯一问之。
人攀明月不可得，月行却与人相随。
皎如飞镜临丹阙，绿烟灭尽清辉发。
但见宵从海上来，宁知晓向云间没。
白兔捣药秋复春，嫦娥孤栖与谁邻？
今人不见古时月，今月曾经照古人。
古人今人若流水，共看明月皆如此。
唯愿当歌对酒时，月光长照金樽里。
青天有月来几时？我今停杯一问之。
人攀明月不可得，月行却与人相随。
皎如飞镜临丹阙，绿烟灭尽清辉发。
但见宵从海上来，宁知晓向云间没。
白兔捣药秋复春，嫦娥孤栖与谁邻？
今人不见古时月，今月曾经照古人。
古人今人若流水，共看明月皆如此。
唯愿当歌对酒时，月光长照金樽里。
</div>
<div class="right">
3青天有月来几时？我今停杯一问之。
人攀明月不可得，月行却与人相随。
皎如飞镜临丹阙，绿烟灭尽清辉发。
但见宵从海上来，宁知晓向云间没。
白兔捣药秋复春，嫦娥孤栖与谁邻？
今人不见古时月，今月曾经照古人。
古人今人若流水，共看明月皆如此。
唯愿当歌对酒时，月光长照金樽里。
青天有月来几时？我今停杯一问之。
人攀明月不可得，月行却与人相随。
皎如飞镜临丹阙，绿烟灭尽清辉发。
但见宵从海上来，宁知晓向云间没。
白兔捣药秋复春，嫦娥孤栖与谁邻？
今人不见古时月，今月曾经照古人。
古人今人若流水，共看明月皆如此。
唯愿当歌对酒时，月光长照金樽里。
</div>
</div>
</div>
</div>
</body>
</html>
