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