以防自己忘记写的 网上找的

positon 与 display 的相互关系

元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。

relative : 原来是什么类型的依旧是什么类型。

absolute | fixed ： 元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位

<span style=”position:absolute; width:100px; height:50px;”>span</span>这是完全正确的，

<span style=”position:absolute; display:block; width:100px; height:100px;”>span</span>，这里的display:block就是多余的了。

position 与 float 的相互关系

一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流(这是自己起的名字，呵呵)”。

但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

position: relative和position: absolute 都可以改变元素在文档中的位置，设置position: relative 或 position: absolute都可以让元素激活left、top、right、bottom 和 z-index 属性。

网页虽然看起来是平面的二维结构，但它其实是有z轴的，z轴的大小由z-index 控制，默认情况下，所有元素都是在z-index: 0 这一层的，这就是文档流。设置position: relative 或 position: absolute会让元素浮起来（就像游戏中的概念-多层图层），也就是z-index大于0，它会改变正常情况下的文档流。不同的是position: relative 会保留自己在z-index:0 层的位置，但是它的实际位置可能因为设置了left、top、right、bottom值而偏离原来在文档流中的位 置，但对其他仍然在z-index:0层的元素位置不会造成影响。而position: absolute会完全脱离文档流，不再在z-index:0层保留占位符，其left、top、right、bottom 值是相对于自己最近的一个位置–设置了position: relative 或 position: absolute的祖先元素的，如果祖先元素都没有设置position: relative 或 position: absolute，那么就相对于body元素。

除了position: relative 和 position: absolute，float也能改变文档流，不同的是，float属性不会让元素“上浮”到另一个z-index层，它仍然让元素在z-index:0 层排列，float不像position: relative 和 position: absolute那样，它不能通过left、top、right、bottom属性精确地控制元素的坐标，它只能通过float:left 和 float:right 来控制元素在同层里“左浮”和“右浮”。float会改变正常的文档流排列，影响到周围元素。

另一个有趣的现象是position: absolute 和 float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），只要设置了position: absolute 或 float中任意一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。就算我们显式地设置 display:inline或者display:block，也仍然无效（float在IE6 下的双倍边距bug就是利用添加display:inline来解决的）。值得注意的是，position: relative却不改变display的类型。

1、position 对 float 的影响：float 可以说是定义同辈元素之间的位置关系，浮动元素相对于父元素，其位置的定义是确定不变的的：基于position:static/relative时的位置，向左侧或右侧靠近(一个可能的错误的认识是，浮动元素会向左上角或右上角浮动)，
因此，position:static 和 position:relative 与 float 的效果可以叠加， 
但 position:absolute、position:fixed 这两个定位属性依赖于自身元素之外的参照，将使 float 的效果无法表现出来。

2、浮动元素对文本的影响：浮动概念的基础是图文混排，因此同辈元素的在排版时如果浮动元素与非浮动元素之间发生覆盖，无论是谁覆盖谁，非浮动的元素内的文字将会被挤走，如下例：

.elm{ width:100px; height:50px;background:green; border:1px solid red;   }
.lf{float:left; }

float
no float，被挤走

3、浮动元素对父元素的影响：浮动元素的父元素丢失 block 高度，即使定义了高度，也无法影响其同辈浮动元素及其浮动的子元素的布局，默认情况下，如果父元素没有定义高度，则父元素的内容会撑开父元素，达到自适应 block 高度的效果，浮动元素无法撑开其父元素的block 高度。

4、浮动元素对自身的影响：浮动元素将按 inline-block 形式布局（haslayout），即使将他设置为 display:inline;，因此，默认宽度自动扩展为100%的元素浮动之后，宽度由元素内容撑大，原来没有高宽属性的元素也变得可以定义高宽；如果出现重叠，浮动元素将叠加在非浮动的同辈元素之上（像是具有更大的z-index值）；

5、display, position, float 之间的相互关系：
1. 如果display等于none，则用户端必须忽略position和float。在这种情况下，元素不产生盒子。
2. 否则，如果position等于absolute，则display与float皆强制为none(list-item保持不变)。盒子的位置由边界偏移量确定。
3. 否则，如果float不等于none或该元素是根元素，则display强制为block(list-item保持不变)。
4. 否则，使用指定的display属性。
 
1、绝对定位完全脱离普通流，因此绝对定位元素无法跟普通流搭建交互关系（普通流能影响绝对定位，绝对定位不影响普通流），这样来说，在一些自适应布局场 景中，绝对定位就存在一些缺陷（需要更多的限制因素，非常不灵活）。如果希望用绝对定位实现你说的 float 或 inline-block 同样的效果，这个时候一般是不推荐用 绝对定位。
2、对于浮动，这个属性一般不是用来做布局的（偏向于排版），但是CSS2.1好像也就这个属性 能够满足一些特定需求，所有才有了浮动布局。浮动相对绝对定位好处是，它默认可以影响行内布局，通过 clear 清除浮动也可以影响 块布局，可以与普通流建立良好的交互。 而且浮动本身是脱离普通流的，在元素的水平定位上相比于 inline-block 更加灵活多变， 而 inline-block 的水平定位则更加有序。
3、inline-block，这个属性也不是用来布局的（偏向于排版），但是在 CSS3 普及之前，它的用处也很大。该元素的盒子在行框中进行格式化，其顺序与源HTML中的顺序一一对应。 同时该元素不脱离普通流，这比浮动来说有更大的优势，它可以跟普通流自然交互，而不必要借助去其他属性。而且相比浮动，相邻元素间的垂直对齐方 式，inline-block 比 float 更加灵活， float 格式化时有一条规则，就是越高越好（因此常常表现为顶端对齐），而 inline-block 在行内格式化，拥有更灵活的垂直对齐方式。应用：
如果使用了浮动，清除浮动就会成为你的副作用，而且如果你没有良好的HTML/CSS 结构的话，清除浮动是一个很复杂的事情。
inline-block 虽然避免了清除浮动的事情，但是会有另一个副作用，即空白符问题。这个问题的解决方案也令人十分蛋疼，因为毕竟 inline-block 不是布局属性，它仅仅是 行内级块容器盒子。 同时，作为IFC环境中的格式化问题，垂直居中、行高等问题也有可能是一个副作用。
 
其他：
其实在 CSS2.1中，利用表格 table 布局也是非常强大的方法。表格布局在等高，同列等宽对齐，垂直居中对齐上面的优势是其他方法很难媲美的。甚至于在自适应场景中，表格布局的灵活性也非常出众。
 
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;
display: inline-block; 有些时候可以替代float实现相同的效果.
position: absolute|relative; 要配合top,left等定位;举例:
<html>
<body>
<style type=”text/css”>
div {border: 1px solid red; margin: 1px;}
div div {border: 1px solid blue;}
</style>
<div>
<div style=”float: right;”>Float 1</div>
<div style=”float: right;”>Float 2</div>
<div style=”clear: both; border: 0;”></div>
</div>
<div style=”text-align: right;”>
<div style=”display: inline-block;”>Inline Block 1</div>
<div style=”display: inline-block;”>Inline Block 2</div>
</div>
<div style=”position: relative;”>
<div style=”position: absolute; right: 0px;”>Position 1</div>
<div style=”position: absolute; right: 50px;”>Position 2</div>
</div>
</body>
</html>表现:
上面的是float, 中间的是inline-block, 下面的是position, 可以看出:
1. 当居右(右浮动)时, float是按先后顺序来的, 先写的排子右边; 而inline-block则保持左右顺序不变.
2. 在部分浏览器中(以上是在的firefox中), 空行或空格会影响到inline-block, 却不会影响到float的block.
3. position只能配合left,right来定位, 如果去掉则重叠在一起; 不能借助clear等自动扩展容器.
4. 他们都有共同点, 如果包裹的是行级元素, 则宽度可以按内容宽度自适应.

使用场景:
照片墙, 选项卡, 导航条等可以使用inline-block或float, 推荐inline-block, 但需要注意浏览器兼容, 用float记得习惯性的使用clear.
Tip等提示, 悬浮窗, 遮罩等, 建议使用position.

display与position之间的关系的更多相关文章

  1. 【总结整理】display与position之间的关系【较完整】（转）

    display与position之间的关系   以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的 ...

  2. 505，display，float，position之间的关系（有疑问）

    (display属性设置元素如何显示) 如果display取值为none,那么position和float都不起作用,这种情况下元素不产生框 否则,如果position设置框是绝对定位,float的计 ...

  3. NGUI的localPosition和Position之间的关系

    假设有子节点为child, 父节点为parent, 且都是Transform类型. 则: child.localPosition = (child.position - parent.position ...

  4. 【20】display,float,position的关系

    [20]display,float,position的关系 如果display为none,元素不显示. 否则,如果position值为absolute或者fixed,元素绝对定位,float的计算值为 ...

  5. [转] valuestack,stackContext,ActionContext.之间的关系

    三者之间的关系如下图所示: ActionContext  一次Action调用都会创建一个ActionContext  调用:ActionContext context = ActionContext ...

  6. Unity3D 中 Generic 动画导入设置和 Root Motion 之间的关系

    2条评论 Unity3D 的 Mecanim 动画系统可以直接复用 3DS MAX 中制作的动画文件中的位移,这个就是通过 applyRootMotion 来达成的,我们只需要在使用 Animator ...

  7. valuestack,stackContext,ActionContext.之间的关系

    者之间的关系如下图所示: relation ActionContext 一次Action调用都会创建一个ActionContext 调用:ActionContext context = ActionC ...

  8. CSS布局 ——从display，position， float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  9. CSS学习笔记五：display，position区别

    最近常用css,经常在位置方面使用导display与position这两个属性,所以想要弄清楚它们之间的意思. 一.display 作用是规定元素应该生成的框的类型.意思是定义建立布局时元素生成的显示 ...

随机推荐

  1. 每天一个Linux命令（11）nl命令

    nl命令读取 file 参数(缺省情况下标准输入),计算输入中的行号,将计算过的行号写入标准输出. 其默认的结果与cat -n有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 ...

  2. log4net性能小探

    初步测试了Log4性能.Appender架构如下. 一般客户端,使用FileAppender,把Log记录在本地磁盘. <lockingModel type="log4net.Appe ...

  3. 介绍几款Web服务器性能压力测试工具

    一.http_load 程序非常小,解压后也不到100K http_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载. 但是它不同于大多数压力测试工具,它可以以一个单一的进程运行,一般 ...

  4. 命令行 -- 命令"%cd%"

    1. @echo off echo 当前盘符:%~d0 echo 当前盘符和路径:%~dp0 echo 当前批处理全路径:%~f0 echo 当前盘符和路径的短文件名格式:%~sdp0 echo 当前 ...

  5. tkinter比较常用的组件

    1.输入框组件 输入框(Entry)用来输入单行内容,可以方便地向程序传递用户参数.这里通过一个转换摄氏度和华氏度的小程序来演示该组件的使用. import tkinter as tk def btn ...

  6. javascript 数组 去重

    javascript数组去重有如下 方法: 一) 利用 数组中的 indexOf判断  例如: Array.prototype.unique=function(){ var n=[]; for(var ...

  7. 一个可以拖拽的div

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. BEC listen and translation exercise 42

    These were built for the workers towards the end of the eighteenth century, and they are still furni ...

  9. MFC动态创建

    每个继承自CObject的对象并不会有与之对应的CRuntimeClass与之对应,除非使用了宏DECLARE_DYNAMIC\DECLARE_DYNCREATE\DECLARE_SERIAL. 这三 ...

  10. Execl to HTML

    /************************************************************************* * Execl to HTML * 说明: * 这 ...