【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
1.背景介绍
盒子模型与元素水平
九宫格对于一个初学者来说，只需要了解标准盒模型，盒模型由内至外分别是content、padding、border、margin， 其中可以使用百分比的有content,padding,margin，边框border则不可以用%单位。
元素水平分为3种：block水平，inline-block水平，inline水平，3种元素各有不同的表现。
block水平默认情况下，继承父级宽度，铺满整行。多个元素竖直方向排列，可以设置宽高，竖直方向上的padding,margin有效。
inline元素水平排列，多个inline水平的元素，会在一行里排列，不可以设置宽高，竖直方向上的padding,margin无效。
inline-block水平元素，用时具有block水平和inline水平的特点，多个元素水平排列成一行。可以设置宽高，竖直方向上的padding,margin有效。
2.知识剖析
既然这样，实现九宫格效果，必然不能是9个block水平的元素或者是9个inline水平的元素，只能是inline-block的元素。
所以引出第一种九宫格布局。inline-block布局。固定尺寸的九宫格布局。
关于九宫格的自适应，什么叫自适应，九宫格的自适应指的又是什么，认识css单位,px,%，与vw。
px,%,vw的不同之处
vw：viewpoint-width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint-height，视窗高度，1vh等于视窗高度的1%。
%:百分比，以父级元素的尺寸为基准，乘以%后得到相应的尺寸。
既然这样就可以轻松的写出第一个九宫格展示图。
b、float布局
关于浮动
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
c、vw布局
d、flex布局
e、grid布局
f、position布局
g、line-height布局
3.常见问题
display:inline-block后的九宫格会折行？
4.解决方案
分析原因：
解决办法：
1、父级设置font-size为0
2、标签闭合
5.编码实战
6.扩展思考
9宫格必须使用9个div吗？
不一定
直接看demo。
3个div实现宫格
1个div实现9宫格
7.参考文献
参考一：w3c
参考二：知乎
8.更多讨论
讨论点1：以上提到的九宫格布局实现方案，还有别的实现方案吗？
table布局方案，纯position定位方案
讨论点2：选择哪种方案好？
考虑兼容性的话float布局与inline-block布局最好，其他的布局方案或多或少不兼容低版本浏览器
讨论点3：初学者实现九宫格要注意的问题
inline-block布局的问题，有必要清楚浮动吗？
问题：
1.display:inline-block后的九宫格会折行？
答：
a、父级设置font-size为0
b、标签闭合
2.为什么绝对定位知识设置相对方向值，就能实现width或者height具有尺寸？
答：这是绝对定位的特性，假如我们在一个相对定位的容器有一个子元素，我们直接设置这个子元素是绝对定位，然后设置left：0right:0top:0bottom:0此时子元素的宽度就是父级的宽度，子级的高度就是父级的高度，这就是绝对定位的特性，拉伸特性。
3.为什么九宫格布局不能使用height的百分比。
答：
Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。
（即块级元素的宽度）
但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。
因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。
因为父级元素的高度是由该元素里面的内容撑起的，在不设置该圆素高度的前提下。
于是子元素的高度height: 50% 也不会起作用。解决办法就是给html和body加上height: 100%。
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。
这里是技能树.IT修真院：http://www.jnshu.com，初学者转行到互联网行业的聚集地。"
欢迎加IT交流群565734203与大家一起讨论交流
CSS是前端基础技能之一，而CSS最重要的功能就是网站布局。CSS布局方式有很多，从远古时代的table（表格）布局-->float（浮动）布局-->position（定位）布局-->flex（弹性）布局-->grid（网格）布局（还未正式推出），下面咱们简单谈一谈各种布局的用法及其优缺点。
table布局就是将网站当做一个表单来做，这里不做展开，因为现在基本不这么用了。
float：浮动。float刚开始并不是为了用来网页布局，而是用来解决图文信息中图片与文本冲突的问题的。
如下图：
这种常见的图文效果，没有float之前是很难达到的。有了float之后只需要加一个float：left，轻松搞定。
‘咦，如果float可以处理图文的问题，那用来布局不也可以吗？’，后来有人用float试着用于网页布局，还真的可以。
网页中最常见的布局如下：
用float做
比table布局要方便不少，不过float随之而来的带来了 “浮动高度塌陷”的问题：
如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0；
引申：网页元素一般分为 普通流，浮动流，定位流。其中普通流和浮动流在一个层级上，定位流>浮动流>普通流。
之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法，非常麻烦。
position：定位；顾名思义，就是确定位置。position同样可以用做网页布局。
同样的效果
不过position需要计算每一个元素的位置，而且这个位置是定死的，略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。
关键点：子绝父相。需要定位的元素用absolute绝对定位，其父元素用 relative相对定位。还有fixed固定定位，他是以html为父元素的定位。
flex：弹性；弹性布局很好的解决了float和position的问题，非常好用。
使用方法：
在父元素使用 display:flex确定弹性作用的范围。
然后
justify-content：center（space-around，space-between等）；水平方向布局；
align-items:center(flex-start,flex-end等)垂直方向布局；
不过flex不兼容IE8及以下的浏览器。
大部分情况下flex布局已经能满足需要，不过flex只能用作一维布局，也就是说，flex一次只能作用于一条线。如果想要进行二维布局，必须翻转坐标二次弹性，这样会显得不够优雅，这时候grid（网格）布局就发展起来了。
grid布局用法和flex相似，但是作用于二维布局。
先在父元素使用 display:grid确定网格作用范围；
然后
grid-template-columns: 40px 50px auto 50px 40px（行）
grid-template-rows: 25% 100px auto（列）
等等属性，这里只简单介绍，大家了解有这个东西就行。
在现实工作用，以flex为主，position辅助已经足够应对所有问题。
