頁面布局方法之三欄布局

2021-10-07 16:17:43 字數 1302 閱讀 2117

題目：完成左中右三欄布局，高度100px，左右寬度200px，中間寬度自適應。

今天學習了關於三欄布局的五種方法，其中最常用的就是flex伸縮布局，其他的布局方法雖然也可以實現同樣的效果，但是或多或少有些缺點，但是本著多學點總是沒錯的精神，還是都了解一下。

float浮動布局的優點是相容性比較好，但是其脫離dom流的特性導致使用起來需要兼顧其他模組的位置變化，有時會顯得比較麻煩。

重點是不設定中間盒子的寬度，由於是塊級元素，所以寬度會自動撐開

*


.box


.box div


.box>.right


.box>.left


.box>.center
absolute絕對定位的好處是方便快捷，直接寫位置當然最準確，但是同樣存在脫離文件流導致其他模組出現混亂的缺點

重點是中間盒子左右距離都設定成200px將其撐開

*


.box


.box div


.box>.right


.box>.left


.box>.center
flex伸縮布局是實際專案中最常見的布局方式了，優先考慮，唯一的瑕疵就是相容性有些問題。

重點是中間盒子 flex：1，使其寬度撐開

*


.box


.box div


.box>.left


.box>.center


.box>.right
**布局是h5不建議使用的布局方式，但是在這個應用場景下，**布局還是可以完美完成任務的，但是其已經過時，操作繁瑣的缺點導致不建議使用。

優點：相容性很好o(∩_∩)o

重點是 父盒子display:table，子盒子 display: table-cell ，中間盒子不設寬度，將其撐開

*


.box


.box div


.box>.left


.box>.center


.box>.right
網格布局是最新技術（也不算新了吧…）

明顯**簡化了很多呀有木有

但是新技術都存在這個問題，相容性相容性相容性…

重點是。。。額好像沒什麼重點，就幾條**-。-

*


.box


.box>.left


.box>.center


.box>.right

頁面布局（三欄布局）

假設高度已知，請寫出三欄布局，其中左欄 右欄寬度各為300px，中間自適應。1.浮動布局 2.絕對定位 3.flexbox解決 4.table cell 布局 5.grid網格布局。doctype html en utf 8 viewport content width device width,i...

頁面布局之三欄布局的5種方案

題目 假設高度已知，請寫出三欄布局，其中左欄 右欄寬度各為300px，中間自適應的設定方案有幾種？這裡考察的是你對css的理解 首先初始化樣式bodyhtml編寫 由於三欄布局html 幾乎差不多，下面就不過多重複編寫了。這是三欄布局左右固定中間自適應 注 浮動解決方案需要將.center的類標籤與...

CSS之三欄布局

方法一 浮動布局 width 100 height 100px float left width 300px background red height 100px float right background blue width 300px height 100px background yel...