請你說一說你知道的所有web布局方式？
1.浮動
float:left|right
2. inline-block
display:inline-block(行內塊級)
3.flexible box(彈性盒子)
display:flex
4.grid
display:grid
5.絕對、相對布局
position:absolute/relative
6.**
display:table
7.使用布局框架--bootstrap.css
本文的所有例子使用了同一種三欄布局。
大尺寸：width>1024px
中尺寸：768px小尺寸：width<768px
1.浮動布局，最常見的布局之一
普通的html布局，乙個header，乙個footer,中間是三欄布局，關鍵的css**，三欄布局新增浮動，清除浮動，元素的寬度都是百分比，日常應用是多用auto，讓裡面的內容撐起高度
用@media查詢，當@media的查詢條件滿足時，應用{}中的樣式，screen就是指電腦螢幕。
2.inline-block display:inline-block
html和浮動布局都是一樣的，為了避免空白符號壓縮的問題，寫法略有變化。
只是把float:left改為了這兩句，其他的不變，沒有推薦，看個人習慣。
3.flexible box (彈性盒子)
display:flex;設定在容器上。
先介紹下display:flex的用法：
本例中只改變就行
4. display:grid 網格布局，不常用。
5.position:absolute/relative 常用。
6.使用bootstrap.css框架。
tips:
1.盡量不使用固定高度、寬度，使用百分比，auto，calc()
2.viewport:
CSS布局 自適應布局
網易雲課堂學習筆記二 自適應布局 1.float absolute margin left right2.float overflow left right 產生bfc3.table left,right 預設均分 left margin失效 4.flex left right 由 定寬 自適應 類...
右邊自適應 左右布局 css左右自適應布局
如果有這麼乙個表單需求，前面是乙個名稱，中間是乙個表單，右側是乙個按鈕或者乙個字串。需要自適應布局，名稱為固定長度，右側也是固定，中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先，我想到的有這麼幾種display，乙個是inline block。於是css就變成這樣1.name...
有關自適應布局
當我在完成乙個專案的布局調整之後，才被要求做成自適應布局，這真是件很鬱悶的事情。在網上查了很多，基本上都是針對手機寫幾個相應的布局來解決，老大！難道只有手機對自適應布局有需求嗎，滿大街的智慧型機平板咋辦 無奈之下只有自己研究去了，一下是我研究出來的，基本上已達到目的。一 在 中獲取整個螢幕的解析度 ...