CSS三种定位模型浅谈

        网页有很多布局方式，比如浮动定位（float），绝对定位（fixed）,相对定位（relative）等。初学的时候感觉这些定位方式云里雾里的，最近总结了一下这些定位方式，分享一下吧~

       CSS规定的定位模型有三种，分别是流动模型、浮动模型及层模型。下面分别介绍这三种定位模型。

一、流动模型（Flow）

       流动模型是网页默认的布局模式，由块级元素和行级元素构成，从上到下，从左到右，输出文档内容。块级元素的特点是从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行。常见的块级元素有div，ul，li，dl，dt，p，form。行级元素的特点是能在同一行内显示，不会改变HTML文档结构，常见行级元素有span，strong，img，input。

二、浮动模型（Float）

       CSS中的第二种定位模型是浮动定位，通过设置float属性实现，能够实现横向多列布局（横向两列，横向三列等）。Float属性有3个属性值：left--左浮动，right--右浮动，none--不浮动。浮动定位的特点有：

        1. 元素会左移或右移，直至触碰到容器为止。

        2. 设置了浮动的元素，元素脱离标准文档流。

        3. 当元素没有设置宽度而设置了浮动属性，元素的宽度随内容的变化而变化。

        4. 当元素设置浮动属性后，会对相邻的元素产生影响（指紧邻后面的元素）。

        元素设置浮动属性后会影响其后紧邻元素的布局，这也是为何初学时我自己设置了浮动布局后整个页面出现了不可控变动的原因。为了清除浮动属性对紧邻元素造成的影响，可以对受到浮动影响的标签进行如下设置：

       1. 设置clear属性：常用clear：both（clear：left或者clear：right）

       2. 设置width：100%（或固定宽度）+overflow：hidden

       通过设置float属性，可以使纵向排列的块级元素横向排列，从而实现横向两列、横向三列以及横向多列布局，之后可以通过设置margin属性来设置两列之间的距离。前一篇博客中的导航栏navbar就使用了这种方法。

三、层模型（Layer）

       层模型是CSS中的第三种定位模型，通过设置position属性来实现，能够实现横向多列布局及较为复杂的定位。绝对定位有3种定位形式：相对定位(relative)、绝对定位（absolute）和固定定位（fixed）。

       如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），相对于自身原有位置进行偏移，可以通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动，这就造成了遮盖其他元素的可能。

      如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，元素脱离标准文档流，通过使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

      fixed表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

      组合使用absolute和relative可以实现元素可不可以相对于其它元素进行定位，如设置box2相对于box1定位，即box1为box2的父元素。设置父元素box1相对定位：position:relative;

     设置子元素绝对定位：position:absolute;即可设置box2相对于box1的布局。

    CSS定位的三种模型介绍到此结束~