到底什么是布局
一些刚学前端的程序员，可能会在页面布局上吃很多亏，甚至很多时候，会应为布局出来的效果达不到要求而放弃成为一名前端工程师。我刚学前端的时候，也是布局非常的困难，别人一个首页3个小时就基本上布局完毕了，而我要好几天才能做出来，后来我才发现，原理是我没有真正理解页面布局的意义，使用的HTML元素都是凭感觉去布局，所以布局花费了很多的时间。
HTML页面布局的意义
我们生活中都见过别人怎么盖房子。像这种栋房子就是刚刚盖好的，我们可以把页面布局理解为是在盖房子，不过房子是从底部开始，而网页布局是从顶部开始，但是原理上是一样的。在盖房子的时候，建筑师们都是一层一层的去盖房子，而每一层都会有四个或者四个以上的支撑点，我们可以把这房子的一层与这四个支撑点想象成为HTML页面里面的一个DIV（块级）标签。
像这样，一个DIV就是房子里面的一层，因为DIV是HTML标签里面的块级元素，学前端的基本上都需要去了解有哪些是“块级元素”，因为HTML所有的块级元素他都像一层楼，它在页面里面会独占一行（一层）
而每一层房子上面的窗户，门，空调外机，等就是相当于是页面里面的行内元素
像这张图片里面的绿色盒子就相当于是每一层房子里面的窗户、门、空调外机， 所以我们需要想象一个页面中，到底有多少层楼，每一楼需要什么样的元素去填充，只要理解了这些，那页面布局就没有什么难度了，剩下的就是用css样式去改变块级元素与行内元素的效果了比如让他们浮动，让HTML标签有边距（padding）
想象一下图片中的布局所需元素
这是掘金的首页，想象一下，这里面有多少层房子，每一层房子里面有什么元素，想好了再去布局，看看是不是如此。
如果你是刚入行的前端程序员，记不住那么多块级元素与行内元素，我建议你只记住这几个就可以了
块级元素：div p
行内元素：span
总结
其实只要想象想象一下怎么去盖房子，就懂得怎么样去对页面布局，只要合理利用块级元素与行内元素的特性就可以了。页面布局其实超级简单，请不要再用绝对定位去布局了！
