左邊固定，右邊自適應
需要兩個div實現，乙個div設定浮動，並設定寬度，另乙個div可以不用設定任何東西
如果要給右邊塊設定什麼的話下面兩種方法也行：
兩個子元素設定相對定位，給上邊的子元素設定寬度，下邊的子元素設定left,值為上邊子元素的寬度，再設定right:0。
給父容器設定相對定位是因為可以讓其設定絕對定位的子元素相對它進行移動；給上邊的子元素設定絕對定位可以讓下邊的子元素跟它在同一行。
父元素設定display:flex;上邊子元素設定寬度，下邊子元素設定flex:1
div
.parent
.left
.right
原理: 左右模組各自向左右浮動，並設定中間模組的margin值使中間模組寬度自適應
缺點: 主要內容無法最先載入，當頁面內容較多時會影響使用者體驗
缺點: 主要內容模組無法最先載入，當頁面中內容較多時會影響使用者體驗。因此為了解決這個問題，有了下面要介紹的布局方案雙飛翼布局
優點: 主要內容模組可以優先載入，當頁面中內容較多時不會影響使用者體驗。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性：
優點：可以先寫center，讓他先載入，然後用order屬性，把他排到中間的位置
.container
.left
.right
.center
.container
.left,.center,.right
.left
.right
.container
.center
.left
.right
用於設定網格容器的列屬性 其實就相當於列的寬度 當我們需要幾列展示時
就設定幾個值 這個屬性可以接收具體數值比如100px 也可以接收百分比值
表示佔據容器的寬度
需要注意的是: 當給容器設定了寬度時
grid-template-columns設定的百分比值是以容器的寬度值為基礎計算的
如果未設定寬度時 會一直向上追溯到設定了寬度的父容器 直到body元素。
grid-template-rows:100px;
用於設定網格容器的行屬性 其實就相當於行的高度
其特性與grid-template-columns屬性類似
.container
有興趣的可以看看這篇文章
flex(彈性布局)實現五大常用布局
CSS常見布局方式
如下 child1 child2 clearfix after給兩個子元素新增float，然後給它們的父元素新增clearfix類用於清除浮動。child1 child2 child3 設定main寬度為100 再設定兩個側欄的寬度。設定 負邊距，child2設定 負左邊距 為100 child3設...
css常見布局方式
布局是css中乙個重要部分，下面總結了css布局中的常用技巧，包括常用的水平居中 垂直居中方法，以及單列布局 多列布局的多種實現方式 包括傳統的盒模型布局和比較新的flex布局實現 一 居中方式 水平居中 水平居中對於子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，採取的布局方案是不同。行內元素...
CSS實現多欄布局的幾種方式
假如把下面的三個div顯示在同一行 1 float實現多欄布局float屬性控制目標html元件是否浮動以及如何浮動。設定該屬性過後，物件會被當做塊元件處理。float的取值一共有四個 left 向左浮動 right 向右浮動 none 不浮動 inherit 繼承父元素值 將box1,box2,b...