前端包含块你知道?

包含块,在前端开发中有着很重要的地位,很多内容的计算都离不开包含块,但是在学习前端内容的时候又会被忽略,下面我们来介绍一下。

为何会总结包含块呢

最近突然用到了offsetLeft, offsetTop属性,他们表示当前元素与offsetParent获取到的元素的偏移距离。我一直以为offsetParent获取的元素是当前元素的包含块元素。查阅一些资料和写一些demo才发现不是这样的。

offsetParent返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素(相对定位也可以,除了静态定位不行,其他定位都行)或者最近的 table, td, th, body 元素。

注意offsetParent获取的并不是元素的包含块。需要严格按照他的定义来。防止和包含块搞混淆。 如果获取的是包含块,那么下面p.offsetParent就是div了,而不是body。

xml 复制代码
js
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    div {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      margin: 30px;
    }

    p {
      margin: 20px;
      width: 20px;
      height: 20px;
      background: #888;
    }
  </style>
</head>
<body>
  <div>
    <!-- offsetLeft 51 包含块是body ,可以通过offsetParent获取-->
    <p></p>  
  </div>
</body>

包含块

一个元素的尺寸和位置经常受其包含块(containing block)的影响 。以前写过一篇文章 css单位%在不同属性中的依据计算

包含块就是这个元素最近的祖先块元素的内容区域(除了定位元素,其他的都是最近的块级父元素)

需要注意一下absolute, fixed定位的一些父元素非定位的特殊情况,例如transform等。其实这种情况也是定位偏移的参考,和父元素定位的情况是一样的。以前我们总是说"子绝父相",但是现在也可以使用下面这些方式让绝对定位的元素作为偏移的参考了。

xml 复制代码
js
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    div {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      margin: 30px;
      /* transform: translate(0); */
    }

    p {
      width: 20px;
      height: 20px;
      background: #888;
      position: absolute;
      left: 30px; 
    }
  </style>
</head>
<body>
  <div>
    <p></p>  
  </div>
</body>

以前在mdn上只看见了fixed定位中当元素祖先的 transformperspectivefilterbackdrop-filter 属性非 none 时,偏移量将参考该祖先元素。但是不知道absolute定位也有这种效果,对于祖先元素设置了这些属性。一直以为只有祖先元素设置了定位,当前绝对定位元素才会参考祖先元素偏移。

总结

经过这次简单总结,搞清楚了几件事情。

  • 包含块如何查找。除了定位元素,包含块都是当前元素最近的块级祖先元素。
  • offsetParent如何查找。设置了任何定位的祖先元素或者最近的 table, td, th, body 元素
  • absolute定位元素还可以参考设置了 transformperspectivefilterbackdrop-filter 属性非 none 时祖先元素定位。
  • 元素的位置和尺寸设置为百分比时,例如 width, height, padding, margin,绝对定位元素的偏移值,这些值的计算值,就是通过元素的包含块计算得来。

往期年度总结

往期文章

专栏文章

相关推荐
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
趣多多代言人1 小时前
从零开始手写嵌入式实时操作系统
开发语言·arm开发·单片机·嵌入式硬件·面试·职场和发展·嵌入式
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart