整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
著網站建設技術在不斷的發展、從以前的table布局再到css布局，為什么css會取代table呢？可能大家心中一直有這個疑問，html的發展大家有目共睹、因為其跨平臺性的原因，深受開發人士的歡迎。
網站建設好之后，后期能不能利于維護是很多人考慮的一個核心問題。table開發者說過一句話，連他自己都覺得這種布局形式不好維護。而css3的出現解決了這方面的問題。我們要明白css3的幾個特點就是繼承性，擁有了繼承性，代碼就可以重用了。舉個簡單的例子：
我們要讓三組的文字的顏色都改成黃色。
html5+css3網頁代碼示例：
.linjun{
color：#ff0；
}
<h1>css變色</h1>
<h1>css的優點</h1>
<h1>css繼承性</h1>
table網頁代碼示例：
<table>
<tr>
<td><font color="#ff0">css變色</font></td>
</tr>
<tr>
<td><font color="#ff0">css的優點</font></td>
</tr>
<tr>
<td><font color="#ff0">css繼承性</font></td>
</tr>
</table>
可見只有三組的對比css只要幾行代碼就能解決這個問題了，而且這僅僅是頁面的一部分元素，如果元素比較多呢？table的代碼量就非常大了。所以css的優勢就來了。如果我要改變顏色的話，css只要在屬性值 改變下就好，而table就要修改的地方非常多。
css要明白優先級及盒子模型
css可以組成網頁的各式各樣的布局，那么如何實現的呢？就是根據網頁的盒子模型，如下圖所示：
css盒子包括了元素、padding（邊框離元素的距離）、margin（元素和元素之間的距離）。
css發展速度太快了，現在設置出來了sasa預處理語言，所以如果以前還在用table進行網站建設的朋友，趕緊學習css！
欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在開發十分常見，同時在前端面試中也是屬于必問的知識點，那么什么是三欄布局？比如打開京東的首頁：
映入眼簾的就是一個常見的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。下面圍繞的這樣的目的，即左右模塊固定寬度，中間模塊隨瀏覽器變化自適應，想要完成的最終效果如下圖所示：
紅色和藍色寬度固定，綠色寬度自適應，下面七種方法實現的最終效果跟這個差不多，可能會稍有不同。
1. 流體布局
左右模塊各自向左右浮動，并設置中間模塊的 margin 值使中間模塊寬度自適應。
缺點就是主要內容無法最先加載，當頁面內容較多時會影響用戶體驗。
2. BFC 三欄布局
BFC 規則有這樣的描述：BFC 區域，不會與浮動元素重疊。因此我們可以利用這一點來實現 3 列布局。
缺點跟方法一類似，主要內容模塊無法最先加載，當頁面中內容較多時會影響用戶體驗。因此為了解決這個問題，有了下面要介紹的布局方案雙飛翼布局。
3. 圣杯布局
相關解釋如下：
(1)中間部分需要根據瀏覽器寬度的變化而變化，所以要用100%，這里設左中右向左浮動，因為中間100%，左層和右層根本沒有位置上去
(2)把左層margin負100后，發現left上去了，因為負到出窗口沒位置了，只能往上挪
(3)按第二步這個方法，可以得出它只要挪動窗口寬度那么寬就能到最左邊了，利用負邊距，把左右欄定位
(4)但由于左右欄遮擋住了中間部分，于是采用相對定位方法，各自相對于自己把自己挪出去，得到最終結果
跟雙飛翼布局很像，有一些細節上的區別，相對于雙飛翼布局來說，HTML 結構相對簡單，但是樣式定義就稍微復雜，也是優先加載內容主體。
4. 雙飛翼布局
圣杯布局實際看起來是復雜的后期維護性也不是很高，在淘寶UED的探討下，出來了一種新的布局方式就是雙飛翼布局，代碼如上。增加多一個div就可以不用相對布局了，只用到了浮動和負邊距。和圣杯布局差異的地方已經被注釋。利用的是浮動元素 margin 負值的應用，感興趣的同學可以上網搜搜原理。
主體內容可以優先加載，HTML 代碼結構稍微復雜點。
5. Flex 布局
簡單實用，未來的趨勢，需要考慮瀏覽器的兼容性
6. Table 布局
缺點：無法設置欄間距
7. 絕對定位布局
使用absolute定位，只需將左右兩欄絕對定位到窗口兩邊，為main添加左右margin創建安全輸入區域即可。因為absolute是以第一個定位不是static的父元素定位的，為這個整體添加一個定位不是static的父元素，絕對定位不會與header，footer等重疊。并且main的dom位置在left和right的前面，可在左右兩欄之前完成加載
簡單實用，并且主要內容可以優先加載。
前端要知道的網絡知識一：TCP/IP 協議到底在講什么
前端要知道的網絡知識二：TCP協議的三次握手和四次分手
前端要知道的網絡知識三：認識OSI七層模型
前端要知道的網絡知識四：TCP的概念和HTTP連接管理
前端要知道的網絡知識五：詳細的介紹web緩存
前端要知道的網絡知識六：詳細介紹URL及其用法
前端要知道的網絡知識七：初識HTTP報文
前端要知道的網絡知識八：GET 和 POST 到底有什么區別
前端要知道的網絡知識九：初識HTTPS加密過程，原來如此
前端要知道的網絡知識十：HTTPS加密核心RSA算法
....
參考文章
https://www.cnblogs.com/chenyablog/p/7918807.html
https://zhuanlan.zhihu.com/p/24305930
https://zhuanlan.zhihu.com/p/25070186
文由云+社區發表
作者：前端林子
本文會分別介紹三種CSS實現三欄布局的方法，可在瀏覽器中打開查看效果
1.方法一：自身浮動的方法
實現方法：需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS實現三欄布局1</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.left{
width:200px;
height: 300px;
background-color: #DC698A;
?
float:left;
?
}
.middle{
/*width:100%;*/
/*中間欄不要設寬度，包括100%*/
height: 300px;
background-color: #8CB08B;
?
margin:0 200px;
}
.right{
width: 200px;
height: 300px;
background-color: #3EACDD;
?
float: right;
}
</style>
</head>
<body>
<!-- 左欄左浮右欄右浮，中間不設寬度用左右margin值撐開距離，且布局中中間欄放最后 -->
<!-- 中間欄實際寬度是當前屏的100% -->
<div class="left">左欄</div>
<div class="right">右欄</div>
<div class="middle">中間欄</div>
</body>
</html>
注意：該方法在html布局時，要把中間欄放在左欄、右欄后面，左欄和右欄的順序不定
實現的效果如下：
自身浮動實現三欄布局
2.方法二：margin負值法
實現方法：兩邊兩欄寬度固定，中間欄寬度自適應，左欄、右欄、中間欄向左浮動，左欄的margin-left設為-100%，中間欄的width設為100%，右欄的margin-left設為-右欄寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS實現三欄布局2</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
.left{
width:200px;
height: 300px;
background-color: #DC698A;
?
float:left;
margin-left:-100%;
}
.middle{
width:100%;
height: 300px;
background-color: #8CB08B;
?
float:left;
}
.right{
width:200px;
height: 300px;
background-color: #3EACDD;
?
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<!-- 左欄中間欄右欄左浮，左欄margin-left：-100%，中間欄寬100%,，右欄margin-left:-右欄寬度
且布局上必須中間欄放第一個-->
<div class="middle">中間欄</div>
<div class="left">左欄</div>
<div class="right">右欄</div>
</body>
</html>
注意：該方法在html布局時，要把中間欄放在第一個
此方法是實現圣杯布局和雙飛翼布局的基礎。
實現的效果如下：
margin負值法實現三欄布局
3.方法三：絕對定位法
實現方法：左欄、右欄絕對定位，分別固定到頁面左右兩側，中間欄不設寬度，用左右margin來撐開距離
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS實現三欄布局3</title>
<style type="text/css">
body{
margin:0;
padding: 0;
}
.left{
width:200px;
height: 300px;
background-color: #DC698A;
?
position: absolute;
left:0;
top:0;
}
.middle{
/*width: 100%;*/
height: 300px;
background-color: #8CB08B;
margin:0 200px;
}
.right{
width:200px;
height: 300px;
background-color: #3EACDD;
?
position: absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<!-- 左右兩欄絕對定位，分別固定到頁面的左右兩側，中間欄不設寬度，用左右margin撐開距離 -->
<!-- 中間欄的實際寬度是當前屏的100% -->
<div class="left">左欄</div>
<div class="middle">中間欄</div>
<div class="right">右欄</div>
</body>
</html>
實現的效果如下：
此文已由騰訊云+社區在各渠道發布
獲取更多新鮮技術干貨，可以關注我們騰訊云技術社區-云加社區官方號及知乎機構號
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
