輕輕鬆鬆學CSS:overflow
一、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>