CSS布局模型及定位技术的应用

CSS是一门计算机语言，它是修饰网页结构的一门计算机语言，页面的美观全凭CSS，而布局模型和定位技术是CSS中比较重要的部分，是页面布局的核心技术，不论是常见的PC端页面，还是移动端页面都离不开我们的布局模型和定位技术。

CSS包含3种基本的布局模型:

1、流动模型（Flow）；
2、浮动模型 (Float)；
3、层模型（Layer）；

一、流动模型（flow）
流动模型（Flow）是默认的网页布局模式，也就是网页在默认状态下HTML网页元素都是根据流动模型来分布网页内容的。
流动布局模型有两个比较典型的特点:
第一点：在默认状态下块状元素都会自上而下的分布，独占一行，块状元素的宽度都为100%，两个相邻的块元素会在不同行显示，常见的块状元素有：div,p,ul,ol,li,h1- h6，dl,dt,dd,table,section,nav,footer,header,article等。如下代码是流动模型下多个块元素的代码。


效果图：

第二点:在流动模型下，内联元素都会从左到右水平方向显示,常见的内联元素有：a,span,b,strong,i,em,del,img,input,textarea，mark,sub,sup等。如下代码是流动模型下多个内联元素的代码结构。

效果图:



二、浮动模型（float）
浮动模型是完全不同于流动模型的另一种布局模型，它遵循浮动规则，同样流动模型仍对浮动模型有潜在影响。为什么会有浮动模型呢？
块状元素独占一行，如果在我们的页面布局里想让两个或两个以上的块状元素并排显示，怎么办呢？设置元素浮动就可以实现这一效果。任何元素在默认情况下是不能浮动的，但可以通过CSS定义为浮动，如div、h1、P、table等元素都可以被定义浮动。如下代码可以实现两个div元素在同一行显示的效果。

效果图：

同样我们也可以同时设置两个元素右浮动来实现多个元素一行显示的效果；



效果图：



换另一种方法，我们也可以设置两个元素的一左一右浮动来实现两个或两个以上的元素在一行显示的效果；



效果图：



三、层模型（Layer）
层布局模型首先有个层的概念，像我们PhotoShop中的图层编辑功能一样，每个图层能够精确定位操作，但在页面布局里，由于页面大小的活动性，层布局模型没能受到大面积的使用。但是在页面上的局部，使用层布局模型还是很常见的。
说到层布局模型，就要说到定位的属性position。

定位属性（position）的属性值有四种:
1、默认值(position: static) 静态定位，元素出现在正常的文档流中；
2、绝对定位(position: absolute)；
3、相对定位(position: relative)；
4、固定定位(position: fixed)；

绝对定位：
如果想为元素设置层布局模型中的绝对定位，需要设置position:absolute；这条声明的作用是将元素从文档流中拖离出来，然后使用left、right、top、bottom属性相对于其最接近的一个并具有定位属性的父级包含块进行绝对定位。如果不存在这样的包含块，则相对于html根元素来做定位。
如下面代码可以实现div元素相对于html根元素向右移动150px，向下移动100px。




效果图:



如果存在一个有定位设置的父级元素，那么我们的绝对定位的元素会就会相对其最接近的一个并有定位设置的父级元素做绝对定位。
如下面代码可以实现P元素相对于div元素向右移动50px，向下移动50px。



效果图：



相对定位：
如果想为元素设置层布局模型中的相对定位，需要设置position:relative；这条声明的作用是将元素在正常文档流中偏移位置，使用left、right、top、bottom属性相对于其元素自身的以前的位置进行移动，但偏移前的位置保留不动。
如下代码实现相对于元素自身以前位置向下移动100px，向右移动100px;



效果图：



元素本身是相对以前的位置进行偏移了，但偏移前的位置保留不动，也就是说元素偏移后所空出来的位置是不允许被其它元素占据，同样偏移的元素本身还是占据自己原来的位置。
我们在相对定位的元素后边加了段落标签P，并在P标签里写入一些内容。
代码如下：



效果如下：



从效果图中可以看出，虽然div元素相对于以前的位置进行了偏移，但是div元素以前的位置还是保留着，所以后面的P标签是显示在了div元素以前位置的后面。

固定定位：
如果想为元素设置层布局模型中的固定定位，需要设置position:fixed；这条声明的作用是将元素在正常文档流脱离出来，使用left、right、top、bottom属性相对可视窗口（屏幕内的网页窗口）进行位置的偏移。所以固定定位的元素不会随浏览器窗口的滚动条滚动而变化，除非在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流的影响
如下代码实现相对于浏览器可视窗口向左移动50px，向上移动50px。

效果如下：




从效果图中可以看出，固定定位的元素相对于浏览器的可视窗口进行偏移，不会受文档流的影响，同样也不会随浏览器窗口的滚动条滚动而变化。
以上是层模型中的重要的一个属性“定位”，在层模型中各元素可能出现层叠。层叠顺序可以用z-index控制，z-index属性值越大，层的顺序越靠上。z-index属性值相同时，根据HTML的结构，靠后的元素层的顺序在上。
如下代码实现两个具有定位属性的元素的正常层叠关系：



效果如下：



如下代码实现两个具有定位属性的元素设置了z-index属性后的上下层叠关系：



效果如下：

以上是对整个布局模型进行了详细的概述，包括布局模型里涉及到的相关属性。以下是布局模型的相关案例展示：

来源：千锋HTML5