这里是修真院web小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解web知识/技能，本篇分享的是：

【 九宫格还有哪些布局方法】

今天给大家分享一下九宫格有哪些布局方法，他们各自有什么优缺点。

                                   1.背景介绍

我们在布局的时候经常会使用到九宫格的模型，那么如何排布九宫格就成了一个常见的问题，那么我们有哪些九宫格的排布方式呢？

                                   2.知识剖析

一个盒子实际所占有的宽度（或高度）是由”内容+内边距+边框+外边距“组成的 content是元素的实际内容，也就是元素框。当元素为块级元素或内联块级元素时，可以设置width，height属性来设定内容区的宽高。而内联非替换元素设置width,height属性无效，其宽度随元素的内容而变化。 当默认情况下，块级元素宽度自动填满其父元素宽度。

Padding属性定义了元素边框与元素内容之间的空间。其值不可为负值，背景图与背景 色可以显示在padding上。 当在内联非替换元素上设置padding时，不会影响行高计算,但背景色可以显示。

border指盒模型的边框，边框的相关的属性:宽度(border-width)、样式(border-style)、颜色(border-color)。 在默认情况下，背景会延伸到边框所在的区域下面。如果不希望  背景侵入边框所在的范围，我们要做的就是把它的值设置为background-clip;padding-box。

margin是外边距,与padding不同的是，margin可以为负。两个上下方向相邻的元素框垂直 相遇时，外边距会合并。

                                  布局方法

我们布局九宫格的难点在于如何让相同大小的三个正方行的块等间距的排布在同一行，因此 这三块必须为inline-block，或者是其他的方法允许三个block块布置在同一行。

利用div＋css来布局 链接

此种办法的有点是：
1.网页载入比较快，由于DIV+CSS中的CSS富含丰富的样式，表现更加灵活。2.页面内容与样式分离可以是网页代码减少，使页面的样式的调整变得更加方便。3.表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

 它的缺点是：浏览器兼容性 。DIV+CSS更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。

利用ul+li来布局 链接

ul,li布局和div布局很像，同样使用9个li，将li标签inline-block化。然后对li标签设置背景色，使用padding内边距来撑开li标签宽高，控制好外边距，  使得li标签之间的间距相等。

这种方法的优点是：层次分明，不易混乱

 缺点是：ul,li标签是有默认的margin和padding.

利用float布局 链接

优点： 使用简单方便，不涉及到inline-block间距问题。

缺点： 每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐 

利用flex布局 链接

优点：没有边距的问题，不用害怕浮动，不用考虑子元素是 块级元素还是行内元素布局简单，实用性强。

缺点：兼容性不太好，比较老的浏览器版本不兼容。

                                     3.常见问题

1 如果代码书写的时候inline-block元素之间有空格的话，页面上 显示的那两个元素之间也会有间距。

 2 用height设置元素百分比高的时候，不能产生九宫格的效果。

                                    4.解决方案

问题一

产生原因：代码里两个内联元素之间的换行或者空格也会占据空间，其占据空间的大小与字体大小有关。

1 可以在写代码的时候将两个内联元素紧挨着写在一起，消除间距。

2 给内联元素的父级设置font-size:0;letter-spacing：-4px;

 当两个内联元素之间的间距小于4px的情况下，他们也不会发生重叠的现象。

  问题二

产生原因：

height的百分比取值是相对于其父元素的高度，而这里块的父元素为html，而html的高度是可以被其子元素撑大的，所以，为了达到自适应的效果应该让其高度的百分比是相对于其父级的宽度，padding-top、padding-bottom或者是用vw为单位。

                                       5.编码实战

                                       6.扩展思考

                                      7.参考文献  （张鑫旭博文）

                                      8.更多讨论

                                      用table布局行不行，如何实现？

作者：slashnie
链接：https://www.jianshu.com/p/b3f83ca5bcaf
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

如果这篇文章对你有帮助，并且使你对修真院免费在线学习感兴趣，可以通过我的邀请链接进行注册，这样可以在日后为你的线下学习减免学费。

邀请链接：http://www.jnshu.com/login/1/23246304

邀请码：23246304

更多内容，可以加入IT交流群565734203与大家一起讨论交流

这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地