overflow-溢出 · 前端知识 -- 学习整理

>[success] # overflow-溢出 ![](https://img.kancloud.cn/5e/a3/5ea36943f5a70f2c61f03be020aaa684_648x239.png) * 如下代码 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div style="height: 50px; width: 50px; background-color: aqua"> 我我我我我我我我我我我嚄嚄嚄我我我我我我哦我我我我我 </div> </body> </html> ~~~ 1. `visible`默认值。内容不会被修剪，会呈现在元素框之外 ![](https://img.kancloud.cn/ab/f5/abf594734316b19ce7c2cc9e98bd24ea_469x205.png) 2. `hidden`内容会被修剪，并且其余内容不可见盒子有多少显示多少,如果上述代码设置该属性后展示效果盒 ![](https://img.kancloud.cn/26/ff/26ff4b54cb90d025e0927d72dd6f6eac_342x130.png) 3. `scroll`内容会被修剪，浏览器会显示滚动条以便查看其余内容，会一直显示滚动条区域，滚动条区域占用的空间属于width、height，简单说即使盒子高度宽度大于内容展示效果依然有滚动条 ![](https://img.kancloud.cn/88/3d/883dc8ed4e9350c763db7ab4114cb80b_590x387.png) 4. `auto`由浏览器定夺，如果内容被修剪，就会显示滚动条,否则隐藏 * 不显示滚动条 ![](https://img.kancloud.cn/e9/0b/e90b055e05853829ef24f723b0127ccd_559x379.png) * 显示滚动条 ![](https://img.kancloud.cn/18/39/1839c72369384e75b3a36ec4af578832_396x198.png)