我的理解：
自然布局：默认的流式布局：就是块级的垂向下，块内的横向移动。
浮动布局：通过float，可以将块级的并行在一排。
层模型
特点：如果我想一个div在另外一个div的上面，我们就需要可以使用绝对定位来完成，层模型的三种定位方式relative、absolute、fixed
absolute
需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，
然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
relative
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，
然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
fixed
fixed：表示固定定位，与absolute定位类型类似，
但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。
由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，
除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，
这与background-attachment:fixed;属性功能相同。
---------------------
作者：superman__007
来源：CSDN
原文：https://blog.csdn.net/superman__007/article/details/77951401
版权声明：本文为博主原创文章，转载请附上博文链接！
摘录：
一 静态布局（Static Layout）
表现：在传统web设计中，不管浏览器尺寸具体大小多少，网页的布局会一直按照最开始的布局来显示。
特点：固定死宽高
二 自适应布局（Adaptive Layout）
表现：就是为了不同屏幕的分辨率来定义不同的布局，并且在每个布局中的页面元素不随着窗口的大小变化而改变。
特点：自适应布局可以看做是静态布局的一个系列，即元素的位置随着网页大小发生变化而元素的大小不变。
三 流式布局（Liquid Layout）
表现：实质是百分比布局，只有一套布局，页面元素会随着窗口大小变化而改变。
特点：当窗口变得过小或过大，页面元素就不能正常显示。
1 百分比的特点
尺寸百分比：如width = 20%；
位置百分比：如left = 30%；
2 单位
1）em：参考点继承于父级字体大小
例如：
<div style = “font-size:14px;”>
<div style = “font-size:2em”></div><!—字体继承父级为28px-->
</div>
2）rem；相对于（root根元素）html元素设置的字体大小
确定rem的三个步骤：
a:确定基数，一般为10px；
b:html{font-size:百分数}
基数 = 百分数*16
如：百分数为62.5% 基数 = 62.5*16= 10px = 1rem
c:将px换算成rem公式：px值/基数
如：html的font-size =62.5%，则可以确定基数为10px，若给浏览器设置的字体为20px，换算成rem值为20/10 = 2rem。
例如：
<html style="font-size: 62.5%;">
<body>
<div style="font-size: 3rem;"></div><!--3rem=30px-->
</body>
</html>
注意：谷歌浏览器下小于12px的字体会失效，则最终显示默认字体大小为12px，但是在火狐浏览器下能够正常显示；
兼容性问题：IE6，7，8不支持em或rem，其他浏览器都支持。
--------
四 响应式布局
表现：针对不同的屏幕分辨率设置不同的布局，同时每一种布局中用到流式布局，即页面大小会随着窗口大小的改变而自动适配，能使一个网站兼容多个终端。
特点：响应式布局跟自适应布局原理一样，都是检测设备，根据设备不同分辨率来设置不同的CSS样式，并且样式里面都采用的是百分比，而不是自适应布局里面的固定宽高。