css overflow 溢出

**

overflow:auto

当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。 **

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>overflow_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { overflow: auto; width: 200px; height: 100px; background: #eee; } </style> </head> <body> <div class="test"> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> </div> </body> </html>

**

overflow：hidden

隐藏溢出容器的内容且不出现滚动条。

**

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>overflow_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { overflow: hidden; width: 200px; height: 100px; background: #eee; } </style> </head> <body> <div class="test"> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> </div> </body> </html>

overflow:visible

对溢出内容不做处理，内容可能会超出容器。

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>overflow_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { overflow: visible; width: 200px; height: 100px; background: #eee; } </style> </head> <body> <div class="test"> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> </div> </body> </html>

overflow:scroll

隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>overflow_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { overflow: scroll; width: 200px; height: 100px; background: #eee; } </style> </head> <body> <div class="test"> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> <p>苏打速度</p> </div> </body> </html>