資訊專(zhuān)欄INFORMATION COLUMN
摘要：?jiǎn)栴}已知高度，寫(xiě)出三欄布局，其中左右兩欄寬度各位，中間自適應(yīng)回答效果示例解決方案浮動(dòng)絕對(duì)定位彈性布局表格布局網(wǎng)格布局。方案二絕對(duì)定位將和的都設(shè)置脫離文檔流，給的設(shè)置左右兩邊距離即左右兩邊盒子的實(shí)際寬度。
已知高度，寫(xiě)出三欄布局，其中左右兩欄寬度各位200px，中間自適應(yīng)
解決方案（1）浮動(dòng)；（2）絕對(duì)定位；（3）彈性布局；（4）表格布局；（5）網(wǎng)格布局。
拓展問(wèn)題：（1）每個(gè)解決方案的優(yōu)缺點(diǎn)
（2）他們之間的比較，假設(shè)高度去掉，那種方法還能適用或者不適用
（3）解決方案的兼容性，哪個(gè)更適用在實(shí)際項(xiàng)目中
（1）
A：缺點(diǎn)：浮動(dòng)脫離文檔流，所以使用的時(shí)候要清除浮動(dòng)；優(yōu)點(diǎn)：兼容性比較好
B：缺點(diǎn)：絕對(duì)定位布局脫離文檔，它的子元素也會(huì)脫離文檔流；優(yōu)點(diǎn)：使用快捷，不容易出現(xiàn)問(wèn)題，兼容性也比較好
C：彈性布局是為了解決上述問(wèn)題出現(xiàn)的，比較完美的一個(gè)
D：表格布局比較繁瑣，不利于SEO優(yōu)化；表格布局兼容性比較好，IE8不支持flex，但支持表格。當(dāng)其中的一個(gè)單元格超出的，兩側(cè)單元格也會(huì)同時(shí)增高，根據(jù)場(chǎng)景決定。
E：網(wǎng)格布局作為一個(gè)新技術(shù)，可以實(shí)現(xiàn)很多復(fù)雜的布局，代碼量簡(jiǎn)化很多。
（2）
flex布局和表格布局。浮動(dòng)布局因?yàn)樽髠?cè)有遮擋，所以沒(méi)有超出的文本會(huì)在中間出現(xiàn)，超出部分沒(méi)有遮擋會(huì)再左側(cè)出現(xiàn)。
| 三欄布局 | 兩欄布局 |
|---|---|
| 左右寬度固定，中間自適應(yīng) | 左寬度固定，右自適應(yīng) |
| 上下高度固定，中間自適應(yīng) | 右寬度固定，左自適應(yīng) |
| / | 上高度固定，下自適應(yīng) |
| / | 下高度固定，上自適應(yīng) |
設(shè)置大小盒子的高度為 100px，左右（left 和 right）的 div 寬度固定為 200px, 并分別給三個(gè)盒子設(shè)置不同顏色用來(lái)區(qū)分。
* {
padding: 0;
margin: 0;
}
.layout {
height: 100px;
margin-top: 20px;
margin-bottom: 20px;
overflow: hidden;
}
.layout div {
height: 100px;
}
.layout .left {
width: 200px;
background-color: blue;
}
.layout .center {
background-color: yellow;
}
.layout .right {
width: 200px;
background-color: red;
}
（1）方案一：浮動(dòng)
center 的 div 需要放到后面（其余方案都不需要更改 Html 順序），對(duì)左右 div 使用 float:left 和 float：right，float 使左右兩個(gè)元素脫離文檔流，中間的正常文檔流中。
.float .left {
float: left;
}
.float .right {
float: right;
}
（2）方案二：絕對(duì)定位
將 left、right 和 center 的 div 都設(shè)置 absolute 脫離文檔流，給 center 的 div 設(shè)置左右兩邊距離 200px (即左右兩邊盒子的實(shí)際寬度)。
.absolute div {
position: absolute;
}
.absolute .left {
left: 0;
}
.absolute .center {
left: 200px;
right: 200px;
}
.absolute .right {
right: 0;
}
（3）方案三：彈性布局
設(shè)置大盒子為 display: flex;，給 center 的 div 設(shè)置 flex: 1，除去左右盒子的寬度外剩余寬度是 center 的寬度。
.flexbox {
display: flex;
}
.center {
flex: 1;
}
（4）方案四：表格布局
設(shè)置大盒子為 display: table;，將 left、right 和 center 的 div 都設(shè)置 display: table-cell 。
.table {
width: 100%;
display: table;
}
.table div{
display: table-cell;
}
（5）方案五：網(wǎng)格布局
就給大盒子設(shè)置屬性。
.grid {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 200px auto 200px;
}
更多文章分享：https://www.artroy.com.cn/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/54200.html
摘要：假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄右欄各為，中間自適應(yīng)的五種方法頁(yè)面布局題目假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄右欄各為，中間自適應(yīng)浮動(dòng)解決方案浮動(dòng)解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄、右欄各為300px，中間自適應(yīng)的五種方法 HTML CSS 頁(yè)面布局 題目：假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄、右欄各為300px...
摘要：假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄右欄各為，中間自適應(yīng)的五種方法頁(yè)面布局題目假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄右欄各為，中間自適應(yīng)浮動(dòng)解決方案浮動(dòng)解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄、右欄各為300px，中間自適應(yīng)的五種方法 HTML CSS 頁(yè)面布局 題目：假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄、右欄各為300px...
摘要：題目假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄右欄寬度各為，中間自適應(yīng)三欄布局的種方案這是一道經(jīng)典的面試題，下面記錄了布局的種方法。 題目:假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄、右欄寬度各為300px，中間自適應(yīng). 三欄布局的5種方案 這是一道經(jīng)典的面試題，下面記錄了css布局的5種方法。 三欄布局 * { margin: 0; ...
閱讀 1594·2019-08-30 13:18
閱讀 1582·2019-08-29 12:19
閱讀 2121·2019-08-26 13:57
閱讀 4147·2019-08-26 13:22
閱讀 1190·2019-08-26 10:35
閱讀 2995·2019-08-23 18:09
閱讀 2508·2019-08-23 17:19
閱讀 685·2019-08-23 17:18
