CSS Overflow 溢出

前言

• CSS overflow 属性用于控制内容溢出元素框时显示的方式。

• CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

属性	描述	CSS	备注	🔗
overflow	设置当元素的内容溢出其区域时发生的事情	2		🔗
overflow-x	指定如何处理右边/左边边缘的内容溢出元素的内容区域	3		🔗
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域	3		🔗
overflow-style	规定溢出元素的首选滚动方法	3		🔗

1、Overflow

• overflow 属性指定如果内容溢出一个元素的框，会发生什么。

属性	描述	CSS	备注	🔗
overflow	设置当元素的内容溢出其区域时发生的事情	2		🔗

• 属性值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承 overflow 属性的值

• 注意：overflow 属性只工作于指定高度的块元素上。

• 注意：在 OS X Lion (Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow: scroll;” 也是一样的)。

• 实例

  <style>
      div {
          background-color: #00FFFF;
          width: 150px;
          height: 150px;
          overflow: auto;
      }
  </style>

  <p>overflow 属性规定当内容溢出元素框时发生的事情。</p>
  <div>当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。</div>

• 效果

  overflow 属性规定当内容溢出元素框时发生的事情。

  当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。