前言
网页布局就是将网页根据不同的内容进行划分，这样做不仅可以美化网页外观，还可以让用户对你的网页功能一目了然，提升用户体验。
两列布局和三列布局是我们最常见的两种布局，我今天总结一下实现这两种布局的多种方式。本文代码没有考虑兼容性。
两列布局
侧栏宽度固定，左边内容部分宽度自适应。header和footer高度固定，具体如图：
利用浮动来布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
height: 100%;
}
#header,
#footer {
height: 50px;
background-color: burlywood;
text-align: center;
line-height: 50px;
}
#aside {
height: calc(100% - 100px);
width: 200px;
text-align: center;
background-color: aquamarine;
float: left;
}
#main {
height: calc(100% - 100px);
width: calc(100% - 200px);
background-color: #eee;
text-align: center;
overflow: hidden; //使其成为BFC，清除浮动，因为浮动也是一个BFC，两个BFC不会重叠
}
</style>
</head>
<body>
<div id="app">
<header id="header">header</header>
<aside id="aside">aside</aside>
<main id="main">main</main>
<footer id="footer">footer</footer>
</div>
</body>
</html>
利用绝对定位来布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
height: 100%;
}
#app {
position: relative;
}
#header,
#footer {
height: 50px;
background-color: burlywood;
text-align: center;
line-height: 50px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%
}
#aside {
/* height: calc(100% - 100px); */
width: 200px;
text-align: center;
background-color: aquamarine;
position: absolute;
left: 0;
bottom: 50px;
top: 50px;
}
#main {
/* height: calc(100% - 100px); */
width: calc(100% - 200px);
background-color: #eee;
text-align: center;
position: absolute;
right: 0;
bottom: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="app">
<header id="header">header</header>
<aside id="aside">aside</aside>
<main id="main">main</main>
<footer id="footer">footer</footer>
</div>
</body>
</html>
利用伸缩盒flex来布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
height: 100%;
}
#app {
display: flex;
flex-wrap: wrap;
}
#header,
#footer {
height: 50px;
background-color: burlywood;
text-align: center;
line-height: 50px;
flex-basis: 100%;
}
#aside {
width: 200px;
height: calc(100% - 100px);
text-align: center;
background-color: aquamarine;
}
#main {
height: calc(100% - 100px);
width: calc(100% - 200px);
background-color: #eee;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<header id="header">header</header>
<aside id="aside">aside</aside>
<main id="main">main</main>
<footer id="footer">footer</footer>
</div>
</body>
</html>
利用网格grid来布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
height: 100%;
}
#app {
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 50px auto 50px;
grid-template-areas: "header header" "aside main" "footer footer"
}
#header,
#footer {
background-color: burlywood;
text-align: center;
line-height: 50px;
}
#header {
grid-area: header;
}
#footer {
grid-area: footer
}
#aside {
grid-area: aside;
}
#main {
grid-area: main;
}
#aside {
text-align: center;
background-color: aquamarine;
}
#main {
background-color: #eee;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<header id="header">header</header>
<aside id="aside">aside</aside>
<main id="main">main</main>
<footer id="footer">footer</footer>
</div>
</body>
</html>
三列布局
两边侧栏宽度固定，中间内容部分宽度自适应。header和footer高度固定，具体如图：
利用浮动float来布局
float元素是有浮动范围的，在它的包含块中，如果它之前有内容，会阻止它向上浮动，因此在不要求content元素首先渲染的情况下我们才会用浮动布局，因为此时content元素必须位于浮动元素下方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
height: 100%;
}
#header,
#footer {
height: 50px;
background-color: burlywood;
text-align: center;
line-height: 50px;
}
#aside1,
#aside2 {
height: calc(100% - 100px);
width: 200px;
text-align: center;
background-color: aquamarine;
}
#aside1 {
float: left;
}
#aside2 {
float: right;
}
#main {
height: calc(100% - 100px);
background-color: #eee;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app">
<header id="header">header</header>
<aside id="aside1">aside</aside>
<aside id="aside2">aside</aside>
<main id="main">main</main>
<footer id="footer">footer</footer>
</div>
</body>
</html>
利用absolute定位来实现布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
height: 100%;
}
#app {
position: relative;
}
#header,
#footer {
height: 50px;
background-color: burlywood;
text-align: center;
line-height: 50px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%
}
#aside1,
#aside2 {
/* height: calc(100% - 100px); */
width: 200px;
text-align: center;
background-color: aquamarine;
}
#aside1 {
position: absolute;
left: 0;
bottom: 50px;
top: 50px;
}
#aside2 {
position: absolute;
right: 0;
bottom: 50px;
top: 50px;
}
#main {
/* height: calc(100% - 100px); */
width: calc(100% - 400px);
background-color: #eee;
text-align: center;
position: absolute;
right: 200px;
bottom: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="app">
<header id="header">header</header>
<main id="main">main</main>
<aside id="aside1">aside</aside>
<aside id="aside2">aside</aside>
<footer id="footer">footer</footer>
</div>
</body>
</html>
利用flex和grid布局
它们的布局方式与两列布局时的方式大同小异，这里就不多加阐述。
圣杯布局和双飞翼布局
我们来总结一下实际网页三列布局中会用的两种布局：圣杯布局和双飞翼布局，具体如图：
圣杯布局
为了中间content不被遮挡，为外层section设置了padding，使得边侧栏有地方放。且利用了margin为负对浮动元素的影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
height: 100%;
min-width: 600px
}
#header,
#footer {
height: 50px;
background-color: burlywood;
text-align: center;
line-height: 50px;
}
section {
padding: 0 200px;
height: calc(100% - 100px);
/* height: 100px; */
}
#main {
float: left;
background-color: #eee;
text-align: center;
height: 100%;
width: 100%;
}
#aside1,
#aside2 {
float: left;
width: 200px;
height: 100%;
background-color: aquamarine;
position: relative;
text-align: center;
}
#aside1 {
left: -200px;
margin-left: -100%;
}
#aside2 {
right: -200px;
margin-left: -200px;
}
</style>
</head>
<body>
<div id="app">
<header id="header">header</header>
<section id="section">
<main id="main">main</main>
<aside id="aside1">aside1</aside>
<aside id="aside2">aside2</aside>
</section>
<footer id="footer">footer</footer>
</div>
</body>
</html>
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
height: 100%;
}
#header,
#footer {
height: 50px;
background-color: burlywood;
text-align: center;
line-height: 50px;
}
section {
float: left;
height: calc(100% - 100px);
width: 100%;
/* height: 100px; */
}
#main {
background-color: #eee;
text-align: center;
height: 100%;
margin: 0 200px;
}
#aside1,
#aside2 {
float: left;
width: 200px;
height: calc(100% - 100px);
background-color: aquamarine;
text-align: center;
}
#aside1 {
margin-left: -100%;
}
#aside2 {
margin-left: -200px;
}
</style>
</head>
<body>
<div id="app">
<header id="header">header</header>
<section id="section">
<main id="main">main</main>
</section>
<aside id="aside1">aside1</aside>
<aside id="aside2">aside2</aside>
<p style="clear:both"></p>
<footer id="footer">footer</footer>
</div>
</body>
</html>