所謂“設計一根線，重構一身汗”，掌握好css基礎對于提高UI開發(fā)效率，提升代碼質量有很大的作用。本文給大家整理一下css中布局方面的基礎。不需要游艇火箭，如果看完后有收獲的話，就分享一下給身邊的小伙伴來一起溫故而知新便是極好的。

本文的目錄如下，采取的是由大到小的層面去分享：

1.css定位布局

2.css彈性布局

3.css盒子模型

4.css BFC

css定位布局

定位布局一般分為下面四類，我們常用的是相對定位，絕對定位和固定定位，而sticky定位是一個比較有趣的定位。

相對定位

相對定位是我們最常見最普通的定位了，他有這2方面的特點：

1. 元素不脫離文檔流
2. 相對于自身元素定位。

所謂不脫離文檔流，就是設置相對定位后，他還是處于原本的文檔流中，保留原本占據的空間?？梢钥纯催@個示例，當我設置了和平精英這個元素為相對定位后，他還是像之前一樣占據著文檔流的空間。

第二個特點是相對于自身元素定位，意思是當我們設置top，left那些值時，他是相對自身原本的位置離頂部，離左邊相應的距離?？梢钥纯催@個示例，我給和平精英這個容器設置屬性后，他是相對原本的位置進行位移的。

絕對定位

接下來說一下絕對定位，他一般用于依賴父元素，位置隨意的元素上，例如紅點呀，角標啊那些。

紅點與角標

他有以下這三點特點：

1. 元素脫離文檔流
2. 寬高由容器里面的內容決定
3. 相對于設置了定位的父級元素來定位。

設置了絕對定位后，元素會脫離文檔流，不占據文檔流的位置，看起來像漂浮在文檔流的上方一樣。

元素的寬高也會發(fā)生變化，他不再占滿整行，而是里面的內容能撐起多大的面積就占多大的面積。

可以看看這個示例，當我們給和平精英的元素設置絕對定位后，他就像不占空間一樣浮了起來，下面的元素就往上占據了他的位置了，而且這個元素的面積只能剛好包住里面的字吧，這就是寬高由里面的內容決定。當然你可以給他設置寬高的樣式，讓他變成你想要的寬高。

絕對定位還有一個特點，是它相對于上一個設置了定位的父級元素來進行定位，如果找不到，則相對于body元素進行定位。

看看這個示例，當我們給這個元素設置絕對定位和top屬性后，它一下子就去到最頂部了，因為此時它的父級元素都沒有設置定位，它相對于body來定位了。如果我們給最外層第二個元素設置定位，是不是就變成了相對于它來定位啦，而如果這時再給最外層第三個元素設置定位，由于它離絕對定位元素更近，所以絕對定位元素就相對于它來定位了。

固定定位

接著講一下固定定位。它和絕對定位比較相似，設置后元素會脫離文檔流，寬高由里面的內容決定。但是他不再相對于父級元素定位，而是根據瀏覽器窗口定位?？梢钥纯催@兒右下角的妲己圖標，當頁面滾動時它還停在原地不動，這就是相固定定位了。這個就不展開了。

sticky定位

最后我們說一下很有趣的sticky定位。我們看一下右邊的導航欄，它一開始還是在文檔流中的，向上滑動后后就黏在屏幕頂部，向下滑動后又回到文檔流中?？梢哉J為，當它在屏幕里時是相對定位，當它離開屏幕時是固定定位。設置也很簡單，只需要對導航欄元素設置position:sticky和top屬性就行了。當然如果你想它黏在屏幕底部，那就設置bottom屬性。

用這個屬性時要注意以下6點，但在我的使用經驗來看，一般就是要特別注意第4第6第7點就行了。

1.sticky不會觸發(fā)BFC。
2.z-index無效。
3.當父元素的height：100%時，頁面滑動到一定高度之后sticky屬性會失效。
4.父元素不能有overflow:hidden或者overflow:auto屬性。
5.父元素高度不能低于sticky高度。
6.必須指定top、bottom、left、right4個值之一。
7.安卓4.4和ios7之前的低端手機不兼容，可用js使導航欄在固定定位與相對定位間切換。

定位屬性

定位屬性包含位置屬性及層級屬性。位置屬性包括top、bottom、left、right，這些屬性指的是目標元素相對于參照物的距離。

而層級屬性，表示哪一個顯示得更前面一點。我們可以看一下這個例子，當我給第3個盒子添加z-index后，他是不是蓋在最上面了啦，而我再給第4個盒子添加更大的z-index后，它就蓋在第3個盒子上面了。

css彈性布局

掌握好css彈性布局，做UI開發(fā)時會更得心應手、事半功倍。（重點，敲黑板?。。。?/p>

要實現彈性布局也很簡單，只需要對容器添加display:flex;就可以了。

接下來看一下彈性布局包含的內容。下圖是一個彈性布局的示意圖，在一個大的container容器里，橫放著三個item項目。main axis意思是主軸，就是item按哪條軸來排列的，cross axis是側軸或者交叉軸，就是和主軸垂直的那條軸。start 和 end 分別表示軸的開頭和結尾。接下來我一個一個屬性介紹一下。

flex-direction

先說容器屬性，flex-direction表示主軸的方向，即項目是要橫著排還是豎著排。一般我們只用到row和column，分別是橫著排和豎著排。加上了reverse表示反方向排列。接下來我們先假設項目都是默認的橫著排的。

justify-content

justify-content定義項目在主軸上是怎么對齊的，分別有下圖五點。要注意的是，如果使用了space-around的話，兩側項目到邊緣的距離是項目與項目之間間距的一半。這個也比較好理解，每個項目都有間距，那兩邊的項目只有一個間距就到邊緣，而中間那些項目有左一個間距和右一個間距，自然就是邊緣的間距的兩倍了。

align-items

既然有主軸的對齊就肯定有交叉軸的對齊了，屬性值也和上一個有點相似。這兒就不多說了。用得最多的就是center屬性，拿來做垂直居中對齊。一般彈性布局用得最多的容器屬性就是這兩個屬性了。

flex-wrap

flex-wrap定義如果一行放不下，應該怎么辦，默認是不換行，也有換行及反著換行的選擇。使用換行的話，就可以實現出九宮格，瀑布流之類的效果了。

flex-grow

接下來要介紹的是項目的屬性了，就是在一個個item里設置的屬性。用得最多的是flex-grow，一般我們直接只寫flex，表示item占據空間的比例，如果每個item都是1那就是平均分，如果其中一個item設為2，那么他占的空間是別的item的兩倍。

很多時候我會用這個屬性來做圖文橫排的樣式，給文字設個flex=1，就可以把除了圖片以外的空間都占滿了。

align-self

align-self定義單個項目的交叉軸對齊方式，比如某個項目不想按正常套路排列，就可以用這個屬性來設置了，可選值和前面說的align-item是一樣的。

order

order定義項目的排列順序，數值越小，排列越靠前，默認為0。有時候如果想做一個九宮格抽獎的效果，就可以做一個按鈕再做八個獎品項，然后用order來調整他們的順序了，而不用像以前那樣，先做四個獎品項，再做一個按鈕，再做四個獎品項了。

可視化工具

彈性布局的介紹到此就完了，這里再介紹一個直觀的可視化工具flexbox playground，給容器和項目設置不同的值，看看他們的表現。

這是另一個可視化工具flexbox.help，和之前的相比，可以生成css代碼，但不能給單個項目設置屬性看效果。

css盒子模型

剛剛說完元素之間的布局后，接下來我要說的是更小層面的東西了，就是單個元素的組成結構，我們表示為盒子模型。

大家先看看下圖這個畫框，框的中間是一副畫，在css里表示content，畫與畫框之間的間距，我們叫padding，畫框相當于border，而畫框外面的間距就是margin了。css的盒子模型就是長這樣的了。

模型的寬與高，在默認標準模式下，就是指content的寬與高。

但當我們設置box-sizing: border-box時，模型的寬與高就是content+padding+border的寬高了。

說這個有什么用呢？用處可大了。以下面這個例子為例，假設容器寬高是固定的，這時我們需要調小padding間距，如果不用border-box，那模型的寬就是content的寬，我們調小多少padding，就要把content調大相應的尺寸，這樣最終容器的寬高才能保持一致。

而如果用了border-box，此時模型的寬就是content+padding+border的寬，我們調小padding就行了，content會自動撐滿整個容器，就是自動調大了尺寸了，一步到位了。所以很多時候我挺喜歡用這個屬性的。

css BFC

說完border-box，我再說一個有趣的現象，叫外邊距重疊現象。比如你寫了兩個列表項，分別設置了這樣的間距，然后你用瀏覽器打開一看，發(fā)現他們的間距合并在一起了。這個現象是合理的，因為你本來按著設計稿量的尺寸設置了每個列表項的外邊距，結果瀏覽器卻顯示了2倍的間距，這樣就很奇怪了吧。不過為了減少這個現象的影響，我一般是只設置一邊的間距，比如只設置列表項的下邊距之類的。

有的時候可能你還是不想外邊距重疊，那解決辦法就是創(chuàng)建BFC。創(chuàng)建了BFC后，元素自成了一個環(huán)境，環(huán)境里面與外面的的樣式和表現互相獨立，互不影響。所以就兩個外間距都出現了。

那怎么創(chuàng)建BFC呢？這里有4個辦法。

1. overflow不為visible;
2. float的值不為none；
3. position的值為absolute、fixed；
4. display屬性為inline-blocks,table, table-cell,table-caption,flex,inline-flex;

示例演示的是第一個辦法，設置overflow屬性?？梢钥吹?，一開始元素之間的外邊距是重疊了的，這時候讓我來創(chuàng)建一個bfc。前面說了要創(chuàng)建一個環(huán)境，讓環(huán)境里面的與外面的互不影響，所以這時我要在p標簽外面添加一個div，然后設置div的overflow屬性，讓div成為一個bfc，使得里面的p樣式不受外面影響。設置完后，可以看到兩者的外間距就分開了。

結語

關于布局、結構方面的知識點我就整理完了，不知本文能否幫得到大家呢？歡迎大家分享收藏，說不定哪個時候突然需要復習和參考一下呢。（?????）