overflow屬性失效分析


overflow可以控制超出框內容的顯示方式:隱藏、顯示、滾動顯示
可以取值scroll,表示但凡超出框的內容可以通過滾動條實現瀏覽,但是如下demo卻沒有實現滾動顯示的功能。
View Code

於是仔細看了下overflow的定義:overflow 屬性規定當內容溢出元素框時發生的事情。

對比發現, 我理所當然地把body視為元素框了, 於是用div試了下, 發現果然問題出在body上面了。

由此看來:body不是一個元素框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Demo</title>
 6     <style>
 7         span{
 8             font-size:30px;
 9         }
10         .demo-body{
11             width:30vw;
12             height:20vh;
13             border: solid red 2px;
14             overflow: scroll;
15         }
16     </style>
17 </head>
18 
19 <body>
20 <div class="demo-body">
21     <span>
22         測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
23     </span>
24 </div>
25 
26 </body>
27 </html>
View Code

 

下來又發現了scroll和auto有意思的地方,

scroll: 無論內容有多少,哪怕一個字,這個元素框都會顯示滾動條;

auto:只有內容超出文本框的內容區,才會出現滾動條;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM