CSS的四大布局层级 和 HTML标签的‘生态系统’（一）------总述

　　事实上，网页布局只要能懂得 CSS 的四大布局层级 和 HTML 标签的 ‘生态系统’ ，那么布局就会慢慢从脑力劳动，逐渐过渡为体力劳动了。下面，我将详细的解释一下，何为 CSS 的四大布局层级，何为 HTML 标签的 ‘生态系统’。

　　就我看来，初学时，布局基本可以分为四大层级，在布局一张页面时，我们不能单纯的认为他是一张平面，除了横向和竖向，还应该把页面想象成一个有纵深的立体形状。从下到上依次是：背景层-文档层-浮动层-定位层。

　　背景层：背景层是最底层，背景层没有纵深，紧贴着元素表面，纵深可以想象为0。属性是background，background是一个缩写属性，展开后有background-color、background-image、background-position、background-repeat、background-attachment、background-size、background-origin、background-clip等属性。

　　文档层：贴着背景层的就是文档层，如果将背景层比作地面，那么文档层就是直接放到地上的物体，文档层有一个规则--所有的内部文字和元素都是遵循从左到右，从上到下的顺序排列的。这里要说明的是img标签引入的图片和背景图片是有区别的，img标签引入的图片，在页面中鼠标左键拖拽可以拖出，但是背景图片则不可以。

　　浮动层：文档层中如果标签是块元素，则一个元素独占一行，所以不会横排，这时往往会用到float这个属性，它可以破坏文档流的规则，让原本不能横排的块元素横排，使用了浮动属性的元素，我们可以理解为层级是0.5层，因为，未加浮动的元素可以进入到浮动元素的下方，这个下方指的不是竖向的上下，而是纵深的上下，但是，文本内容和img插入的图片则不会进入到浮动元素的下方。

　　定位层：定位属性是position，从布局的角度来看，常用的值有三种：fixed、absolute、relative。有了定位属性的元素会额外增加五个属性：top、left、right、bottom、z-index。其中z-index是一个描述纵深层级的属性，四个方向属性是描述元素位置的属性。通过这五个属性，我们可以将一个定位元素放入到页面中的任意一个位置。

　　至于HTML标签的“生态系统”这个说法，是偶尔有一次听到一个大牛描述时说起的，意思是，每一个可以放入内容的标签都是一个完整的“生态系统”，即每一个元素中都有以上的四个层级，而且，不同元素中的对应层级之间，在一般情况下，除了定位层外，几乎不会对别的元素的层级产生影响。

　　对于四个层级和生态系统，将会在后面几篇文章中详细阐述。