CSS脱离文档流

原创 2017年09月10日 20:31:10

脱离文档流
也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。,其他盒子与其他盒子内的文本都会无视它。
float
这里写图片描述
如上图 div2实际被div1遮盖住了 我们可以将div2显示出来
这里写图片描述
原因可看层叠上下文
div2的内容(文本及图片)依然为div1元素让出位置,所以默认往下写也就到了div3所在的区域,但是其文本宽度依然受到其父div的宽度显示(2222连续写如英文单词一样默认不会拆开,中文会拆开换行)
position:absolute
这里写图片描述
div2和其内容无视了div1
position:relative
这里写图片描述
relative只是基于其本身位置发生偏移,会保留其原来的位置
absolute是基于其父亲(position元素)发生偏移,不保留原来的位置

float
这里写图片描述
这里写图片描述
float也类似与正常的布局 线性向下

版权声明:本文为博主原创文章,未经博主允许不得转载。

VUE双向绑定实现

Git基本操作

本人到公司所接触的git操作(都是一些基础的小白操作)

CSS之脱离文档流

脱离文档流脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的...

CSS浮动框是否脱离文档流?

CSS浮动框是否脱离文档流? http://www.th7.cn/web/html-css/201401/17089.shtml

CSS学习笔记7:如何脱离标准文档流之浮动

标准流做不出网页:因为能并排的不能改宽高。所以,要脱离标准流。使元素脱离标准文档流的方法之一就是浮动,浮动也是css布局用的最多的属性。...

一天搞定CSS: 浮动(float)及文档流--10

一天搞定CSS: 浮动(float)及文档流--10

[zz]css绝对定位、相对定位和文档流的那些事

前言 http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html 接触html、和css时间也不短了,但每次用div+css布局的时...

css基础2-标准文档流、透明度、禁止拖动textarea、去掉input外边框、图片默认边框

padding区域有背景颜色。给一个盒子添加背景颜色时,padding区域也有背景颜色,也就是说background-color: red;将填充所有border以内的区域。 border边框 b...

css绝对定位、相对定位和文档流的那些事

原文 http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html css绝对定位、相对定位和文档流的那些事 前言     接触ht...

CSS布局之文档流、块级元素与内联元素

使用css必须要知道的两个概念。 文档流 将窗体自上而下分成一行一行,并在每行中按从左至右的顺序排放元素,即为文档流,每个非浮动块级元素都独占一行,浮动元素则按规定浮在行的一端, 若当前行容不下...
  • lllljz
  • lllljz
  • 2012年11月14日 16:38
  • 466
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS脱离文档流
举报原因:
原因补充:

(最多只允许输入30个字)