CSS overflow溢出属性，及可选属性值

overflow属性

当HTML元素中的内容太多，或太大，超过容器的大小，那么就可以通过CSS中的overflow属性来设置溢出的内容样式，是隐藏，还是添加滚动条。属性值如下表。

overflow可选属性值

属性值	描述
visible	默认值，指定溢出内容不被裁剪隐藏，内容会在元素之外显示
hidden	溢出的内容被隐藏，不可见
scroll	溢出被隐藏，但可见，可通过滚动条查看
auto	同上，但仅在必要时添加滚动条

提示：overflow仅适用于设置了高度的块级元素

overflow:visible实例代码，及在线编辑器

<div id='a'><div id='b'></div></div>

<style>
  #a{overflow:visible; width:100%;height:50%;border:1px solid skyblue;}
  #b{width:80%;height:300px;background-color:orange;margin:auto}
</style>

overflow:hidden实例代码

<div id='c'><div id='d'></div></div>

<style>
  #c{overflow:hidden;width:100%;height:50%;border:1px solid skyblue;}
  #d{width:80%;height:300px;background-color:yellow;margin:auto}
</style>

overflow:scroll实例代码

<div id='e'><div id='f'></div></div>

<style>
  #e{overflow:scroll;width:100%;height:50%;border:1px solid skyblue;}
  #f{width:80%;height:300px;background-color:green;margin:auto}
</style>

overflow:auto实例代码

<div id='g'><div id='h'></div></div>

<style>
  #g{overflow:auto;width:100%;height:50%;border:1px solid skyblue;}
  #h{width:80%;height:300px;background-color:pink;margin:auto}
</style>

hot：热门