九宫格还有哪些布局方法
大家好，这里是修真院前端小课堂，今天给大家分享的是
《九宫格还有哪些布局方法》
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 布局行不行，如何实现？
【更多内容，可以加入IT交流群565734203与大家一起讨论交流】
【这里是技能树·IT修真院：IT修真院官网，初学者转行到互联网的聚集地】