之前因為客戶端引入Facebook的YOGA庫,以及微信小程序?qū)W習(xí)的原因,對于前端的布局有一定的了解。書讀百遍其義自見,不經(jīng)常使用的工具還是需要時不時學(xué)習(xí),比如Flexbox和Position布局。
1. 流式布局
在未設(shè)置其他任何布局的情況下,網(wǎng)頁默認(rèn)采用流式布局方式。有幾點需要注意一下:
① 行內(nèi)標(biāo)簽可以嵌套在塊級標(biāo)簽中,但是反之不可
塊級標(biāo)簽不能嵌套到形內(nèi)標(biāo)簽的原因是: 塊級標(biāo)簽的新開一行的規(guī)則并不會改變,所以并沒有任何效果
② 通過diplay可以修改為行內(nèi)標(biāo)簽還是塊級標(biāo)簽
③ order 調(diào)整item顯示的順序,可設(shè)置正數(shù)、負(fù)數(shù)和0( item默認(rèn)的order = 0)
如果要放置在前面,需設(shè)置一個較小的值!
2. Flexbox
flex-direction
彈性布局中對于內(nèi)部items的方向設(shè)置值,主要是會影響主軸的方向。可取值: row 、row-reverse 、column、column-reverse.
① row: 默認(rèn)值
② row-reverse
flex布局主軸默認(rèn)為水平方向,設(shè)置row-reverse時并不是簡單的左右偏移,而是變換了主軸的方向。
③column
④column-reverse
設(shè)置為column時,相當(dāng)于把主軸和交叉軸進(jìn)行了交換,整體布局以垂直方向顯示。
Justify-content
決定了主軸方向上items對齊的方式,可取值: flex-start、flex-end、center、space-around、space-evenly和space-between。flex-start、flex-end和center很好理解,以上圖中的start和end方向?qū)R。
①space-around
左右邊距是中間間距的1/2(items之間的間距相等)
②space-evenly
間距和邊距值相等
align-items
決定了交叉軸方向的對齊方式,可取值: flex-start、flex-end、center、baseline、stretch。
①stretch
拉伸到和容器相同的高度,但是前提是: 不能限制item的高度,不然不起作用!
3. Position
relative
相對布局,相對于元素在流式結(jié)構(gòu)中的位置。可取值: 正數(shù)、負(fù)數(shù)和0.因為可以設(shè)置負(fù)數(shù)和正數(shù),所以bottom: 20px == top: -20px
以圖例進(jìn)行說明:
關(guān)于left與top和單詞本身的含義好像有點差異,為什么設(shè)置left反而往右邊偏移的呢?設(shè)置top反而往下方偏移呢?原因就是網(wǎng)頁CSS坐標(biāo)方向:
absolute
絕對布局,相對于父視圖的區(qū)域進(jìn)行絕對布局。如果父視圖中沒有非static的元素那么就能在整個屏幕中大顯身手了;如果存在則只能在父視圖的區(qū)域內(nèi)活動。設(shè)置元素位置值:left、top、right、bottom,需要注意和relative的差異:
這些位置值就等同于單詞的含義,距離右邊距的偏移量,可設(shè)置正數(shù)、負(fù)數(shù)和0.
iOS程序員的前端學(xué)習(xí)之路,開車了鎖死不下車了!