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)