css雖簡單,但細(xì)節(jié)多,技巧性高,易學(xué)難精。

如何實(shí)現(xiàn)左右固定300px , 中間寬度自適應(yīng)？

有如下結(jié)構(gòu)

左

右

中

公有樣式, 設(shè)置高,設(shè)置左右寬度固定300px,左右為紅色，中間為黃色。

.item {

height: 400px;

}

.left,

.right {

width: 300px;

background: #f00;

}

.center {

background: yellow;

}

一. 雙浮動法

.left {

float: left;

}

.right {

float: right;

}

原理：?float不會完全脫離文檔流,會占用原空間

MDN官方解釋:該元素從網(wǎng)頁的正常流動(文檔流)中移除，盡管仍然保持部分的流動性(與絕對定位相反)。

問： 為什么?center?要放在leftr和right之后?

答：

瀏覽器加載頁面順序是從上到下,

left已經(jīng)左浮動,right右浮動。渲染center時(shí)，瀏覽器忽略掉已經(jīng)脫離文檔流的left和right?,center元素會從頭占滿整行,但發(fā)現(xiàn)left還占用著300px?,右邊right又占用了300px,所以center的寬度在left和right之間,達(dá)到寬度自適應(yīng)

二. 絕對定位法

左

中

右

原理： 左右絕對定位,脫離文檔流 。 中間不設(shè)置寬度,只設(shè)置左右邊距，自動撐滿塊級元素一行的剩余空間

三. 彈性盒子

.wrapper?{

display:?flex;

}

.center?{

flex:?1;

}

父容器設(shè)置 display:?flex，左右設(shè)置300px, center把flex設(shè)置為1 ，效果是否實(shí)現(xiàn)了呢?

瀏覽器運(yùn)行，看上去是對的 ，但實(shí)際上屏幕縮小后左右不是固定的300px，寬度會被壓縮。

還需要再添加如下樣式：

.left,.right?{

flex-shrink:?0; /*等同flex:0 0 auto */

}

原理：flex:1 實(shí)際上是三個(gè)屬性的簡寫 , flex:1; 等同于 flex:1 1 auto;。

簡單的說，分別代表：剩余空間 容器縮小時(shí)壓縮比例 最小寬度。具體細(xì)節(jié)參考：MDN -- 彈性盒子

由此得知，center設(shè)置flex：1; ，即為flex:1 1 auto; (自動占滿容器剩余寬度 默認(rèn)壓縮比例 默認(rèn)最小寬度)

left和right設(shè)置 ?flex-shrink:?0;,flex-shrink就是flex簡寫中的第二個(gè)屬性, 等同 flex:0 0 auto; (沒有設(shè)置自動占滿容器剩余寬度 0不壓縮 最小寬度默認(rèn)auto)

問: 為什么left和right設(shè)置flex-shrink:?0;等同flex:0 0 auto,其中最小寬度為auto,但是寬度依舊固定為300px?

答: 最小寬度為auto是默認(rèn)值 , 優(yōu)先級小于具體元素設(shè)置的width。如果設(shè)置flex:0 0 400px，那么左右最小寬度為400px,優(yōu)先級高于元素設(shè)置的width

四. 網(wǎng)格布局 grid

最簡單的網(wǎng)格布局

.wrapper?{

display:?grid;

grid-template-columns:?300px 1fr 300px;

}

快速理解： grid-template-columns為父容器屬性,并非表示上右下左,而是表示三個(gè)子元素的寬度為 (300px 自動占滿1份剩余空間 300px),如果寫?grid-template-columns:?300px 1fr 2fr 100px;即表示四個(gè)子元素寬度分別為300px 1/3剩余空間 2/3剩余空間 100px

五. 表格布局

.wrapper?{

width:?100%;

display:?table;

}

.wrapper>.item:not(.center)?{

display:?table-cell;

}

把左右元素設(shè)置為單元格即可,不過該方法在屏幕縮小時(shí),左右固定300px會被壓縮

問: 為什么要設(shè)置width為100%?

答: display:table 與table元素類似 ,實(shí)際上是行內(nèi)塊級元素, 而不是塊級元素。

總結(jié)

以上是生活随笔為你收集整理的html左中右自适应布局,CSS左中右自适应布局六种方案与原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。