position+float+display一点理解

==感觉不算是原创把，主要是以博客一为例，好多都是他的原话，原博主真是牛逼，有些例子自己重写了，然后有些话写成了自己理解的话，然后又参考了几个其他的文章，不知道对不对，希望看到问题多多指点，多谢了

参考博文：

[1]http://www.cnblogs.com/coffeedeveloper/p/3145790.html

[2]http://www.cnblogs.com/WhiteCusp/p/3365543.html

[3]http://www.zhangxinxu.com/wordpress/?p=1287

一、盒子模型

在博客1中提到的盒子模型，里面说到了盒子模型分为了两种，一种是块状元素，一种是行内元素，最明显的例子就是html中的一个div，一个span，当然前提是你对这俩元素没加其他的一个比如display或者是float等的属性，这些会改变他们的显示方式，在后面将会提到。

       博客1中说到块状元素（Block）和行内元素（Inline）与Display属性中的inline、block两个属性值并不等同，盒子模型中的Inline、Block类似于是Display属性的父类，例如：Display属性中的list-item属性值是属于块状（Block）类型的。

       他还说了两种盒子模型的区别，分别如下：

(1) 块状（Block）类型的元素可以设置width、height属性，而行内（Inline）类型设置无效。

(2)块状（Block）类型的元素会独占一行（直观的说就是会换行显示，无法与其他元素在同一行内显示，除非你主动修改元素的样式），而行内（Inline）类型的元素则都会在一行内显示。

(3)块状（Block）类型的元素的width默认为100%，而行内（Inline）类型的元素则是根据自身的内容及子元素来决定宽度。

如果你不改变元素的默认样式前提下，元素在HTML的普通流中会“占用”一个位置，而“占用”位置的大小、位置则是由元素的盒子模型来决定。因此，在后续讲的Position、Float属性是否会使元素脱离这个普通流是一个关键点

二、关于position

里面有四个属性：static，relative，absulute，fixed（ps：今天面试竟然全问这个了，真是幸运）

2.1 static，relative

对于static和relative属性，他是不会改变元素在普通流的默认位置。比如relative，他只是在视觉上发生了偏移，原来的默认文档的占位保持不变，可以看一个例子，下面有三个span，排着一排，当中间那个span，定义下position:relative ；top：20px；就是偏移出原来位置top20个像素点。

还有一点比较重要的就是，这个position属性是不会改变元素的display属性，所以那些行内元素是不会受到width控制的，他的大小是由元素内部的内容来决定的。

2.2 absolute属性

      所谓的absolute属性就是绝对定位，绝对定位是以它往上查找节点树中，相对于它的第一个 position 值不为 static 的父元素而言的。如果在它的父元素链上没有满足条件的父元素，那么绝对定位元素则会相对于文档窗口来进行定位。

2.2.1正常情况

下面按照博文1中的例子再来试一次，首先对于如下这么一段代码，页面上显示的是

<div style="background: yellow">        A        <div style="background: #81b6ff;margin:10px;">            A - 1            <div style="background: #b6ff00;margin:10px;">                A - 2            </div>        </div></div>

2.2.2 情况1body

首先将A-2属性加一个position:absolute;left:0px;top:0px;为了让效果明显点，去掉aA-2的margin，改为如下

<div style="background: yellow">        A        <div style="background: #81b6ff;margin:10px;">            A - 1            <div style="background: #b6ff00;position:absolute;left:0px;top:0px;">                A - 2            </div>        </div></div>

这就是因为向上查找有relative或者absolute属性的节点找不到的时候，以body作为参考的方法

2.2.3 情况2relative

将A-1的position设置为relative，为了效果明显点，给A-1后面添加了几个11代码如下

<div style="background: yellow">        A        <div style="background: #81b6ff;margin:10px;position:relative;">            A - 1111111111111111111111            <div style="background: #b6ff00;position:absolute;left:0px;top:0px;">                A - 2            </div>        </div>    </div>

往父节点开始找，找到了relative的节点，同理设计A为position：relative结果如下

设置为position：absolute属性的总结：

1． 会脱离正常的文档流，会使元素的display属性变为block，可以看下面的代码来证明

<div style="background: yellow;position:absolute;">        A        <div style="background: #81b6ff;margin:10px;">            A - 1111111111111111111111            <div style="background: #b6ff00;position:absolute;left:0px;top:0px;">                A - 2            </div>        </div></div>231232131231313333333333333333333

显示的效果是

首先他脱离了正常的文档流，所以这些333的符号会被这个所覆盖在下面，可以这么理解，原来这个div的东西在从左上角开始布局的，现在由于脱离了文档流，333也是从左上角开始布局的，他们如果div不设置偏移的话，起点计算的位置应该是一样的

2 元素设置了position: absolute之后，他的宽度会变成自适应内部元素的宽度，我的个人理解这个时候的display就类似与inline-block的感觉，就是拥有block的可以设计宽度的能力，但是又受内容的宽度影响，即不会是占用一行的空隙,这些都可以在上面的例子中得到证实

2.3 fix属性

在很长的时间里，这个属性值因为兼容性问题，并没有得到非常广泛的应用（IE6未实现该属性值）。fixed和absolute有很多共同点：

1.     会改变行内元素的呈现模式，使display之变更为block。

2.     会让元素脱离普通流，不占据空间。

3.     默认会覆盖到非定位元素上。

fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

三、关于float

1.一个元素用了float之后，他将会脱离普通流，元素的display属性将会变为block

2.浮动的元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）

3.1 与position的兼容性

（1）元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。

看如下代码

<div style="position:relative; float:left; left:50px; top:10px;background: #b6ff00;">111</div>

最后效果

（2）元素同时应用了position: absolute及float属性，则float失效。