一、overflow的定義
overflow,音【??v??fl??】，義【溢位】，就像2.2米的人躺在1.8米的床上，腿得耷拉到床外一樣，overflow 屬性用于控制內容溢位容器時顯示的方式
二、overflow的屬性值
【1】visible，默認值（確切地說是絕大數元素的默認值，html、textarea的overflow默認值是auto），overflow:visible表示溢位的內容在容器之外可見
<style> div{width:300px;height:100px;border:3px solid red;overflow:visible;} </style> <div> 如果容器中的內容，超過了容器本身的寬度或高度時，內容就有可能溢位，此時，就可以使用overflow屬性來控制內容溢位時的處理方式，overflow：visible表示溢位部分可見， 如果容器中的內容，超過了容器本身的寬度或高度時，內容就有可能溢位，此時，就可以使用overflow屬性來控制內容溢位時的處理方式，overflow：visible表示溢位部分可見， </div>
效果如下圖：
盡管容器外面的內容是可見的，但它不會把周圍其它元素擠下去，但溢位的內容可能與周圍其它元素重疊
【2】hidden，表示溢位的內容在容器之外被隱藏
<style> div{width:300px;height:100px;border:3px solid red;overflow:hidden;} </style> <body> <div> 如果容器中的內容，超過了容器本身的寬度或高度時，內容就有可能溢位，此時，就可以使用overflow屬性來控制內容溢位時的處理方式，overflow：hidden表示溢位部分被隱藏， 如果容器中的內容，超過了容器本身的寬度或高度時，內容就有可能溢位，此時，就可以使用overflow屬性來控制內容溢位時的處理方式，overflow：hidden表示溢位部分被隱藏， </div>
hidden與visible相反，它會把超出容器部分隱藏掉，被隱藏的部分徹底看不到（除非查看源代碼），overflow:hidden用的比較多，主要應用在清除浮動（下面要講）等方面
【3】scroll，表示容器出現滾動條（包括水平滾動條和垂直滾動條），溢位的內容可以通過滾動條查看
<style> div{width:300px;height:100px;border:3px solid red;overflow:scroll;} </style> <body> <div> 如果容器中的內容，超過了容器本身的寬度或高度時，內容就有可能溢位，此時，就可以使用overflow屬性來控制內容溢位時的處理方式，overflow：scroll表示溢位部分通過滾動條查看，滾動條有點傻，不管是否需要，它都存在， 如果容器中的內容，超過了容器本身的寬度或高度時，內容就有可能溢位，此時，就可以使用overflow屬性來控制內容溢位時的處理方式，overflow：scroll表示溢位部分通過滾動條查看，滾動條有點傻，不管是否需要，它都存在， </div>
scroll有點傻乎乎的，（水平方向、垂直方向）不管是否溢位，滾動條都會出現，正因為如此，overflow:scroll有點影響美觀，所以用的不是很多，
【4】auto，表示容器出現滾動條（包括水平滾動條和垂直滾動條），溢位的內容可以通過滾動條查看
<style> div{width:300px;height:100px;border:3px solid red;overflow:auto;} </style> <body> <div> 如果容器中的內容，超過了容器本身的寬度或高度時，內容就有可能溢位，此時，就可以使用overflow屬性來控制內容溢位時的處理方式，overflow：auto表示溢位部分通過滾動條查看，滾動條的出現更智能，按需出現， 如果容器中的內容，超過了容器本身的寬度或高度時，內容就有可能溢位，此時，就可以使用overflow屬性來控制內容溢位時的處理方式，overflow：auto表示溢位部分通過滾動條查看，滾動條的出現更智能，按需出現， </div>
auto，更智能，根據需要出現滾動條，水平方向或垂直方向哪個有溢位哪個方向才出現滾動條，正因為如此，overflow:auto相比scroll更美觀，所以用的較多，
三、應用
當overflow設定為auto或scroll或hidden時可以觸發BFC（只要不是overflow:visible，overflow的其它屬性都能觸發BFC），使得overflow可以實作一些相關應用，（關于BFC，簡單地說就是自成系統，與系統外彼此互不干擾，詳細內容讀者可以搜索相關資料，此處不贅述）
【1】清除浮動
<style> img{float:left;} .box{background:lightblue;overflow:hidden;} </style> <body> <div class="box"> <img src="img/guanggao.jpg"> </div> </body>
【2】避免margin穿透
<style> img{display:block;} .box{background:lightblue;overflow:hidden;} </style> <body> <div class="box"> <img src="img/guanggao.jpg"> </div> </body>
【3】兩欄自適應布局
<style> .left{float:left;} .right{background-color:lightgreen;overflow:hidden;} p{background-color:olive;} </style> <body> <div class="left"> <img src="img/guanggao.jpg"> </div> <div class="right"> <p>abc</p> <p>bcd</p> <p>cde</p> <p>def</p> <p>efg</p> <p>fgh</p> <p>ghi</p> </div> </body>
【4】選項卡（錨點）
<style> .box{ width:300px; height:300px; background:lightblue; overflow:hidden; } .list{ width:300px; height:300px; color:red; text-align:center; line-height:300px; } .link{ width:300px; margin-top:50px; } .click{ padding:5px 10px; border:3px solid #ccc; } </style> <body> <div class="box"> <div class="list" id="one">1</div> <div class="list" id="two">2</div> <div class="list" id="three">3</div> <div class="list" id="four">4</div> </div> <div class="link"> <a class="click" href="#one">1</a> <a class="click" href="#two">2</a> <a class="click" href="#three">3</a> <a class="click" href="#four">4</a> </div> </body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/119243.html
標籤：Html/Css
上一篇：antd pro 路由
下一篇：uni-app開發注意事項