CSS常用布局學習

來自專欄小谷悠悠伴我行

最近開始學習CSS，了解了一些基礎和常規寫法。CSS的知識十分複雜，是值得不斷發掘和完善的一個前端模塊。對於新人來說，最好的方法就是嘗試，去模仿，遇到問題再去深入，一點一點得增加對CSS的基礎的理解。

CSS布局對於新人來說，是一個比較基礎的難點，首先我們應該理解一些常用的布局屬性

學習CSS布局 通過這以網站，學習display，position 以及 float 等屬性，加深對其認識。

下面介紹幾種常用的布局方法

1.左右布局

1.1.用 float 實現左右布局

只要設定兩個布局塊的寬度總和為 container(容器) 的寬，那麼倆個class的float屬性可均為 float:left;

也可以用以下方法讓右邊塊級元素自適應左邊達到左右布局

即給 right 的寬度加上 margin-left

1.2.用 position 實現左右布局

父元素設置為position:relative;

left設置固定寬度，設定為絕對定位position:absolute。

right設置為相對定位position:relative。

right設置左邊距，margin-left 為左側欄的寬度。

2.左中右布局

2.1.用 float 實現左中右布局

其原理與 float 左右布局一樣，且也可以用自適應。

值得注意的是 middle 所在塊與 left 所在塊一樣，要用 float:left;

而 right 所在塊可以用 float:left 或 float:right; 以及自適應。

2.2.用 position 實現左中右布局

原理與前面類似，值得注意的是，我們要調整一下html的布局，保證 right 列div在 middle 列div前，不然會出現第三塊換行顯示的情況，此問題涉及文檔流

文檔流：文檔內元素的流動方向：內聯元素從左往右，寬度不夠另起一行繼續；塊級元素，每一塊佔一行，從上到下依次往下

所以同理，2.1.中middle 若用自適應，也要調整html與上面一樣

3.水平居中

其實前面已經用到了水平居中的方法

margin: 0 auto; 常用於塊級元素

當然還有其他水平居中及垂直居中的方法，網上有很多相關博客。如16種方法實現水平居中垂直居中

另外，如何實現將垂直元素變成水平，也可以用float:left;

方法如下：

1.給所有的子元素加 float:left

2.給父元素加 clearfix 類 （其目的是去掉float:left 產生的bug，一定會有bug，因此一定要加上）

clearfix 類寫法如下

通過上述知識，相信你對display，position 以及 float 等屬性已經有所認識。感謝評論區指導，去看了下flex屬性（其實學習CSS布局裡提到了，有興趣可以看MDN文檔，但是看文檔很多時候不能快速理解）推薦看看大佬們的博客，這裡推薦阮一峰老師關於flex布局的博客，上述1，2種布局方式現已經不提倡，flex是個強大的屬性，大家可以看看。

本文主要用於個人學習使用，如有侵權請聯繫我刪除

主要參考：

學習CSS布局?

zh.learnlayout.com

CSS常見布局 | 前端工程師手冊?

leohxj.gitbooks.ioFlex 布局教程：實例篇 - 阮一峰的網路日誌?

www.ruanyifeng.comDIV+CSS頁面基本布局總結?

www.jianshu.com16種方法實現水平居中垂直居中?

louiszhai.github.io
推薦閱讀：