前言
網頁的布局有很多種,下面我來介紹一些常見的布局方式和小的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;