一、Float佈局
佈局分析:
| 佈局方案 |
實現 |
優點 |
缺點 |
| Float佈局 |
左右中三列，左列左浮動，右列右浮動，中間列設置左右margin |
比較簡單，兼容性也比較好 |
浮動元素脫離文檔流，使用的時候只需要注意一定要清除浮動。 |
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<!-- 右欄部分要寫在中間內容之前 -->
<div class="right">Right</div>
<div class="main">Main</div>
</div>
</body>
</html>
<style>
body,
html,
.container {
height: 100%;
padding: 0;
margin: 0;
}
.left {
float: left;
height: 100%;
width: 200px;
background: pink;
}
.main {
height: 100%;
margin: 0 200px;
background: skyblue;
}
.right {
float: right;
height: 100%;
width: 200px;
background: pink;
}
</style>
二、Position佈局
佈局分析:
| 佈局方案 |
實現 |
優點 |
缺點 |
| Position佈局 |
左中右三列（無順序），根據定位屬性去直接設置各個子元素位置 |
快捷，設置很方便 |
元素脫離了文檔流，後代元素也脫離了文檔流，高度未知的時候，會有問題，有效性和可使用性比較差 |
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
</html>
<style>
body,
html,
.container {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.left,
.right {
position: absolute;
height: 100%;
top: 0;
background: pink;
}
.left {
left: 0;
width: 200px;
}
.right {
right: 0;
width: 200px;
}
.main {
height: 100%;
margin: 0 200px;
background: skyblue;
}
</style>
三、Table佈局
佈局分析:
| 佈局方案 |
實現 |
優點 |
缺點 |
| Table佈局 |
左中右三列，父元素display: table;子元素display: table-cell;居中子元素不設寬度 |
使用起來方便,兼容性也不存在問題 |
①無法設置欄邊距；②對seo不友好；③當其中一個單元格高度超出的時候，兩側的單元格也是會跟着一起變高的 |
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
</html>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
display: table;
width: 100%;
}
.container>div {
display: table-cell;
}
.left {
width: 200px;
background: pink;
height: 400px;
}
.main {
background: skyblue;
}
.right {
width: 200px;
background: pink;
}
</style>
四、Flex佈局
佈局分析:
| 佈局方案 |
實現 |
優點 |
缺點 |
| Flex佈局 |
左中右三列，父元素display: flex;兩側元素設寬；居中子元素flex: 1; |
比較完美 |
存在IE上兼容性問題，只能支持到IE9以上 |
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
</html>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
display: flex;
height: 100%;
}
.left {
width: 200px;
background: pink;
}
.main {
flex: 1;
background: skyblue;
}
.right {
width: 200px;
background: pink;
}
</style>
五、Grid佈局
佈局分析:
| 佈局方案 |
實現 |
優點 |
缺點 |
| Grid佈局 |
左中右三列，父元素display: grid;利用網格實現 |
最強大和最簡單 |
兼容性不好，IE10+上支持，而且也僅支持部分屬性 |
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
</html>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 200px auto 200px;
}
.left {
background: pink;
}
.main {
background: skyblue;
}
.right {
background: pink;
}
</style>
