前端学堂
学有所用

CSS基础知识

contain block

关于containing block

这部分是基础知识,需要掌握的点时width、height、padding、margin的百分比的数值是基于最近父元素的containing block 宽度计算的,但是transform的是百分比值是按照自身宽高计算。

关于containing block

标识containing block(包含块)的过程完全取决于元素position属性的值:

  1. 如果position属性是staticrelativesticky,则包含块由最接近祖先元素的内容框的边缘形成,该元素是一个块容器(例如inline-block,block或list-item元素)或建立一个格式化上下文(例如表容器,伸缩容器,网格容器或块容器本身)。
  2. 如果position属性是absolute,含块由的边缘形成填充箱,其具有最近的祖先元素的position比其他值staticfixedabsoluterelative,或sticky)。
  3. 如果position属性为fixed,则包含块是由视口(对于连续媒体而言)或页面区域(对于分页媒体而言)建立的。
  4. 如果position属性是absolutefixed,则包含块也可以由具有以下内容的最近祖先元素的填充框的边缘形成:
    1. transformperspective 除none以外的值
    2. will-change值为transformperspective
    3. filter除了none以外的值will-change值为filter(仅适用于Firefox浏览器)。
    4. contain值为paint(例如contain: paint;

注意:根元素(<html>)所在的包含块是一个称为初始包含块的矩形。它具有视口(用于连续媒体)或页面区域(用于分页媒体)的尺寸。

精心打造全新课程,欢迎吐槽!反馈宝贵意见!

在线视频课程:网易云课堂课程      思否课堂

从包含块计算百分比值

如上所述,当给某些属性指定百分比值时,计算出的值取决于元素的包含块。以这种方式工作的属性是框模型属性偏移属性

  1. heighttopbottom百分比值是基于当前所在的containing-block的height值计算
  2. widthleftrightpadding,和margin百分比值是基于当前所在的containing-block的width值计算

 

bounding box

bound box是一个元素的边界,可以通过DOM API:getBoundingClientRect和getComputedStyle来获取,这两个方法有些差别:

上面介绍了吸顶组件现在可以用css position:sticky 来实现,但是webkit内核之前有个bug,就是吸顶有1px的缝隙,可以用css hack解决。之前比较多的是通过js来实现吸顶的逻辑。

 

BFC

基本知识点,要知道浏览器布局的基本单位就是元素的BFC和IFC,边距折叠的原理,如何创建BFC和清除浮动。浮动会导致的问题是父元素高度塌陷,无法撑起父元素的高度。

精心打造全新课程,欢迎吐槽!反馈宝贵意见!

在线视频课程:网易云课堂课程      思否课堂

定位

 

布局

优先级

预处理

 

参考:

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block

 

赞(0) 打赏
一分也是爱,觉得好请我喝杯咖啡吧!前端学堂 » CSS基础知识

一分也是爱,觉得好请我喝杯咖啡吧!

支付宝扫一扫打赏

微信扫一扫打赏