所謂“設(shè)計(jì)一根線，重構(gòu)一身汗”，掌握好css基礎(chǔ)對(duì)于提高UI開發(fā)效率，提升代碼質(zhì)量有很大的作用。本文由我大熊主播給大家分享一下css中布局方面的基礎(chǔ)。不需要游艇火箭，如果看完后有收獲的話就點(diǎn)個(gè)贊點(diǎn)個(gè)收藏便是極好的。

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

1.css定位布局

2.css彈性布局

3.css盒子模型

4.css BFC

另預(yù)告一下，css動(dòng)畫與即抄即用的css常用樣式會(huì)在下篇中分享，敬請(qǐng)期待。

好，那就開始發(fā)車了。

css定位布局

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

相對(duì)定位

相對(duì)定位是我們最常見最普通的定位了，他有這2方面的特點(diǎn)：

1.元素不脫離文檔流

2.相對(duì)于自身元素定位。

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

第二個(gè)特點(diǎn)是相對(duì)于自身元素定位，意思是當(dāng)我們?cè)O(shè)置top，left那些值時(shí)，他是相對(duì)自身原本的位置離頂部，離左邊相應(yīng)的距離?？梢钥纯催@個(gè)示例，我給和平精英這個(gè)容器設(shè)置屬性后，他是相對(duì)原本的位置進(jìn)行位移的。

絕對(duì)定位

接下來(lái)說(shuō)一下絕對(duì)定位，他一般用于依賴父元素，位置隨意的元素上，例如紅點(diǎn)呀，角標(biāo)啊那些。

他有以下這三點(diǎn)特點(diǎn)：
1.元素脫離文檔流
2.寬高由容器里面的內(nèi)容決定
3.相對(duì)于設(shè)置了定位的父級(jí)元素來(lái)定位。

設(shè)置了絕對(duì)定位后，元素會(huì)脫離文檔流，不占據(jù)文檔流的位置，看起來(lái)像漂浮在文檔流的上方一樣。

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

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

絕對(duì)定位還有一個(gè)特點(diǎn)，是它相對(duì)于上一個(gè)設(shè)置了定位的父級(jí)元素來(lái)進(jìn)行定位，如果找不到，則相對(duì)于body元素進(jìn)行定位。

看看這個(gè)示例，當(dāng)我們給這個(gè)元素設(shè)置絕對(duì)定位和top屬性后，它一下子就去到最頂部了，因?yàn)榇藭r(shí)它的父級(jí)元素都沒(méi)有設(shè)置定位，它相對(duì)于body來(lái)定位了。如果我們給最外層第二個(gè)元素設(shè)置定位，是不是就變成了相對(duì)于它來(lái)定位啦，而如果這時(shí)再給最外層第三個(gè)元素設(shè)置定位，由于它離絕對(duì)定位元素更近，所以絕對(duì)定位元素就相對(duì)于它來(lái)定位了。

固定定位

接著講一下固定定位。它和絕對(duì)定位比較相似，設(shè)置后元素會(huì)脫離文檔流，寬高由里面的內(nèi)容決定。但是他不再相對(duì)于父級(jí)元素定位，而是根據(jù)瀏覽器窗口定位。可以看看這兒右下角的妲己圖標(biāo)，當(dāng)頁(yè)面滾動(dòng)時(shí)它還停在原地不動(dòng)，這就是相固定定位了。這個(gè)就不展開了。

sticky定位

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

用這個(gè)屬性時(shí)要注意以下6點(diǎn)，但在我的使用經(jīng)驗(yàn)來(lái)看，一般就是要特別注意第4第6第7點(diǎn)就行了。

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

定位屬性

定位屬性包含位置屬性及層級(jí)屬性。位置屬性包括top、bottom、left、right，這些屬性指的是目標(biāo)元素相對(duì)于參照物的距離。

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

css彈性布局

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

要實(shí)現(xiàn)彈性布局也很簡(jiǎn)單，只需要對(duì)容器添加display:flex;就可以了。

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

flex-direction

先說(shuō)容器屬性，flex-direction表示主軸的方向，即項(xiàng)目是要橫著排還是豎著排。一般我們只用到row和column，分別是橫著排和豎著排。加上了reverse表示反方向排列。接下來(lái)我們先假設(shè)項(xiàng)目都是默認(rèn)的橫著排的。

justify-content

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

align-items

既然有主軸的對(duì)齊就肯定有交叉軸的對(duì)齊了，屬性值也和上一個(gè)有點(diǎn)相似。這兒就不多說(shuō)了。用得最多的就是center屬性，拿來(lái)做垂直居中對(duì)齊。一般彈性布局用得最多的容器屬性就是這兩個(gè)屬性了。

flex-wrap

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

flex-grow

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

很多時(shí)候我會(huì)用這個(gè)屬性來(lái)做圖文橫排的樣式，給文字設(shè)個(gè)flex=1，就可以把除了圖片以外的空間都占滿了。

align-self

align-self定義單個(gè)項(xiàng)目的交叉軸對(duì)齊方式，比如某個(gè)項(xiàng)目不想按正常套路排列，就可以用這個(gè)屬性來(lái)設(shè)置了，可選值和前面說(shuō)的align-item是一樣的。

order

order定義項(xiàng)目的排列順序，數(shù)值越小，排列越靠前，默認(rèn)為0。有時(shí)候如果想做一個(gè)九宮格抽獎(jiǎng)的效果，就可以做一個(gè)按鈕再做八個(gè)獎(jiǎng)品項(xiàng)，然后用order來(lái)調(diào)整他們的順序了，而不用像以前那樣，先做四個(gè)獎(jiǎng)品項(xiàng)，再做一個(gè)按鈕，再做四個(gè)獎(jiǎng)品項(xiàng)了。

可視化工具

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

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

css盒子模型

剛剛說(shuō)完元素之間的布局后，接下來(lái)我要說(shuō)的是更小層面的東西了，就是單個(gè)元素的組成結(jié)構(gòu)，我們表示為盒子模型。

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

模型的寬與高，在默認(rèn)標(biāo)準(zhǔn)模式下，就是指content的寬與高。

但當(dāng)我們?cè)O(shè)置box-sizing: border-box時(shí)，模型的寬與高就是content+padding+border的寬高了。

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

而如果用了border-box，此時(shí)模型的寬就是content+padding+border的寬，我們調(diào)小padding就行了，content會(huì)自動(dòng)撐滿整個(gè)容器，就是自動(dòng)調(diào)大了尺寸了，一步到位了。所以很多時(shí)候我挺喜歡用這個(gè)屬性的。

css BFC

說(shuō)完border-box，我再說(shuō)一個(gè)有趣的現(xiàn)象，叫外邊距重疊現(xiàn)象。比如你寫了兩個(gè)列表項(xiàng)，分別設(shè)置了這樣的間距，然后你用瀏覽器打開一看，發(fā)現(xiàn)他們的間距合并在一起了。這個(gè)現(xiàn)象是合理的，因?yàn)槟惚緛?lái)按著設(shè)計(jì)稿量的尺寸設(shè)置了每個(gè)列表項(xiàng)的外邊距，結(jié)果瀏覽器卻顯示了2倍的間距，這樣就很奇怪了吧。不過(guò)為了減少這個(gè)現(xiàn)象的影響，我一般是只設(shè)置一邊的間距，比如只設(shè)置列表項(xiàng)的下邊距之類的。

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

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

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

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

結(jié)語(yǔ)

關(guān)于布局、結(jié)構(gòu)方面的知識(shí)點(diǎn)我就分享完了，不知本文能否幫得到大家呢？在下篇文章中，我會(huì)繼續(xù)分享css動(dòng)畫和即抄即用的css常用樣式，敬請(qǐng)期待。大家有什么想分享的歡迎留言，也歡迎大家收藏點(diǎn)贊，說(shuō)不定哪個(gè)時(shí)候突然需要復(fù)習(xí)和參考一下呢。（?????）