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 后,可以在很多地方帮助我们减少代码量,以及更快地进行布局和样式编写。

相关推荐
孩子 你要相信光8 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5208 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20509 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端9 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿9 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉9 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~9 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
matlab的学徒9 小时前
Web与Nginx网站服务(改)
linux·运维·前端·nginx·tomcat
从零开始学习人工智能9 小时前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
小刘鸭地下城10 小时前
优雅表格设计:CSS 美化技巧详解
css