請你說一說你知道的所有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...
有關自適應布局
當我在完成乙個專案的布局調整之後,才被要求做成自適應布局,這真是件很鬱悶的事情。在網上查了很多,基本上都是針對手機寫幾個相應的布局來解決,老大!難道只有手機對自適應布局有需求嗎,滿大街的智慧型機平板咋辦 無奈之下只有自己研究去了,一下是我研究出來的,基本上已達到目的。一 在 中獲取整個螢幕的解析度 ...