无论属于哪种,都要先找到其祖先元素中最近的 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. Kafka 源代码分析.

    这里记录kafka源代码笔记.(代码版本是0.8.2.1) kafka的源代码如何下载.这里简单说一下. git clone https://git-wip-us.apache.org/repos/a ...

  2. Python如何调用新浪api接口的问题

    前言:这些天在研究如何调用新浪开放平台的api分析新浪微博用户的数据 成果:成功调用了新浪api获取了用户的一些个人信息和无数条公共微博 不足:新浪开放平台访问有限制,返回的数据着实有限,不足以分析问 ...

  3. js加强版图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. SSIM(结构相似度算法)不同实现版本的差异

    前言 最近用ssim测试图片画质损伤时,发现matlab自带ssim与之前一直使用的ssim计算得分有差异,故和同事开始确定差异所在. 不同的SSIM版本 这里提到不同的ssim版本主要基于matla ...

  5. win7-x64安装mysql5.7.11(官方zip版)

    1.下载官方安装包(http://www.mysql.com/downloads/),此zip包是没有安装器的(*.msi),也没有辅助配置的自动程序. 2.解压zip包,将文件放入指定目录,如:D: ...

  6. bzoj1041题解

    求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整数.r<=2000 000 000  这道题刚看时,就明白暴力不能解决一切.要是r^2<=20亿,还可以sqrt循环, ...

  7. React 实践项目 (一)

    React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 项目代码地址:https: ...

  8. 快速学习springMVC框架原理

    一.通过导图的方法快速去理解springmvc的原理 二.架构流程. 1. 用户发送请求至前端控制器DispatcherServlet 2. DispatcherServlet收到请求调用Handle ...

  9. PHP机器学习库php-ml的简单测试和使用

    php-ml是一个使用PHP编写的机器学习库.虽然我们知道,python或者是C++提供了更多机器学习的库,但实际上,他们大多都略显复杂,配置起来让很多新手感到绝望.php-ml这个机器学习库虽然没有 ...

  10. epii.js简约而不简单的JS模板引擎

    epii.js是什么 epii.js是一个 模板引擎,可快速实现数据与ui绑定,快速实现事件绑定,与处理,不依赖任何第三方库,仅仅8k,在native+webapp开发 和 web开发,h5微网页上均 ...