三欄佈局，面試與工做中的常見佈局。分左中右三部分，其中左右寬度已知，中間寬度自適應。
根據不一樣的DOM順序與CSS處理，這裏寫下了五類佈局方式。html
1、浮動佈局
1 聖盃佈局
L：「我問你，你就是個人Master嗎？」
……面試
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聖盃佈局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
padding:0px 200px;
overflow: hidden;
}
.left, .center, .right {
position:relative;
min-height:160px;
}
.left{
width:200px;
margin-left:-100%;
float:left;
left:-200px;
background-color:deepskyblue;
}
.center {
width:100%;
float:left;
background-color:gray;
}
.right {
width:200px;
margin-left:-100%;
float:right;
right:-200px;
background-color:pink;
}
</style>
</head>
<body>
<section class="content">
<div class="center">
<h1>聖盃佈局</h1>
</div>
<div class="left"></div>
<div class="right"></div>
</section>
</body>
</html>
2 雙飛翼佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雙飛翼佈局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
}
.left, .center, .right {
min-height:160px;
}
.left{
width:200px;
margin-left:-100%;
float:left;
background-color:deepskyblue;
}
.center {
width:100%;
float:left;
background-color:gray;
}
.right {
width:200px;
margin-left:-100%;
float:right;
background-color:pink;
}
.center-inner {
margin:0px 200px
}
</style>
</head>
<body>
<section class="content">
<div class="center">
<div class="center-inner">
<h1>雙飛翼佈局</h1>
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</section>
</body>
</html>
3 浮動佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Float佈局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.left,
.center,
.right {
min-height: 160px;
}
.left {
width: 200px;
float: left;
background-color: deepskyblue;
}
.center {
background-color: gray;
}
.right {
width: 200px;
float: right;
background-color: pink;
}
</style>
</head>
<body>
<section class="content">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>中間部分的內容</h1>
</div>
</section>
</body>
</html>
這樣會有個問題，就是center高度大於兩側的時候，會duang的蔓延到兩側，像這樣：
佈局
相應的，爲了讓頁面成爲咱們須要的樣子，引入了兩個解決方案。flex
BFC修正spa
L：「我問你，你這裏是否是有什麼問題？(指着腦殼)」
……
BFC(Block Fromatting Context),直譯就是塊級格式化上下文。
先知其然吧，概念差很少又須要整理一篇文章。用了它，內外部元素渲染互不影響，center就不會蔓延到兩側了。
具體代碼：code
.center{
overflow:hidden;
background-color: gray;
}
Margin修正htm
.center{
margin: 0 200px;
background-color: gray;
}
2、Flex佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flex佈局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
width:100%;
display:flex;
min-height:160px;
}
.left{
flex-basis: 200px;
background-color:deepskyblue;
}
.center {
flex-grow:1;
background-color:gray;
}
.right {
flex-basis: 200px;
background-color:pink;
}
</style>
</head>
<body>
<section class="content">
<div class="left"></div>
<div class="center">
<h1>Flex佈局</h1>
</div>
<div class="right"></div>
</section>
</body>
</html>
3、絕對定位佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>絕對定位佈局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
position:relative;
overflow: hidden;
}
.left, .center, .right {
min-height:160px;
}
.left{
position:absolute;
width:200px;
top:0px;
left:0px;
background-color:deepskyblue;
}
.center {
margin:0px 200px;
background-color:gray;
}
.right {
position:absolute;
width:200px;
top:0px;
right:0px;
background-color:pink;
}
</style>
</head>
<body>
<section class="content">
<div class="left"></div>
<div class="center">
<h1>絕對定位佈局</h1>
</div>
<div class="right"></div>
</section>
</body>
</html>
4、Table佈局
如今不多人用的table標籤blog
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table佈局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
width:100%;
}
.left{
width:200px;
background-color:deepskyblue;
}
.center {
background-color:gray;
}
.right {
width:200px;
background-color:pink;
}
</style>
</head>
<body>
<table class="content" border="0" cellspacing="0" cellpadding="0" height="160px">
<tr>
<td class="left"></td>
<td class="center">Table佈局</td>
<td class="right"></td>
</tr>
</table>
</body>
</html>
display:table-cell與上面一個意思圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table-cell</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
display:table;
width:100%;
height:160px;
}
.left, .center, .right {
display:table-cell;
}
.left{
width:200px;
background-color:deepskyblue;
}
.center {
background-color:gray;
}
.right {
width:200px;
background-color:pink;
}
</style>
</head>
<body>
<section class="content">
<div class="left"></div>
<div class="center">
<h1>table-cell</h1>
</div>
<div class="right"></div>
</section>
</body>
</html>
5、網格佈局
若是說flex用於一維，grid就是用於二維的。ci
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網格佈局</title>
<style>
html * {
margin: 0;
padding: 0;
}
.content {
display: grid;
width: 100%;
grid-template-rows: 160px;
grid-template-columns: 200px 1fr 200px;
}
.left{
background-color:deepskyblue;
}
.center {
background-color:gray;
}
.right {
background-color:pink;
}
</style>
</head>
<body>
<section class="content">
<div class="left"></div>
<div class="center">
<h1>網格佈局</h1>
</div>
<div class="right"></div>
</section>
</body>
</html>
好了，後續再來講一下各自的優缺點。
你一讚，我一讚，開開心心去吃飯~🖊💗