css: overflow笔记

前言

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

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

干货

知识盲点

首先，一般来说 overflow 会有 3 个值 auto、hidden 、scroll。

之前一直会把 auto、scroll 和 hidden 区分开，因为前面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 后，可以在很多地方帮助我们减少代码量，以及更快地进行布局和样式编写。