1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

溢出是什么?

一个父元素在未设置宽高的情况下自身尺寸由子元素决定(块级元素宽度等于父元素宽度),一个很形象的比喻就是元素被其子元素撑开了。在父元素设置了宽高或宽高受限的情况下,子元素的尺寸超过了父元素的尺寸就会造成溢出。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/dyZwgmQ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

溢出控制

overflow 属性可以设置当一个元素发生溢出时应该怎么处理,有以下取值:

  • visible:默认值,内容不会被裁剪,依旧显示在元素之外。
  • hidden:内容将会被裁剪。
  • scroll:总是显示滚动条,且内容在溢出下将会被裁剪。
  • auto:只有在溢出情况下才会显示滚动条。

与很多属性样式类似, overflow 同样是 overflow-x (水平溢出控制)、 overflow-y (垂直溢出控制)的缩写。

/* 水平与垂直都为 hidden */
overflow: hidden;
/* 水平方向为 hidden、 垂直方向为 scroll */
overflow: hidden scroll;
/* 水平方向为 auto */
overflow-x: auto;
/* 垂直方向为 hidden */
overflow-y: hidden;

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/NWweOJR?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>