一、行布局
经典的行布局，页面结构是头、主体内容、尾一行行排列。常应用于网站的首页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.header,
.main,
.footer {
/*居中*/
margin: 0 auto;
/*宽度自适应*/
width: 80%;
min-width: 1200px;
text-align: center;
color: #fff;
}
.header {
position: fixed;
/*头部固定*/
right: 0;
left: 0;
height: 60px;
line-height: 60px;
background-color: rgb(185, 143, 224);
z-index: 1;
}
.main {
position: relative;
top: 60px;
padding-top: 60px;
height: 600px;
line-height: 600px;
background-color: rgb(210, 155, 185);
}
.footer {
position: relative;
height: 100px;
line-height: 100px;
background-color: rgb(151, 201, 184);
}
</style>
</head>
<body>
<header class="header">Header</header>
<main class="main">Main</main>
<footer class="footer">Footer</footer>
</body>
</html>
<script>
</script>
当鼠标往下滑的时候，header固定
二、列布局
经典的列布局，页面结构按列划分排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left,
.main,
.right {
text-align: center;
}
.left {
float: left;
width: 20%;
height: 500px;
background-color: aquamarine;
}
.main {
float: left;
width: 60%;
height: 500px;
background-color: blueviolet;
}
.right {
float: right;
width: 20%;
height: 500px;
background-color: pink;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</body>
</html>
<script>
</script>
三、两栏布局
（1）浮动实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer {
height: 100px;
text-align: center;
}
.left {
/*左边宽度200px，设置浮动*/
float: left;
height: 100px;
width: 200px;
background-color: aquamarine;
}
.right {
height: 100px;
width: auto;
margin-left: 200px;
/*右边margin-left设置200px，宽度auto，默认占满整个父元素*/
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
<script>
</script>
（2）flex实现
- 方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer {
display: flex;
height: 100px;
text-align: center;
}
.left {
flex-shrink: 0;
/*定义项目缩放比例*/
flex-grow: 0;
/*如果存在剩余空间，也不放大*/
flex-basis: 200px;
/*定义了在分配多余空间之前，项目占据的主轴空间*/
background-color: aquamarine;
}
/**
**左边元素的放大和缩小设置为0，基础大小为200px。右边元素的放大和缩小比例设置为1，基础大小为auto
**/
.right {
flex: auto;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
<script>
</script>
- 方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer {
display: flex;
height: 100px;
text-align: center;
}
.left {
background-color: aquamarine;
width: 200px;
}
.right {
flex: 1;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
<script>
</script>
（3）绝对定位实现
- 方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer {
position: relative;
text-align: center;
/*父元素相对定位*/
height: 100px;
}
.left {
position: absolute;
/*左边元素相对定位*/
width: 200px;
/*宽度设置200px*/
height: 100px;
background-color: aquamarine;
}
.right {
margin-left: 200px;
/*右边元素margin-left值200px*/
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
<script>
</script>
- 方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer {
position: relative;
text-align: center;
/*父元素相对定位*/
height: 100px;
}
.left {
width: 200px;
height: 100px;
background-color: aquamarine;
}
.right {
/*右边元素绝对定位*/
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 200px;
/*左边定位200px 其余为0*/
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
<script>
</script>
（4）table布局实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer {
display: table;
width: 1200px;
text-align: center;
}
.left {
display: table-cell;
width: 200px;
height: 200px;
background-color: aquamarine;
}
.right {
display: table-cell;
height: 200px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
<script>
</script>
四、三栏布局
（1）浮动实现
- 方法一
容易踩坑的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer {
text-align: center;
}
.outer>div {
min-height: 100px;
}
.left {
float: left;
width: 100px;
background-color: aquamarine;
}
.middle {
background-color: blueviolet;
}
.right {
float: right;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
</html>
<script>
</script>
解析：right被顶下去下一行，为什么呢？这种布局方式是利用浮动脱离文档流实现，按照正常的逻辑left、middle、right布局，中间元素形成定位，right顶下去，无法实现三栏布局。需要特别注意！left和right都需要在middle前布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer {
text-align: center;
}
.outer>div {
min-height: 100px;
}
.left {
float: left;
width: 100px;
background-color: aquamarine;
}
.middle {
background-color: blueviolet;
}
.right {
float: right;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</div>
</body>
</html>
<script>
</script>
- 方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer>div {
min-height: 100px;
text-align: center;
position: relative;
}
.left {
float: left;
width: 300px;
background-color: aquamarine;
z-index: 9999;
}
.middle {
float: left;
width: 300px;
margin-left: -300px;
padding: 0 300px;
background-color: blueviolet;
}
.right {
float: left;
width: 300px;
margin-left: -300px;
background-color: pink;
z-index: 1;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
</html>
<script>
</script>
（2）绝对定位实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer {
position: relative;
text-align: center;
}
.outer>div {
min-height: 100px;
position: absolute;
}
.left {
left: 0px;
width: 100px;
background-color: aquamarine;
}
.middle {
left: 100px;
right: 100px;
background-color: blueviolet;
}
.right {
right: 0;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
</html>
<script>
</script>
（3）flex实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer {
display: flex;
text-align: center;
}
.outer>div {
min-height: 100px;
}
.left {
width: 100px;
background-color: aquamarine;
}
.middle {
flex: 1;
background-color: blueviolet;
}
.right {
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
</html>
<script>
</script>
（4）table实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer {
display: table;
width: 100%;
min-height: 100px;
text-align: center;
}
.outer>div {
display: table-cell;
}
.left {
width: 100px;
background-color: aquamarine;
}
.middle {
background-color: blueviolet;
}
.right {
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
</html>
<script>
</script>
（5）grid实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer {
display: grid;
text-align: center;
grid-template-columns: 100px 1fr 100px;
}
.outer>div {
min-height: 100px;
}
.left {
background-color: aquamarine;
}
.middle {
background-color: blueviolet;
}
.right {
background-color: pink;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
</html>
<script>
</script>
