今天給大家分享一下九宮格有哪些布局方法，他們各自有什么優(yōu)缺點。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1.背景介紹

我們在布局的時候經(jīng)常會使用到九宮格的模型，那么如何排布九宮格就成了一個常見的問題，那么我們有哪些九宮格的排布方式呢？

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2.知識剖析

一個盒子實際所占有的寬度（或高度）是由”內(nèi)容+內(nèi)邊距+邊框+外邊距“組成的 content是元素的實際內(nèi)容，也就是元素框。當元素為塊級元素或內(nèi)聯(lián)塊級元素時，可以設(shè)置width，height屬性來設(shè)定內(nèi)容區(qū)的寬高。而內(nèi)聯(lián)非替換元素設(shè)置width,height屬性無效，其寬度隨元素的內(nèi)容而變化。 當默認情況下，塊級元素寬度自動填滿其父元素寬度。

Padding屬性定義了元素邊框與元素內(nèi)容之間的空間。其值不可為負值，背景圖與背景 色可以顯示在padding上。 當在內(nèi)聯(lián)非替換元素上設(shè)置padding時，不會影響行高計算,但背景色可以顯示。

border指盒模型的邊框，邊框的相關(guān)的屬性:寬度(border-width)、樣式(border-style)、顏色(border-color)。 在默認情況下，背景會延伸到邊框所在的區(qū)域下面。如果不希望 ?背景侵入邊框所在的范圍，我們要做的就是把它的值設(shè)置為background-clip;padding-box。

margin是外邊距,與padding不同的是，margin可以為負。兩個上下方向相鄰的元素框垂直 相遇時，外邊距會合并。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 布局方法

我們布局九宮格的難點在于如何讓相同大小的三個正方行的塊等間距的排布在同一行，因此 這三塊必須為inline-block，或者是其他的方法允許三個block塊布置在同一行。

利用div＋css來布局 鏈接

此種辦法的有點是：
1.網(wǎng)頁載入比較快，由于DIV+CSS中的CSS富含豐富的樣式，表現(xiàn)更加靈活。2.頁面內(nèi)容與樣式分離可以是網(wǎng)頁代碼減少，使頁面的樣式的調(diào)整變得更加方便。3.表現(xiàn)和結(jié)構(gòu)分離，在團隊開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。

?它的缺點是：瀏覽器兼容性 。DIV+CSS更容易出現(xiàn)多種瀏覽器不兼容的問題，主要原因是不同的瀏覽器對web標準默認值不同。

利用ul+li來布局?鏈接

ul,li布局和div布局很像，同樣使用9個li，將li標簽inline-block化。然后對li標簽設(shè)置背景色，使用padding內(nèi)邊距來撐開li標簽寬高，控制好外邊距， ?使得li標簽之間的間距相等。

這種方法的優(yōu)點是：層次分明，不易混亂

?缺點是：ul,li標簽是有默認的margin和padding.

利用float布局?鏈接

優(yōu)點： 使用簡單方便，不涉及到inline-block間距問題。

缺點：?每個列表元素的高度必須要一致，否則就會像是俄羅斯方塊一樣，“鋸齒相錯”例如一個左浮動列表布局，如果第一行有個列表高度高于其他列表，那就在第二行，第一個元素會沿著最高元素的右側(cè)對齊?

利用flex布局?鏈接

優(yōu)點：沒有邊距的問題，不用害怕浮動，不用考慮子元素是?塊級元素還是行內(nèi)元素布局簡單，實用性強。

缺點：兼容性不太好，比較老的瀏覽器版本不兼容。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3.常見問題

1 如果代碼書寫的時候inline-block元素之間有空格的話，頁面上 顯示的那兩個元素之間也會有間距。

?2 用height設(shè)置元素百分比高的時候，不能產(chǎn)生九宮格的效果。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 4.解決方案

問題一

產(chǎn)生原因：代碼里兩個內(nèi)聯(lián)元素之間的換行或者空格也會占據(jù)空間，其占據(jù)空間的大小與字體大小有關(guān)。

1 可以在寫代碼的時候?qū)蓚€內(nèi)聯(lián)元素緊挨著寫在一起，消除間距。

2 給內(nèi)聯(lián)元素的父級設(shè)置font-size:0;letter-spacing：-4px;

?當兩個內(nèi)聯(lián)元素之間的間距小于4px的情況下，他們也不會發(fā)生重疊的現(xiàn)象。

? 問題二

產(chǎn)生原因：

height的百分比取值是相對于其父元素的高度，而這里塊的父元素為html，而html的高度是可以被其子元素撐大的，所以，為了達到自適應(yīng)的效果應(yīng)該讓其高度的百分比是相對于其父級的寬度，padding-top、padding-bottom或者是用vw為單位。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?5.編碼實戰(zhàn)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?6.擴展思考

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 7.參考文獻 ?（張鑫旭博文）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 8.更多討論

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 用table布局行不行，如何實現(xiàn)？

感謝大家觀看

BY : 聶義中

今天的分享就到這里啦，歡迎大家點贊、轉(zhuǎn)發(fā)、留言