无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,
然后再判断:
1、若此元素为 inline 元素,则 containing block 为能够包含这个元素生成的第一
个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形;
2、否则,则由这个祖先元素的 padding box 构成。
如果都找不到,则为 initial containing block。
补充:
1. static(默认的)/relative:简单说就是它的父元素的内容框(即去掉 padding 的部分)
2. absolute: 向上找最近的定位为 absolute/relative 的元素
3. fixed: 它的 containing block 一律为根元素(html/body),根元素也是 initial
containing block
25.CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的?在不同浏览器下以后什么区
别?
其实 visibility 可以有第三种值,就是 collapse。当一个元素的 visibility 属性被设置成
collapse 值后,
对于一般的元素,它的表现跟 hidden 是一样的。但例外的是,如果这个元素是 table
相关的元素,例如 table 行,
table group,table 列,table column group,它的表现却跟 display: none 一样,也就
是说,它们占用的空间也会释放。
在谷歌浏览器里,使用 collapse 值和使用 hidden 值没有什么区别
在火狐浏览器、Opera 和 IE11 里,使用 collapse 值的效果就如它的字面意思:table
的行会消失,它的下面一行会补充它的位置。

absolute 的containing block( 容器块)计算方式跟正常流有什么不同?的更多相关文章

  1. IOS学习4——block代码块

    本文转载自:iOS开发-由浅至深学习block 一.关于block 在iOS 4.0之后,block横空出世,它本身封装了一段代码并将这段代码当做变量,通过block()的方式进行回调.这不免让我们想 ...

  2. block(代码块)的介绍以及使用方法和变量之间的关系

    http://blog.csdn.net/menxu_work/article/details/8762848 block(代码块)的介绍以及使用方法和变量之间的关系 block(代码块)的介绍以及使 ...

  3. ios开发 block语句块

    ios开发 block语句块 1.block 理解为匿名函数 2.block变量的定义 //定义block变量,^表示定义block //技巧:函数名左右加括号,在函数名前面在加^ void (^bl ...

  4. loadrunner提高篇-block(块)技术和参数化

    Block(块)技术 block(块)技术是应用于在一个脚本中实现不同事务.不同次数循环或不同百分比循环的情况.比如在一个脚本中,登录执行3次,查询执行1次. 使用方法如下: 1.录制一个脚本,包含2 ...

  5. 自学Aruba1.3-WLAN一些基本常识802.11n速率计算方式、802.11n及802.11AC速率表

    点击返回:自学Aruba之路 自学Aruba1.3-WLAN一些基本常识802.11n速率计算 1. 802.11n速率计算方式1.1 802.11n使用的主要技术 802.11n采用MIMO多天线技 ...

  6. tablespace(表空间) / segment(断) / extent(盘区)/ block(块)/datafile(文件)之间的关系

    tablespace(表空间) / segment(断) / extent(盘区)/ block(块)之间的关系   tablespace : 一个数据库划分为一个或多个表逻辑单位,即表空间,每个表空 ...

  7. flex布局中flex-grow与flex-shrink的计算方式

    CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...

  8. block(块级元素)和 inline(内联元素) 的区别

    block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...

  9. kubernetes 降本增效标准指南| 容器化计算资源利用率现象剖析

    作者:詹雪娇,腾讯云容器产品经理,目前主要负责腾讯云集群运维中心的产品工作. 张鹏,腾讯云容器产品工程师,拥有多年云原生项目开发落地经验.目前主要负责腾讯云TKE集群和运维中心开发工作. 引言 降本增 ...

随机推荐

  1. Java学习笔记之集合

    集合(Collection)(掌握) (1)集合的由来? 我们学习的是Java -- 面向对象 -- 操作很多对象 -- 存储 -- 容器(数组和StringBuffer) -- 数组而数组的长度固定 ...

  2. office 2013幻灯片中插入SmartArt图形时出现错误下列一个或多个文件由于包含错误而无法运行

    office 2013幻灯片中插入SmartArt图形时出现错误下列一个或多个文件由于包含错误而无法运行 系统:win8 64位 PowerPoint2013 64位 在幻灯片中插入SmartArt图 ...

  3. 把编译安装的httpd 实现服务脚本,通过service和chkconfig 进行管理

    把编译安装的httpd 实现服务脚本,通过service和chkconfig 进行管理 1 编译安装httpd 把httpd编译安装在/app/httpd/目录下. 2 在/etc/rc.d/init ...

  4. Socket 文件传输

    服务端 1.控件:TServerSocket 2.OnClientRead事件处理 procedure TMainForm.ssClientRead(Sender: TObject; Socket: ...

  5. HDU 5547 Sudoku(DFS)

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=5547 题目: Sudoku Time Limit: 3000/1000 MS (Java/Others ...

  6. Android之RecyclerView入门

    首先来实现最简单的列表展示,如图 在这个展示中,RecyclerView的作用仅限于回收和定位屏幕上的TextView,在用户滑动屏幕时,会把上一个视图回收掉,并显示下一个页面的视图,也就是回收再利用 ...

  7. python爬虫从入门到放弃(二)之爬虫的原理

    在上文中我们说了:爬虫就是请求网站并提取数据的自动化程序.其中请求,提取,自动化是爬虫的关键!下面我们分析爬虫的基本流程 爬虫的基本流程 发起请求通过HTTP库向目标站点发起请求,也就是发送一个Req ...

  8. 云游戏学习与实践(二)——安装GamingAnywhere

    安装GamingAnywhere 一.GamingAnywhere项目 GamingAnywhere是一个开源的实现云游戏的引擎,并且高效.跨平台.易扩展.可调配. GitHub地址:https:// ...

  9. 【ES6】变量的解构赋值

    1. 数组 var [a, b, c] = [1, 2, 3]; let [a, [b], d] = [1, [2, 3], 4]; 默认值生效的条件是,对象的属性值严格等于undefined. [x ...

  10. 【ECHART】实例

    1. 带timeline   datazoom的例子 <!doctype html> <html> <head> <meta http-equiv=" ...