position 和 display 属性，以及如何浮动（float）和清除（clear）元素,z-index属性
三个属性控制： position 属性、 display 属性和 float 属性。
position属性：控制页面上元素间的位置关系， display属性：控制元素是堆叠、并排，还是根本不在页面上出现， float属性：提供控制的方式，以便把元素组成成多栏布局。（1）相对定位
相当于它把自己从原来的包含元素中挣脱出来了，要注意，除了这个元素自己相对于原始位置挪动了一下之外，页面没有发生任何变化。换句话说，这个元素原来占据的空间没有动，其他元素也没动。 多数情况下，只用 top 和 left 就可以实现我们想要的效果 {position:relative; top:25px; left:30px;}(2)绝对定位
绝对定位会把元素彻底从文档流中拿出来 {position:absolute; top:25px; left:30px;} 绝对定位的元素完全脱离了常规文档流(3)固定定位
固定定位与绝对定位类似。 {position:fixed; top:30px; left:20px;} 但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。应用：
一是可以实现传统出版物上那种文字绕排图片的效果 二是可以让原来上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏。强迫父元素包围其浮动的子元素有三种方式
（1）为父元素应用 overflow:hidden （2）浮动父元素 （3）在父元素内容的末尾添加非浮动元素，可以直接在标记中加，也可以通过给父元 素添加 clearfix 类来加（当然，样式表中得需要相应的 clearfix 规则） .clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }固定宽度布局
固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到 1100像素宽。其中 960 像素是最常见的，因为这个宽度适合所有现代显示器，而且能够被 16、 12、 10、 8、 6、 5、 4 和 3 整除，不仅容易计算等宽分栏的数量，而且计算结果也能得到没有小数的像素数。流动布局
流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。在各栏宽度加大时通过为内容元素周围添加空白来保持内容居中，而且现在的导航条会在布局变窄到某个宽度时收缩进一个下拉菜单中，从而为内容腾出空间。弹性布局
弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了的感觉。转载于:https://www.cnblogs.com/YeChing/p/6336774.html
相关资源：数据结构—成绩单生成器