CSS--overflow:hidden在項(xiàng)目實(shí)例中使用心得分享
發(fā)布時(shí)間：2013-07-04 11:51:02 作者：佚名 
我要評論
我要評論大家對CSS屬性中overflow:hidden并不陌生，至于它的應(yīng)用，在下文中列出我在項(xiàng)目中，運(yùn)用到此屬性的例子，感興趣的朋友可以參考下哈，希望對大家有所幫助
列出我在項(xiàng)目中，運(yùn)用到此屬性的例子：
（1）暴力清除浮動
<style type="text/css">
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {float: left;}
</style>
<div class="wrap">
<p>test of css</p>
</div>
（2）阻止邊距外折疊
<style type="text/css">
body,p {padding: 0;margin: 0;}
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {margin-top: 20px;}
</style>
<div class="wrap">
<p>test of css</p>
</div>
（3）在IE-6，解決定義1px高的塊元素
<style type="text/css">
.line {height: 1px;background-color: #ccc;overflow: hidden;}
</style>
<div class="line"></div>
（4）創(chuàng)建兩欄布局
<style type="text/css">
div {height: 500px;}
.left {float: left;background-color: #000;width: 200px;margin-right: 5px;}
.right {overflow: hidden;zoom:1;background-color: #ccc;}
</style>
<div class="left"></div>
<div class="right"></div>
（1）暴力清除浮動
復(fù)制代碼
代碼如下:<style type="text/css">
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {float: left;}
</style>
復(fù)制代碼
代碼如下:<div class="wrap">
<p>test of css</p>
</div>
（2）阻止邊距外折疊
復(fù)制代碼
代碼如下:<style type="text/css">
body,p {padding: 0;margin: 0;}
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {margin-top: 20px;}
</style>
<div class="wrap">
<p>test of css</p>
</div>
（3）在IE-6，解決定義1px高的塊元素
復(fù)制代碼
代碼如下:<style type="text/css">
.line {height: 1px;background-color: #ccc;overflow: hidden;}
</style>
<div class="line"></div>
（4）創(chuàng)建兩欄布局
復(fù)制代碼
代碼如下:<style type="text/css">
div {height: 500px;}
.left {float: left;background-color: #000;width: 200px;margin-right: 5px;}
.right {overflow: hidden;zoom:1;background-color: #ccc;}
</style>
<div class="left"></div>
<div class="right"></div>
相關(guān)文章
深入理解CSS overflow:hidden——溢出,坍塌,清除浮動
這篇文章主要介紹了深入理解CSS overflow:hidden——溢出,坍塌,清除浮動的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-03css中position:relative和overflow:hidden之間的問題
在父標(biāo)簽中使用了overflow:hidden;時(shí)，如果子標(biāo)簽中有元素的position設(shè)置成relative的時(shí)候，在IE6和IE7中父元素的overflow對其將不起作用，其實(shí)將父標(biāo)簽的position也設(shè)置成2013-09-04- 當(dāng)塊元素想呈現(xiàn)該元素內(nèi)部內(nèi)容不換行或者超過該元素的部分隱藏起來2010-03-05
- 網(wǎng)頁制作Webjx文章簡介：文字隱藏應(yīng)用廣泛，但常用的方法沒有什么親和力。 文字隱藏應(yīng)用廣泛，但常用的方法沒有什么親和力。 常用文字隱藏方法的缺陷：2009-04-02
這篇文章主要介紹了css中overflow:hidden失效問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2020-02-10
