文档流:也就是我们通常看到的由左到右、由上而下的元素排列形式，在网页中每个元素都是默认按照这个顺序进行排序和显示的.

脱离文档流:元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态(可以理解为漂浮在文档流的上方).脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间.另外,行内元素脱离文档流后变成块级元素,支持宽和高了.

脱离文档流的几种方法:

1.绝对定位(absolute)

2.固定定位(fixed)

3.浮动(float)

HTML文档流和脱离文档流的更多相关文章

  1. 【H5疑难杂症】脱离文档流时的渲染BUG

    BUG重现 最近机票团队在一个页面布局复杂的地方发现一个BUG,非常奇怪并且不好定位,这类问题一般最后都会到我这里,这个问题是,改变dom结构,页面却不渲染!!! 如图所示,我动态的改变了dom结构, ...

  2. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  3. float的元素脱离文档流，但不完全脱离，只是提升了半层；

    float的元素脱离文档流,但不完全脱离,只是提升了半层:

  4. html/css 关于脱离文档流的几种情况

    所谓的文档流 顾名思义就是按照顺序流下来,指的是html元素从上往下 从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一 ...

  5. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  6. css脱离文档流

    作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  7. 脱离文档流两操作，float和position:absolute的区别

    文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...

  8. float之脱离文档流

    所谓的文档流:指的是元素在排版过程中,元素自动从左到右,从上到下的顺序排列. 脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位 只有绝对定位 ...

  9. CSS脱离文档流&浮动

    什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...

随机推荐

  1. linux运维、架构之路-nfs网络文件系统

    一.nfs介绍  NFS是Network File System的缩写,是网络文件系统,它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录,主要存储用户上传的图片附件等信息. ...

  2. Linux内核设计与实现 总结笔记（第十二章）内存管理

    内核里的内存分配不像其他地方分配内存那么容易,内核的内存分配不能简单便捷的使用,分配机制也不能太复杂. 一.页 内核把页作为内存管理的基本单位,尽管处理器最小寻址坑是是字或者字节.但是内存管理单元MM ...

  3. POJ 1011 Sticks（搜索 && 剪枝 && 经典）

    题意 : 有n根木棍(n<=64),它们由一些相同长度的木棍切割而来,给定这n根木棍的长度,求使得原来长度可能的最小值. 分析 : 很经典的深搜题目,我们发现答案只可能是所有木棍长度总和的因数, ...

  4. HDU 4027 Can you answer these queries? (线段树成段更新 && 开根操作 && 规律)

    题意 : 给你N个数以及M个操作,操作分两类,第一种输入 "0 l r" 表示将区间[l,r]里的每个数都开根号.第二种输入"1 l r",表示查询区间[l,r ...

  5. Go简易分布式对象存储 合并文件的所有分块为一个文件

    项目 项目地址: https://github.com/Draymonders/cloud 欢迎大家Watch or Star 缘由 由于项目中对大文件进行5MB为一个分块上传(多线程,提升上传效率) ...

  6. Leetcode 9. Palindrome Number（水）

    9. Palindrome Number Easy Determine whether an integer is a palindrome. An integer is a palindrome w ...

  7. Bellman-ford算法与SPFA算法思想详解及判负权环（负权回路）

    我们先看一下负权环为什么这么特殊:在一个图中,只要一个多边结构不是负权环,那么重复经过此结构时就会导致代价不断增大.在多边结构中唯有负权环会导致重复经过时代价不断减小,故在一些最短路径算法中可能会凭借 ...

  8. git 指定从其他分支拉取commit

    git cherry-pick commit-id  (github 上的短号)

  9. ASYNC_NETWORK_IO等待事件和调优

    测试反应测试数据库整体出现hang的情况,检查对应的等待事件,发现大量的resource_semaphore等待事件, 查看内存占用情况: ​SELECT  *  FROM    sys.dm_exe ...

  10. 高通平台msm8916修改开机logo【原创】

    经过两天的奋战终于把开机logo给搞定了啊. 首先修改开机logo要从哪里入手呢?先分析一下源码看看. ---> void display_image_on_screen() { struct ...