[Web 前端] 012 css 元素溢出
阿新 • • 發佈：2019-05-02
mar flow itl school 默認 ble clas htm pre
overflow
- 當子元素的尺寸超過父元素的尺寸時，需要設置父元素顯示溢出的子元素的方式
- 通過 overflow 屬性來設置
- 概覽
| 參數 | 釋義 |
|---|---|
| visible（默認值） | 內容不會被修剪 會呈現在元素框之外 |
| hidden | 內容會被修剪 其余內容是不可見的 此屬性還有清除浮動、清除 margin-top 塌陷的功能 |
| scroll | 內容會被修剪 瀏覽器會顯示滾動條，以便查看其余的內容 |
| auto | 如果內容被修剪，瀏覽器會顯示滾動條以便查看其余的內容 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值 |
- 舉例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="./static/CSS/test.css"> </head> <body> <div class="box">box</div> </body> </html>
.box{
width: 200px;
height: 200px;
/*overflow: visible;*/
/*overflow: hidden;*/
overflow: scroll;
/*overflow: auto;*/
/*overflow: inherit;*/
}- 效果截圖
參考：w3school
[Web 前端] 012 css 元素溢出