圣杯布局：
- 是以两边宽度固定，中间宽度自适应的布局；需要设置一个body的最小宽度，这样在你缩小页面的时候就不会乱了，这个min-width是left-width * 2 + right-width；
- 首先得是将三栏放在一个div(container)中，能够通过overflow：hiden清除浮动，使之成为一个BFC块级，然后能够不影响其他的布局，相当于是将三栏都处于浮动状态；
- 设置中间三栏向左浮动，且设置中间center的宽度为100%，能够自使用收缩；
- 需要设置padding和position，防止其文字遮拦；
- 代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局2</title> </head> <style> * { padding: 0; margin: 0; } body { min-width: 600px; } header, footer { text-align: center; width: 100%; background-color: #fbd1d5; padding: 20px 0; } .container { padding: 0 200px 0 200px; overflow: hidden; text-align: center; } .center { width: 100%; height: 200px; float: left; background-color: #9da4ff; } .left { position: relative; margin-left: -100%; float: left; width: 200px; height: 200px; background-color: #f0e6c5; left: -200px; } .right { position: relative; margin-left: -200px; left: 200px; float: left; width: 200px; height: 200px; background-color: #f0e6c5; } </style> <body> <header>圣杯布局</header> <div class="container"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div> </div> <footer>footer</footer> </body> </html>双飞翼布局：
![双飞翼布局]()
- 同样是中间的宽度是自适应的，然后两边的宽度是固定的，和圣杯布局的不同是，双飞翼布局是中间的自适应的那一栏是有div包裹的，通过margin来给left和right腾出位置；
- 首先需要先将body能够设置最小的宽度，这样才不会出现位置的混乱。
- 代码如下：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style> * { padding: 0; margin: 0; } body { font-weight: bold; font-family: "Comic Sans MS"; min-width: 600px; } header, footer { text-align: center; width: 100%; background-color: #fbd1d5; padding: 20px 0; } .container { text-align: center; overflow: hidden; } .container > div { position: relative; float: left; height: 200px; } .center { width: 100%; background-color: cornflowerblue; } .main { height: 100%; margin: 0 200px; background-color: #f0e6c5; } .left { background-color: #f0a553; width: 200px; margin-left: -100%; } .right { background-color: #f0a553; width: 200px; margin-left: -200px; } </style> </head> <body> <header>双飞翼布局</header> <div class="container"> <div class="center"> <div class="main"> center </div> </div> <div class="left"> left </div> <div class="right"> right </div> </div> <footer>footer</footer> </body> </html>
Flex布局 ：
- 同样是中间自适应，两边的宽度是固定的，不过这个相对于前面的几种简单了很多；
![Flex布局]()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三栏布局-flex</title> <style> * { padding: 0; margin: 0; } body { font-weight: bold; font-family: "Comic Sans MS"; min-width: 600px; } header, footer { text-align: center; width: 100%; background-color: #fbd1d5; padding: 20px 0; } .container{ display: flex; } .center{ width: 100%; background-color: #d5f0d5; order: 2; height: 200px; } .left{ width: 200px; order: 1;/*顺序，从小到大的缩放*/ flex-shrink: 0; height: 200px; background-color: #f0a553; } .right{ height: 200px; flex-shrink: 0;/*允许缩放，是否存在空间不足的缩放*/ width: 200px; order: 3; background-color: #f0a553; } </style> </head> <body> <header>Flex布局</header> <div class="container"> <div class="center"> center </div> <div class="left"> left </div> <div class="right"> right </div> </div> <footer>Footer</footer> </body> </html>
table-cell布局
- 是通过设置父级元素display：table-cell,这样可以保持高度是一致的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table-cell布局</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-weight: bold;
font-family: "Comic Sans MS";
min-width: 600px;
}
header, footer {
text-align: center;
width: 100%;
background-color: #fbd1d5;
padding: 20px 0;
}
.container {
overflow: hidden;
position: relative;
}
.container > div {
display: table-cell;
min-height: 300px;
height: 200px;
}
.center {
width: 100%;
background-color: #d5f0d5;
}
.left {
min-width: 200px;
width: 200px;
background-color: #f0f0ab;
}
.right {
width: 200px;
min-width: 200px;
background-color: #f0f0ab;
}
</style>
</head>
<body>
<header>Flex布局</header>
<div class="container">
<div class="left">
left
</div>
<!--需要注意的是，用到table-cell布局，需要将center放中间，按照顺序放置-->
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
<footer>Footer</footer>
</body>
</html>
绝对定位布局
让left和right分别向左和向右浮动，设置position为relative；同时设置center为position为absolute；这个的缺点是会使center的高度会随left和right控制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-weight: bold;
font-family: "Comic Sans MS";
min-width: 600px;
}
header, footer {
text-align: center;
width: 100%;
background-color: #fbd1d5;
padding: 20px 0;
}
.container {
overflow: hidden;
position: relative;
}
.center {
position: absolute;
left: 200px;
right: 200px;
width: 100%;
top: 0;
bottom: 0;
background-color: #d5f0d5;
}
.left {
height: 300px;
position: relative;
float: left;
width: 200px;
background-color: #f0f0ab;
}
.right {
height: 300px;
position: relative;
width: 200px;
float: right;
background-color: #f0f0ab;
}
</style>
</head>
<body>
<header>Flex布局</header>
<div class="container">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
<footer>Footer</footer>
</body>
</html>