三欄布局：兩側寬度固定，中間寬度自適應的
三欄布局
公共樣式
* {
padding: 0;
margin: 0;
height: 100%;
}
.left {
width: 200px;
background-color: aqua;
}
.right {
width: 200px;
background-color: burlywood;
}
.main {
background-color: chartreuse;
}
1. 浮動布局
左右模塊各自向左右浮動掉奄，并設置中間模塊的 margin 值使中間模塊寬度自適應
- 優(yōu)點：簡單易懂
- 缺點：主要內(nèi)容無法最先加載啃奴，當頁面內(nèi)容較多時會影響用戶體驗
<body>
<style>
.left {
float: left;
}
.right {
float: right;
}
.main {
margin: 0 200px;
}
</style>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="main">Main</div>
</body>
2. 定位布局
- 優(yōu)點：簡單易懂，并且主要內(nèi)容可以優(yōu)先加載
- 缺點：容器脫離了文檔流，高度未知的時候捞附，會有問題
<body>
<style>
.left,
.right {
position: absolute;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.main {
margin: 0 200px;
}
</style>
<!-- 可以把Main提前纠修，使主要內(nèi)容可以優(yōu)先加載 -->
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</body>
3. flex布局
- 優(yōu)點：簡單實用胳嘲，未來的趨勢
- 缺點：需要考慮瀏覽器的兼容性
<body>
<style>
.container {
display: flex;
}
.main {
flex: 1;
/* flex: 1 1 auto; */
}
</style>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
4. 表格布局
- 優(yōu)點：兼容性很好，當內(nèi)容溢出時會自動撐開父元素
- 缺點：seo不友好
<body>
<style>
.container {
display: table;
width: 100%;
}
.container>div {
display: table-cell;
}
</style>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
5. 網(wǎng)格布局
- 優(yōu)點：CSS新標準扣草，創(chuàng)建網(wǎng)格布局最強大和最簡單的工具了牛，可以將頁面分成具有簡單屬性的行和列
- 缺點：有兼容性問題
<body>
<style>
.container {
display: grid;
width: 100%;
grid-template-columns: 200px auto 200px;
}
</style>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
</body>
6. calc函數(shù)布局
- 優(yōu)點：計算出main的寬度，簡單粗暴
- 缺點：css3屬性有兼容性問題
- 注意：calc() 的使用注意點： 運算符前后都需要保留一個空格
width: calc(100%-400px);這樣“-”號后面沒有空格是錯誤的
<style>
.container {
width: 100%;
}
.container>div {
float: left;
}
.main {
width: calc(100% - 400px);
}
</style>
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
7. 圣杯布局
利用的是浮動元素 margin 負值的應用
- 優(yōu)點：主體內(nèi)容可以優(yōu)先加載
- 缺點：CSS理解起來難一點
<body>
<style>
body {
margin: 0 200px;
}
div {
float: left;
}
.left {
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
margin-right: -200px;
}
.main {
width: 100%;
}
</style>
<!-- 注意順序 -->
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</body>
8. 雙飛翼布局
與圣杯布局很像辰妙，但多了一層div嵌套
- 優(yōu)點：主體內(nèi)容可以優(yōu)先加載
- 缺點：HTML 代碼結構稍微復雜點鹰祸。
<body>
<style>
body>div {
float: left;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
.main {
width: 100%;
}
.inner {
margin: 0 200px;
}
</style>
<div class="main">
<div class="inner">
Main
</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</body>
