position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index。PS的图层效果就是position: absolute。

float也会导致元素脱离文档流,但还在文档或容器中占据位置,把文档流和其它float元素向左或向右挤,并可能导致换行。图片的文字环绕布局效果就是float。

inline-block不脱离文档流,将block元素当作大型字符嵌入文档流内,类似于img或者input默认效果。

作者:Ivony
链接:http://www.zhihu.com/question/20821569/answer/16294014
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

position:absolute、float、display:inline-block 区别的更多相关文章

  1. float和position:absolute脱离文本流的区别

    float和position:absolute脱离文本流的区别原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏展开 文档流:将窗体自上而下分成 ...

  2. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  3. 【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度

    postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解. 引用下曹刘阳写的<编写高质量代码-web前端开发修炼之道>一书中看到的一句话:position:abs ...

  4. 前端之旅HTML与CSS篇之block与inline的区别

    display:block;和display:inline;的区别block元素特点: 1)处于常规流中时,如果width没有设置,会自动填充满父容器 2)可以应用margin/padding 3)在 ...

  5. CSS position:absolute浅析

    一.绝对定位的特征 绝对定位有着与浮动一样的特性,即包裹性和破坏性. 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度:而绝对定位的元素高度和宽度都没有了. 请看下面代码: <!DOCT ...

  6. Css中position、float和clear整理

    Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", ...

  7. position与float

    position:fixed/absolute和float的关系:元素设置position:absolute / fixed后,float属性是没有效果的.对于position: absolute元素 ...

  8. 关于display的属性:block和inline-block以及inline的区别,float相关说明

    首先是block和inline的区别,说通俗点block就是让其形成块级元素,而且其前后都会有换行符:而inline的话就是让元素设置为内联样式(对其设置的宽高都没有什么卵用,不产生效果,但是颜色效果 ...

  9. position:absolute和float会隐式的改变display类型

    position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让 ...

随机推荐

  1. Android studio工具介绍

    区域1介绍 这个区域是运行和调试相关的操作. 1.编译2中显示的模块                      2.当前项目的模块列表            3.运行2中显示的模块           ...

  2. mm/vmalloc.c

    /* *  linux/mm/vmalloc.c * *  Copyright (C) 1993  Linus Torvalds */ #include <asm/system.h>#in ...

  3. php部分---创建连接数据库类

    class DBDA { public $host="localhost"; public $uid="root"; public $pwd="123 ...

  4. js封装的方法

    1.JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦.通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置. 2.JS封装的方法有函数方式.对象的方式.闭包的方式. 举 ...

  5. ecshop教程:重置后台密码MD5+salt

    ecshop密码加密方式: MD5 32位+salt,简单来说就是明文密码用MD5加密一次,然后在得到的MD5字符后边加上salt字段值(salt值为系统随机生成,生成以后不再改变)再进行一次MD5加 ...

  6. lua的栈

    lua的栈是从栈底到栈顶: lua_pushstring(L, "test1");lua_pushstring(L, "test2");lua_pushstri ...

  7. sharedPreference

    http://blog.csdn.net/yong199105140/article/details/8425247 SharedPreferences 分类: Android2012-12-24 1 ...

  8. Zerojudge解题经验交流

    题号:a001: 哈囉 背景知识:输出语句,while not eof 题号:a002: 簡易加法 背景知识:输出语句,while not eof,加法运算 题号:a003: 兩光法師占卜術 背景知识 ...

  9. startssl

    Validation Success You have successfully authenticated domain "xxx.com.cn".You will be abl ...

  10. ORACLE 10G 闪回建议

    Flashback Tips The following tips and restrictions apply to using flashback features. Flashback Tips ...