css雖簡單,但細節多,技巧性高,易學難精。

如何實現左右固定300px , 中間寬度自適應？

有如下結構

左

右

中

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

.item {

height: 400px;

}

.left,

.right {

width: 300px;

background: #f00;

}

.center {

background: yellow;

}

一. 雙浮動法

.left {

float: left;

}

.right {

float: right;

}

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

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

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

答：

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

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

二. 絕對定位法

左

中

右

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

三. 彈性盒子

.wrapper?{

display:?flex;

}

.center?{

flex:?1;

}

父容器設置 display:?flex，左右設置300px, center把flex設置為1 ，效果是否實現了呢?

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

還需要再添加如下樣式：

.left,.right?{

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

}

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

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

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

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

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

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

四. 網格布局 grid

最簡單的網格布局

.wrapper?{

display:?grid;

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

}

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

五. 表格布局

.wrapper?{

width:?100%;

display:?table;

}

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

display:?table-cell;

}

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

問: 為什么要設置width為100%?

答: display:table 與table元素類似 ,實際上是行內塊級元素, 而不是塊級元素。