如何做好HTML布局是每一个前端开发者入门阶段都要掌握的东西。写一个漂亮的页面，就像是去做一个漂亮的海报排版。页面的一切都是由一个个小盒子组成，就好像是拼积木，我们需要拼出不同的页面样式，就要知道都有哪些积木，什么时候该用哪种积木。

 

　　在HTML页面上，有三种积木：

 

　　一种叫块状元素（block），这种积木非常的死板，它的大小在它出场的时候就通过CSS决定了，而且性格霸道，喜欢占着一整行把别人挤走。

 

　　第二种叫行内元素（inline），这种积木很灵活，大小只会被积木里面放了什么而决定，性格比较弱，会被别人挤走。

 

　　第三种积木集合了前两种积木的性格，叫做行内块状元素（inline-block），它不会霸道到占住一整行，也会被别人挤走，但是大小在它出场的时候就通过CSS决定。它们分别在页面上怎么样？我们来看看：

 

　　积木1没有设置大小，就占了一整行。

 

　　积木2，明明设置了大小，因为是块状元素，依然占住一整行。

 

　　积木3，设置了大小，没有用，因为内容少，就一丁点儿。

 

　　积木4，设置了大小，好端端的呆在积木3身后。

 

　　旅行是一个人，从自己活腻了的地方，到一个别人活腻了的地方去。而页面那么大，要怎么去看看？

 

　　有些积木，不想旅行，默默（static）地在家呆着。

 

　　有些积木，想要旅行，但是还想着要回家，它们说，我们只是相对（relative）离家远了点。

 

　　有些积木，四海为家，到哪儿就是要（absolute）占着不走，在家呆着和出来旅行却还想回家的积木拿它一点办法也没有。

 

　　有些积木，直接去了太空，我就呆在天上的固定（fixed）某个地方，甭管你们的世界怎么转动，静静看着你们装逼。

 

　　没错，这些积木有四种所在的位置（position）：

 

　　static表示默认的文本流，它显示的位置就是它在文本流中占住的位置。

 

　　relative表示相对文本流，它可以在所在的位置相对一段位置显示，但是在文本流中依然占着位置。

 

　　absolute是绝对文本流，它在文本流中不占位置，相对于文本流的边缘固定一个位置展示，页面滚动，它也会跟着滚动。

 

　　fixed则是固定文本流，它脱离了文本流，不在页面上有占着位置，也脱离了页面，它之相对于显示区域固定一个位置展示，不论你页面如何滚动，它一动不动。

 

　　积木A和B有自己平静（static）的家。它们都喜欢在家里的左边呆着。有一天它们吵架了，小A赌气跑（float）到了另外一边。

 

　　float可以控制元素在静态流中左右移动，但是需要注意，float使用后不会被计算占位，所以外部容器需要添加overflow: auto来计算外部容器的大小。

 

　　如果你作为一个前端菜鸟，对于界面元素如何布局有不理解的地方，希望本手册对你有所帮助。