假設(shè)高度已知，請寫出三欄布局洒闸，其中左欄染坯、右欄寬度各為300px；中間自適應(yīng)丘逸。
- 浮動
<section class="layout float">
<style media="screen">
* {
margin: 0;
padding: 0;
}
.left-center-right div {
min-height: 100px;
}
.left {
float: left;
background: red;
width: 300px;
}
.right {
float: right;
background: blue;
width: 300px;
}
.center {
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮動布局</h2>
1单鹿、浮動布局左右固定寬度，中間自適應(yīng)
2鸣个、浮動布局左右固定寬度，中間自適應(yīng)
</div>
</article>
</section>
- 絕對定位
<section class="layout position">
<style media="screen">
html * {
margin: 0;
padding: 0;
}
.left-center-right div {
position: absolute;
min-height: 100px;
}
.left {
left: 0;
width: 300px;
background: red;
}
.right {
right: 0;
width: 300px;
background: blue;
}
.center {
left: 300px;
right: 300px;
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>絕對定位</h2>
1布朦、定位布局左右固定寬度囤萤，中間自適應(yīng)
2、定位布局左右固定寬度是趴，中間自適應(yīng)
</div>
<div class="right"></div>
</article>
</section>
- flex布局
<section class="layout flex">
<style>
html * {
margin: 0;
padding: 0;
}
.left-center-right div{
min-height: 100px;
}
.left-center-right {
display: flex;
}
.left {
width: 300px;
background: red;
order: -1;
/* order屬性定義項目的排列順序 數(shù)值越小 排列越靠前 默認(rèn)為0 */
}
.center {
flex: 1;
background: yellow;
}
.right {
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="center">
<h2>flex布局</h2>
1涛舍、flex布局左右固定寬度，中間自適應(yīng)
2唆途、flex布局左右固定寬度富雅，中間自適應(yīng)
</div>
<div class="left"></div>
<div class="right"></div>
</article>
</section>
- 表格布局
<section class="layout table">
<style>
html * {
margin: 0;
padding: 0;
}
.left-center-right {
display: table;
width: 100%;
height: 100px;
}
.left-center-right div {
display: table-cell;
min-height: 100px;
}
.left {
background: red;
width: 300px;
}
.center {
background: yellow;
}
.right {
background: blue;
width: 300px;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>tabale布局</h2>
1、table布局左右固定寬度肛搬，中間自適應(yīng)
2没佑、table布局左右固定寬度，中間自適應(yīng)
</div>
<div class="right"></div>
</article>
</section>
- 網(wǎng)格布局
<section class="layout grid">
<style media="screen">
html * {
margin: 0;
padding: 0;
}
.left-center-right {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.left-center-right div {
min-height: 100px;
}
.left {
background: red;
}
.center {
background: yellow;
}
.right {
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
1温赔、網(wǎng)格布局左右固定寬度蛤奢，中間自適應(yīng)
2、網(wǎng)格布局左右固定寬度陶贼，中間自適應(yīng)
</div>
<div class="right"></div>
</article>
</section>
總結(jié)：
1啤贩、這五種解決方案各自的優(yōu)缺點
- 浮動：缺點是脫離文檔流的，需要做清浮動處理拜秧；優(yōu)點是兼容性很好痹屹。
- 絕對定位：缺點是布局脫離文檔流，子元素也必須脫離文檔流枉氮，可使用性比較差志衍。優(yōu)點是快捷暖庄，不容易出問題。
- flex布局：為解決以上兩種布局方式的不足而出現(xiàn)的足画，比較完美雄驹，目前移動端基本都屬于flex布局。
- 表格布局：缺點是操作繁瑣淹辞，對seo也不友好医舆，當(dāng)其中一個單元格的高度變大時，其他單元格的高度也會隨之變大象缀。優(yōu)點是兼容性非常好蔬将。
- 網(wǎng)格布局：缺點是新出的技術(shù)，低版本瀏覽器兼容性不是很好央星，優(yōu)點是可以做許多復(fù)雜的事情霞怀，但是代碼量要簡化的多。
2莉给、當(dāng)高度不定時毙石，兩側(cè)的高度也跟這中間的高度撐開，以上五種有哪幾種可以繼續(xù)用颓遏，哪幾種不能用了徐矩？
通過看效果：浮動和絕對定位是不能用的，flex布局叁幢、表格布局和網(wǎng)格布局可以繼續(xù)使用滤灯。
