前言
網頁的布局有很多種，下面我來介紹一些常見的布局方式和小的Demo
單列布局
特征：中間盒子水平居中，寬度固定
- 一種是header、content、footer寬度都相同，其一般不會占滿瀏覽器的最寬寬度，但當瀏覽器寬度縮小低于其最大寬度時，寬度會自適應。
image.png
- 一種是header、footer寬度為瀏覽器寬度，但content以及header和footer里的內容卻不會占滿瀏覽器寬度。
image.png
二列布局
- 浮動布局 float + margin (流體布局)
左邊浮動，右邊margin-left，實現左邊固定，右邊自適應的布局
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
div{
height:100px;
}
.left {
border:1px red solid;
float:left;
background:grey;
width:200px
}
.right{
width:300px;
background:red;
border:1px black solid;
margin-left:200px
}
- 浮動 float + margin + (fix)
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="parent">
<div class="del left">
</div>
<div class="right-fix">
<div class="del right">
</div>
</div>
</div>
</body>
</html>
div .del{
width: 100px;
height:20px;
}
.left {
float: left;
background:red;
position: relative;
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}
.right {
background:grey;
margin-left: 120px;
}
通過在 right 上套上一層 right-fix，然后對 right-fix 設置浮動，然后提高 left 的層級設置定位屬性為 relative，可以解決 IE6 的兼容性問題
- 浮動 float + overflow (BFC布局)
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
</body>
</html>
.left {
border:1px red solid;
float: left;
width: 100px;
margin-right: 20px;
background:green;
}
.right{
border:1px red solid;
overflow: hidden;
background:grey;
}
三列布局 (傳統布局方法)
三列布局的特點就是 中間自適應，左右等寬
- float+margin 流體布局
<div id="content">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
.left {
float: left;
height: 200px;
width: 100px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
background-color: green;
}
缺點就是主要內容無法最先加載，當頁面內容較多時會影響用戶體驗。
- BFC 三欄布局
<div id="content">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
.left {
float: left;
height: 200px;
width: 100px;
margin-right: 20px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: 20px;
background-color: blue;
}
.main {
height: 200px;
overflow: hidden;
background-color: green;
}
主要內容模塊無法最先加載，當頁面中內容較多時會影響用戶體驗。
注意DOM文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列（圣杯布局和雙飛翼布局都會用到）。
這種布局方式比較簡單明了，但缺點是渲染時先渲染了側邊欄，而不是比較重要的主面板。
- 雙飛翼布局
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: green;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: blue;
}
先把main中的內容顯示，main 的margin-left和margin-right的寬度設置成下面兩個div的寬度，而之后兩個div的margin-left都取負值，左側的負100%，右側的負(寬度)
- 圣杯布局
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: red;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
background-color: green;
}
跟雙飛翼布局很像，有一些細節上的區別，相對于雙飛翼布局來說，HTML 結構相對簡單，但是樣式定義就稍微復雜，也是優先加載內容主體。
- 絕對定位布局
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.container {
position: relative;
}
.main {
height: 300px;
margin: 0 120px;
background-color: green;
}
.left {
position: absolute;
width: 100px;
height: 300px;
left: 0;
top: 0;
background-color: red;
}
.right {
position: absolute;
width: 100px;
height: 300px;
background-color: blue;
right: 0;
top: 0;
}
簡單實用，并且主要內容可以優先加載。
簡書 - 圣杯布局和雙飛翼布局（前端面試必看）
百度前端學院筆記 - 三欄式布局之雙飛翼與圣杯
居中布局
Centering in CSS: A Complete Guide
- 水平居中
- 行內元素(inline)：
text-align: center; - 塊級元素(block)：設置寬度且 marigin-left 和 margin-right是設成
auto。比如：margin:0 auto; - 多個塊級元素：對父元素設置
text-align: center;，對子元素設置display: inline-block;或者使用 flex 布局
- 垂直居中
- 行內元素(inline)
單行：設置上下pandding相等；或者設置line-height和height相等
# 第一種
.link{
padding-top: 30px;
padding-bottom: 30px;
}
# 第二種
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
多行：設置上下 pandding 相等；或者設置 display: table-cell; 和 vertical-align: middle; 或者使用 flex 布局；或者使用偽元素
- 塊級元素(block)：下面前兩種方案，父元素需使用相對布局
a. 已知高度：子元素使用絕對布局top: 50%;，再用負的margin-top把子元素往上拉一半的高度
b. 未知高度：子元素使用絕對布局position: absolute; top: 50%; transform: translateY(-50%);
c. 使用 Flexbox：選擇方向，justify-content: center;
- 水平垂直居中
- 定高定寬：先用絕對布局
top: 50%; left: 50%;，再用和寬高的一半相等的負 margin`把子元素回拉 - 高度和寬度未知：先用絕對布局
top: 50%; left: 50%;，再設置transform: translate(-50%, -50%); - 使用 Flexbox：
justify-content: center; align-items: center;
