css中的各種布局寫法(不定期更新)

來源:互聯網
上載者:User

標籤:相容性   固定   理解   流行   寬度   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中的各種布局寫法(不定期更新)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.