面試官問：你有多少種方式實現三欄佈局？
1、什麼是三欄佈局
三欄佈局即左右元素固定寬度，中間元素自適應。表明佈局有聖盃佈局和雙飛翼佈局，固然還有其餘方式能夠實現，下面是詳細介紹。css
2、實現方式
1.自身浮動
元素順序：中間盒子必須放在最後，左右元素任意排列
原理：左邊元素左浮動 右邊元素右浮動
缺點：當瀏覽器寬度不足以容納三個元素時，中間元素不消失，最右側的元素會被擠到第二排。浮動對後續元素影響較大（使用時必定要清除浮動）html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
height: 600px;
width: 100%;
}
.left{
width: 160px;
height: 100px;
background-color: #000;
float: left;
}
.right{
width: 480px;
height: 100px;
background-color: red;
float: right;
}
.middle{
width: 100%;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
</body>
</html>
2.絕對定位
元素順序：任意擺放便可
原理：將左右兩邊使用absolute定位，中間元素使用margin預留左右元素的寬度
缺點：當瀏覽器頁面不足以容納三個元素時，中間元素會寬度減少（最小到0），右側元素會覆蓋到左側元素上。兩側高度沒法支撐總高度面試
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
height: 600px;
width: 100%;
position: relative;
margin: 0;
}
.left{
width: 260px;
height: 100px;
background-color: #000;
position: absolute;
top: 0;
left: 0;
}
.right{
width: 280px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
right: 0;
}
.middle{
height: 100px;
background-color: blue;
margin: 0 280px 0 260px;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
</body>
</html>
3.函數計算
元素順序：無要求
原理：使用calc函數，計算父元素的寬度減去左右元素的寬度
缺點：存在兼容性問題，須要IE9+才能夠正常使用。元素採用了浮動，對後續元素有影響瀏覽器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
overflow: hidden;
}
.left,.right{
float: left;
height: 100px;
width: 100px;
background:red;
}
.center{
float: left;
height: 100px;
width:calc(100% - 200px);
background:yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
4.表格佈局
元素順序：中間元素必須在兩個div之間
原理：父元素設置display:table,子元素設置display:table-cell
缺點：兼容性IE8+，不利於SEO函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>表格佈局</title>
<style>
*{
margin:0;
padding:0;
}
.main{
width:100%;
display:table;
}
.main> div{
height:200px;
display:table-cell;
}
.left{
width:100px;
background-color: black;
}
.middle{
background-color:red;
}
.right{
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
5.聖盃佈局（重點，面試常問）
元素順序：中間元素位於開頭，左右元素無要求
原理：父元素使用padding預留左右元素的位置，三個元素浮動，左元素使用margin負值和相對定位調整位置，右元素用margin負值調整位置
缺點：中間部分寬度小於左側時，佈局混亂佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main {
height: 600px;
padding: 0 100px;/* 左右元素的寬度決定 */
}
.middle {
width: 100%;
height: 100px;
background-color: blue;
float: left;
}
.left{
width: 100px;
height: 100px;
background-color: #000;
margin-left: -100%;
position: relative;
float: left;
right: 100px;/* 自身寬度 */
}
.right {
width: 100px;
height: 100px;
background-color: red;
margin-right: -100px;/* 自身寬度 */
float: left;
}
</style>
</head>
<body>
<div class="main">
<div class="middle">main</div>
<div class="left">left</div>
<dvi class="right">right</div>
</div>
</body>
</html>
6.雙飛翼佈局（重點，面試常問）
元素順序：中間元素位於開頭，左右元素無要求
原理：在中間元素內部建立子元素，子元素設置margin（值是左右元素的寬），用來預留左右元素的位置。左中右元素都設置浮動，左右元素設置margin負值
缺點：增長了DOM節點，加大了渲染樹生成的計算量flex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雙飛翼佈局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.col{
float: left;
}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px;/*這是聖盃和雙飛翼最明顯的區別，在main內部使用的是margin，而聖盃是直接在container部分使用padding*/
}
#left{
width: 190px;
height: 200px;
margin-left: -100%;
background-color: #0000FF;
}
#right {
width: 190px;
height: 200px;
margin-left: -190px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div id="container">
<div id="main" class="col">
<div id="main-wrap"> #main </div>
</div>
<div id="left" class="col">#left</div>
<div id="right" class="col">#right</div>
</div>
</body>
</html>
7.flex佈局（重點，面試常問）
元素順序：無要求
原理：父元素設置flex，中心元素設置flex:1
缺點：flex有兼容性問題，IE11+支持較好spa
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width:100%;
height:100px;
display:flex;
}
#left,#right{
width:200px;
height:100px;
background-color:blue;
}
#center{
flex:1;
height:100px;
background-color:#f00;
}
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</body>
</html>
8.網格佈局
元素順序：中間元素必須在兩個div之間
原理：父元素設置display:grid,使用grid-template-rows定義行高，使用grid-template-columns定義列寬便可
缺點：兼容性IE10+htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>表格佈局</title>
<style>
*{
margin:0;
padding:0;
}
.main{
width:100%;
display:grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.left{
background-color: black;
}
.middle{
background-color:red;
}
.right{
background-color: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
3、總結
上面一共列舉了8中方式去實現三欄佈局，也列出了他們各自的缺點，效果圖我就不放了，cv代碼本身運行一下就能夠了。博主我的以爲，若是在不考慮兼容性的狀況下，確定選擇後四種是比較好的，固然還可能有其餘實現方法，歡迎你們評論、留言blog
ps：面試可能會問你若是中間元素須要優先加載，最好是選擇方式五、六、7。由於他們的中間元素都是在左右元素的前面的
相關文章
- 1. 面試官：請實現三欄佈局，儘量多的方式。
- 2. 實現三欄佈局5種方式
- 3. 面試官三連問：分佈式鎖你知道多少？
- 4. 三欄佈局的多種實現
- 5. 五種方法實現三欄佈局
- 6. 兩欄佈局（兩種方式實現）
- 7. 面試常問的CSS三欄佈局 五種佈局總結
- 8. 三欄式佈局的幾種實現方式
- 9. 佈局：三欄佈局（7種方法）
- 10. 三欄佈局的幾種方式
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • 再有人問你分佈式事務，把這篇扔給他
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 面試官：請實現三欄佈局，儘量多的方式。
- 2. 實現三欄佈局5種方式
- 3. 面試官三連問：分佈式鎖你知道多少？
- 4. 三欄佈局的多種實現
- 5. 五種方法實現三欄佈局
- 6. 兩欄佈局（兩種方式實現）
- 7. 面試常問的CSS三欄佈局 五種佈局總結
- 8. 三欄式佈局的幾種實現方式
- 9. 佈局：三欄佈局（7種方法）
- 10. 三欄佈局的幾種方式