你所不知道的CSS Overflow Module

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

最近在项目中使用overflow属性的时候踩到了几个以前从未踩过的坑。在填坑的过程中发现,原来使用overflow的时候还是有不少的坑,而且这些坑都是因为自己对该属性不甚了解所造成的,或者说是和其他CSS属性在一起使用所触发的。那么在使用overflow应该怎么使用才能避开这些不必要的烦恼呢?或者说在使用overflow不应该和哪些属性结合在一起使用呢?为了解开这个迷我重读了有关于overflow的规范。今天将相关的理解和新的认知小结一下与大家共享,希望对于大家在实际使用的时候能尽可能的避开这些坑。

触发overflow坑的场景

触发这个坑也是无意之中触发的,毕竟以前从未触发到。那么是怎么样的一个场景触发的呢?这个场景很简单:

借助CSS的能力绘制一个类似下图的背景效果

虽然在容器.root中设置了容器的尺寸,并且overflow-x设置了hidden:

.root {
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
}

注意,代码中显式的设置了overflow-x:hidden。按照我们对overflow属性的认知,横向溢出.root容器的内容都应该会被截取(看不见)。但事实上并非如此,你看到的效果却如下,水平方向还是会出现滚动条,溢出的内容并没有被裁切

尝试着把.root中的overflow-x:hidden移动到body元素中:

body {
    width: 100vw;
    height: 100vh;
    background: #D91B1A;
    overflow-x: hidden;
}

如此一来,你会发现在桌面端符合我们的预期,溢出内容会被裁切,但千万别高兴的太早,移动端(不管是Android还是iOS系统下),问题依旧。我继续往html元素设置overflow-x:hidden仍然在移动端上无法正常工作。 那么这是什么呢?先不解答其中原委,给大家留下一个噱头,感兴趣的同学请继续往下阅读。

有关于CSS Overflow Module

到目前为止,有关于CSS Overflow Module主要有两个版本,即 Level 3Level 4。在Level 3版本中涵盖了我们常见的overflow的使用,也有一些我们不常见的,而且text-overflow这样的属性也纳入到了Level 3版本中(被纳入到Automatic Ellipses)。

overflow的类型

在CSS中的overflow主要作用是用来描述一个扩展到该框的边缘,即内容边缘填充边缘边框边缘外距边缘。简单地说就是如何用来控制溢出,从而不让溢出的内容来影响其他元素的布局。从规范中看,有关于overflow主要分为两种类型:墨水溢出(Ink overflow)和 可滚动的溢出(Scrollable overflow)。

墨水溢出

墨水溢出的盒子是盒子的一部分,它的内容创造了一个视觉浆果以外的盒子的边框(border-box)。墨水溢出是绘画(Painting)的溢出,主要用来定义不影响布局或其他方式扩展滚动溢出(Scrollable overflow),比如box-shadowborder-imagetext-decorationoutline等。

在CSS中,有些属性(比如text-shadowbox-shadow)在盒子定义中是一种模糊的,并没有定义它们所覆盖的视觉范围(理论上是无限的),所以墨水溢出也没有一个明确的范围定义。

墨水溢出区域(Ink overflow region)是一个非矩形区域,墨水矩形是坐标轴与盒子坐标轴对齐,并包含墨水溢出区域的最小矩形。注意,墨水溢出矩形在盒子坐标系中是一个矩形,但是由于transform在其他坐标系中可能是非矩形的

请注意,这里可能就给我们在使用overflow时埋下了一个坑:overflowtransform一起使用时,可能有深坑存在!

可滚动溢出

可滚动溢出(Scrollable Overflow)可以说是我们比较熟悉的溢出类型。滚动溢出和墨水溢出类似,他也有框的概念存在。滚动框的可滚动溢出是扩展到该框的padding边缘之外的一组内容,需要为其提供滚动机制。

可滚动溢出区域是可滚动溢出所中用的非矩形区域,而可滚动溢出矩形是最小矩形,其轴和框的轴对齐,并且包含可滚动溢出区域。常见的可滚动区域有:

  • 盒子本身的内容和填充区域(有关于内容和填充区域目前还存在一定的争议,有关于这方面的争议在这里不做相关阐述
  • 所有行框(line box)都直接包含在该框中
  • 它是包含块的所有框的边框盒子(border-box),并且其边框盒子并不完全位于块开始(block-start)或内行开始(inline-start)填充边缘(padding)之外,通过将每个框投射到元素的平面上来实现转换,从而创建3D渲染上下文(3D rendering context)
  • 上面所有框的可滚动溢出区域有一个前提,即可它们本身受具有overflow:visible(它们本身不会捕获溢出),并且可滚动溢出尚未被剪切(例如clipcontains

可滚动溢出矩形在框本身的坐标系统中始终是矩形,但由于transform,在其他坐标系统中可能是非矩形。这意味着滚动条有时会在实际上不需要的时候出现。

Overflow模块属性的划分

上一部分从概念上介绍了溢出的两大类型,其中可滚动溢出是我们较为熟悉的一种溢出。如果对于概念或理论上的理解较为无聊的话,我们可以来看看溢出模块中的属性划分,即我们在实际使用中会用的属性:

  • 用于控制盒子可滚动或剪切的属
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-overflow-module.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部