absolute 的containing block( 容器块)计算方式跟正常流有什么不同?

时间:2023-03-08 22:31:49

无论属于哪种,都要先找到其祖先元素中最近的 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
的行会消失,它的下面一行会补充它的位置。