標籤:相容性 固定 理解 流行 寬度 roc bsp title 浮動
前端做久了越來越感覺css的博大精深,雖然css嚴格意義上算不上是一門程式設計語言,比如邏輯控制、迴圈操作、函數等都嚴重缺少或不足,儘管目前有了很流行的sass、less等css前置處理器以便於編寫css,但是實際上css的難處在於它的特性,css的屬性畢竟太多了,每種屬性還有不同的值,效果也各不相同。也難怪不少精通各種語言的大神看到css就頭痛(比如這位)
在此總結一下遇到過的常見布局方式
兩列布局
1、左側固定,右側寬度自適應
(1)通過浮動
https://jsfiddle.net/tgxh/yua2q93b/
(2)通過絕對位置
https://jsfiddle.net/tgxh/w1q7e0c1/
(3)通過BFC規則
https://jsfiddle.net/tgxh/vjqg1z11/
關於BFC規則,可以參考 深入理解BFC和Margin Collapse
(4)使用flex(在移動端使用或者不考慮相容性的話強烈推薦此方法)
https://jsfiddle.net/tgxh/ramoooLy/
三列布局
1、左側固定,中間和右側各占剩餘空間的50%
這個跟兩列類似,只是右側的再分成兩列布局
右側使用浮動
https://jsfiddle.net/tgxh/Lewv6axa/
右側使用inline-block(如果兩個div有換行,中間的空格是一個inline-block元素,也會佔據空間,所有如果兩個div設定為inline-block且寬度都是50%,那麼會超出一行)
辦法1:刪除兩個div的空格 https://jsfiddle.net/tgxh/bt8nv1f2/
辦法2:父元素設定font-size為0,子項目另外設定font-size https://jsfiddle.net/tgxh/gggzs3gw/
辦法3:flex https://jsfiddle.net/tgxh/cdjr13jv/
css中的各種布局寫法(不定期更新)