display与position之间的关系

 

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

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之间的关系

    以防自己忘记写的 网上找的 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. 【整理】JavaEE基本框架（Struts2+Spring+MyBatis三层，Struts MVC）之间的关系

    #[整理]JavaEE基本框架(Struts2+Spring+MyBatis三层,Struts MVC)之间的关系 ![关系图解](http://images.cnitblog.com/blog/84 ...

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

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

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

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

  7. silverlight Canvas、StackPanel、Grid三者之间的关系

    学习 silverlight   首先Canvas.StackPanel.Grid 博客园里看到jailu的这篇文章整理得很好 贴下来: Silverlight提供了非常灵活的布局管理系统,让程序员和 ...

  8. try catch finally return之间的关系

    一.try catch finally return之间的关系: 正在写dsoFramer的时候,同事突然说面试的时候问的一个问题,catch和return那个先执行,我瞬间迷茫了,然后整理了整理,稍 ...

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

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

随机推荐

  1. Postman工具——Pre-Request Script、Tests

    这篇是介绍 Postman 的最后一篇,也就是最后两个用法:Pre-Request Script 和 Tests ,它支持以嵌入脚本的方式动态准备测试数据,并根据业务需求设计测试用例. 一.Pre-R ...

  2. 51nod 1189 算术基本定理/组合数学

    www.51nod.com/onlineJudge/questionCode.html#!problemId=1189 1189 阶乘分数 题目来源: Spoj 基准时间限制:1 秒 空间限制:131 ...

  3. Mysql时间戳函数和ip转换函数

    Mysql中对于unix时间戳的转换还是挺方便的, 1.转换为时间戳 select unix_timestamp('2013-07-15 10-06-07') 如果参数为空,则为当前时间 2.转换为时 ...

  4. scnaf()读入字符串需要注意的地方

    #include<iostream> #include<cstdio> using namespace std; int main() { ],cch[]; int a; ci ...

  5. 使用NSUserDefaults保存自定义对象（转）

    转自http://zani.iteye.com/blog/1431239 .h文件 #import <Foundation/Foundation.h> @interface MyObjec ...

  6. BZOJ4930: 棋盘

    BZOJ4930: 棋盘 https://lydsy.com/JudgeOnline/problem.php?id=4930 分析: 基本上就是游戏那道题加上费用流了,所以没啥好说的. 记得两边都是拆 ...

  7. LeetCode 251. Flatten 2D Vector

    原题链接在这里:https://leetcode.com/problems/flatten-2d-vector/ 题目: Implement an iterator to flatten a 2d v ...

  8. karma

    一个简单的工具,允许你在多个浏览器中执行JavaScript代码. Karma的主要目的是使您的测试驱动开发变得简单.快速和有趣. 我什么时候该用Karma? 您希望在真正的浏览器中测试代码. 您希望 ...

  9. Python List reverse()方法

    reverse() 函数用于反向列表中元素,参数 NA,该方法没有返回值,但是会对列表的元素进行反向排序,原来的列表被改变,生成新的列表. 例子:list1 = ['Google', 'Runoob' ...

  10. BZOJ4255：Keep Fit!

    浅谈\(K-D\) \(Tree\) 题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=4255 莫队加\(kd\) \(tree\),直接 ...