css: overflow笔记

前言

本文总结自 CSS for JavaScript Developers 课程中的知识点。

如果有说的不对的地方,谢谢指正。

干货

知识盲点

首先,一般来说 overflow 会有 3 个值 autohiddenscroll

之前一直会把 autoscrollhidden 区分开,因为前面2个都会出现滚动条,然后hidden不会,实际上,只要 overflow 设置为任意一个值,这个容器都会被视为开启了滚动(hidden只是滚动条不显示罢了),这个知识点后面会用到,先介绍一下。

例子

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div {
      position: relative;
      width: 500px;
      height: 300px;
      background: #999;
    }

    #div-1 {
      position: absolute;
      width: 100px;
      height: 100px;
      right: -50px;
      bottom: -30px;
      background: green;
      border-radius: 50%;
    }

    #div-2 {
      position: absolute;
      width: 60px;
      height: 60px;
      right: -30px;
      bottom: -50px;
      background: yellow;
      border-radius: 50%;
    }
  </style>
</head>
<body>
<div id="div">
  <div id="div-1"></div>
  <div id="div-2"></div>
</div>
</body>
</html>

简单的一个 absolute 的例子,页面展示如下:

这个时候,如果出现一个需求,需要把两个小球超出右边边框的部分 hidden 掉,然后超出下边框的部分继续保留。

最简单的想法,就是把 x轴 使用 overflow: hidden ,将 x轴 超出的部分隐藏,y轴 的部分正常展示。

css 复制代码
#div {
  position: relative;
  width: 500px;
  height: 300px;
  background: #999;
  /* x轴隐藏 */
  overflow-x: hidden;
}

会发现右边确实隐藏了,但是 y轴 方向却出现了滚动条,原因就是上面说的,虽然设置了

overflow-x: hidden ,容器就变成了滚动容器,y轴 就自然地出现了滚动条。

怎么解决

overflow: clip;

div 中把 overflow-x 改成 clip

css 复制代码
#div {
  position: relative;
  width: 500px;
  height: 300px;
  background: #999;
  /* x轴隐藏 */
  overflow-x: clip;
}

clip 虽然会隐藏超出边界的内容,但是不会把容器变成滚动容器。因此 y轴 不会出现滚动条。

但是,clip 中会有个问题,如果容器使用了 border-radius 就会失效。

如图所示, y轴的部分也被隐藏了,据说 Firefox 已经修复了,但是在 chrome 里还是有问题。

外层容器使用 overflow。

鉴于 clip 存在缺陷,但是我们一般都要找到兼容性较好的方法,因此一般可以使用这种方法解决。

div 的外层加一层 container ,配置适合的高度,内容 + absolute高度(或者直接作为最外层的容器,继续在里面插入其他内容),加上 overflow-x: hidden

css 复制代码
#container {
  width: 500px;
  overflow-x: hidden;
  // 或者直接作为最外部的布局容器 比如 height: 100%
  height: 500px;
}
bash 复制代码
<div id="container">
  <div id="div">
    <div id="div-1"></div>
    <div id="div-2"></div>
  </div>
</div>

结语

css 虽然很常用,但是经常被忽视,很多时候遇到问题,就想着换一种布局,换一种方式去实现,很少会去像 js 一样刨根问底寻找原因,但是理解 css 后,可以在很多地方帮助我们减少代码量,以及更快地进行布局和样式编写。

相关推荐
lyj1689976 分钟前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽1 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全2 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机4 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人4 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘5 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js