自己在vscode上敲完測試完總結的，歡迎指教。
問題描述：假設高度已知，請寫出三欄布局，其中左欄、右欄的寬度為300px，中間自適應
採用float浮動來解決，乙個容器中設定三個塊域，將左側塊域像左浮動，右側塊域向右浮動，中間自適應寬度。如圖**所示：
優點：相容性好；
缺點：脫離文件流，要做清除浮動的操作，浮動周邊的元素要處理好；
ps：清除浮動的方案我隨後會另寫一篇部落格詳細說明：
採用絕對定位來解決，乙個容器中設定三個塊域，將中間塊域離左右邊界的距離設定為300px。如圖**所示：
優點：快捷，設定方便，不容易出問題；
缺點：脫離文件流，下面的子元素也都是脫離文件流的，有效性和可使用性較差；
採用flex布局來解決，設定乙個容器，容器中有三塊塊域，將容器指定為為flex布局，將左右塊域的寬度設定為300px，中間自適應寬度。如圖**所示：
優點：css3新增的乙個特性，算是完美的解決了上述兩種方案的缺點，目前移動端的布局基本上都是用flex的；
缺點：相容性的問題，ie8以下的版本不支援；
採用**布局來解決，設定乙個容器，容器中有三塊塊域，將容器指定為為table布局，每個塊域指定為table-cell，左右塊域的寬度設定為300px，中間自適應寬度。如圖**所示：
優點：相容性好，flex布局不相容的時候可以用**布局實現；
缺點：**布局的時候如果某乙個單元格被撐開的時候其他的同行單元格也會被撐為同等高度；
採用網格布局來解決，設定乙個容器，容器中有三塊塊域，將容器指定為為grid布局，設定對應行和列的數量以及寬度。如圖**所示：
優點：比較新的技術，比較完美；
如果該題目中高度未知，上述方法中浮動布局、絕對定位、網格布局是不適用的
頁面布局之三欄布局的5種方案
題目 假設高度已知，請寫出三欄布局，其中左欄 右欄寬度各為300px，中間自適應的設定方案有幾種？這裡考察的是你對css的理解 首先初始化樣式bodyhtml編寫 由於三欄布局html 幾乎差不多，下面就不過多重複編寫了。這是三欄布局左右固定中間自適應 注 浮動解決方案需要將.center的類標籤與...
web常見的五種前端布局方式
web大前端布局 常用的布局 常用的布局一般分為一下幾大類 文件布局 text 文件流本質是 nomal flow 普通流 常規流 元素在文件中的特點 塊級元素，和內聯元素。塊級元素 是自帶有這行效果，在文件中獨佔一行的效果，塊狀元素會自上而下的排列且在預設寬度是父元素的100 而高度預設被內容撐開...
web前端入門到實戰 CSS三欄布局的5種方法詳解
題目 假設高度已知，請寫出三欄布局，其中左欄 右欄寬度各為300px，中間自適應.這是一道經典的面試題，下面記錄了css布局的5種方法。1.這是三欄布局的浮動解決方案 2.這是三欄布局的浮動解決方案 3.這是三欄布局的浮動解決方案 4.這是三欄布局的浮動解決方案 5.這是三欄布局的浮動解決方案 6....