細(xì)說(shuō)CSS3中box屬性中的overflow-x屬性和overflow-y屬性值的效果
發(fā)布時(shí)間：2014-07-21 17:09:53 作者：佚名 
我要評(píng)論
我要評(píng)論overflow-x和overflow-y的屬性值可以查到一大堆，并沒(méi)有詳細(xì)說(shuō)明各屬性值的效果，今天我就說(shuō)一下
大家可以發(fā)現(xiàn)，上網(wǎng)站上查詢之后會(huì)得到overflow-x和overflow-y的一大堆屬性值，但很多網(wǎng)站并沒(méi)有詳細(xì)說(shuō)明各屬性值的效果，我們今天細(xì)說(shuō)一下。
各屬性值如下：
visible：默認(rèn)值，不裁剪內(nèi)容，可能會(huì)顯示在內(nèi)容框之外
hidden：裁剪內(nèi)容 - 不提供滾動(dòng)機(jī)制
scroll：裁剪內(nèi)容 - 提供滾動(dòng)機(jī)制
auto：如果溢出框，則應(yīng)該提供滾動(dòng)機(jī)制，否則正常顯示
no-display：如果內(nèi)容不適合內(nèi)容框，則刪除整個(gè)框，但目前該屬性值不被支持
no-content：如果內(nèi)容不適合內(nèi)容框，則隱藏整個(gè)內(nèi)容，但目前該屬性值不被支持
這里值得再細(xì)說(shuō)一下的是visible。我們一般會(huì)給overflow-x和overflow-y各分配一個(gè)屬性值，來(lái)分別規(guī)定水平方向和豎直方向的顯示方式，visible只有和visible搭配才會(huì)有那種“完全顯示而顯示在框外”的效果，否則都等同于scroll，不過(guò)一般情況下，盒子在一個(gè)方向上的尺寸小于51px時(shí)不會(huì)顯示滾動(dòng)條。當(dāng)然，這里沒(méi)有考慮no-display和no-content，因?yàn)檫@兩個(gè)目前不被支持，所以等同于賦了默認(rèn)值，即visible。
各屬性值如下：
visible：默認(rèn)值，不裁剪內(nèi)容，可能會(huì)顯示在內(nèi)容框之外
hidden：裁剪內(nèi)容 - 不提供滾動(dòng)機(jī)制
scroll：裁剪內(nèi)容 - 提供滾動(dòng)機(jī)制
auto：如果溢出框，則應(yīng)該提供滾動(dòng)機(jī)制，否則正常顯示
no-display：如果內(nèi)容不適合內(nèi)容框，則刪除整個(gè)框，但目前該屬性值不被支持
no-content：如果內(nèi)容不適合內(nèi)容框，則隱藏整個(gè)內(nèi)容，但目前該屬性值不被支持
這里值得再細(xì)說(shuō)一下的是visible。我們一般會(huì)給overflow-x和overflow-y各分配一個(gè)屬性值，來(lái)分別規(guī)定水平方向和豎直方向的顯示方式，visible只有和visible搭配才會(huì)有那種“完全顯示而顯示在框外”的效果，否則都等同于scroll，不過(guò)一般情況下，盒子在一個(gè)方向上的尺寸小于51px時(shí)不會(huì)顯示滾動(dòng)條。當(dāng)然，這里沒(méi)有考慮no-display和no-content，因?yàn)檫@兩個(gè)目前不被支持，所以等同于賦了默認(rèn)值，即visible。
相關(guān)文章
- 當(dāng)塊元素想呈現(xiàn)該元素內(nèi)部?jī)?nèi)容不換行或者超過(guò)該元素的部分隱藏起來(lái)2010-03-05
標(biāo)題長(zhǎng)度溢出時(shí)，自動(dòng)顯示為省略“...”的Css text-overflow
內(nèi)容超出后自動(dòng)隱藏并加省略標(biāo)記(...)引號(hào)的Css text-overflow:ellipsis; o...2011-07-27css overflow與text-indent:-999em 字體隱藏
css overflow與text-indent:-999em 字體隱藏,需要的朋友可以參考下。2010-03-18CSS:用overflow代替left截取指定長(zhǎng)度字符串-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)
為了防止文章標(biāo)題過(guò)長(zhǎng)超過(guò)容器(td,div)寬度而顯示成多行，我們通常要對(duì)標(biāo)題進(jìn)行處理讓其顯示在一行，通常使用的方法有兩種：一種方法是在客戶端用CSS設(shè)置容器的overflow屬2008-10-17CSS教程:導(dǎo)致一些問(wèn)題的overflow-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
overflow有問(wèn)題嗎？沒(méi)問(wèn)題。那為什么說(shuō)要慎用呢？因?yàn)橛袝r(shí)會(huì)導(dǎo)致一些問(wèn)題。。。 關(guān)于overflow:auto的，很多人貪他書寫方便，直接用來(lái)清除浮動(dòng)。但是Firefox使用overflow:au2008-10-17css overflow溢出隱藏(文字溢出時(shí)的自動(dòng)隱藏處理)
css溢出隱藏一般用于當(dāng)內(nèi)容太大以至于無(wú)法適應(yīng)指定的區(qū)域時(shí)，通過(guò)設(shè)置css下的overflow屬性來(lái)隱藏其內(nèi)容2013-03-07標(biāo)簽增加CSS的overflow屬性來(lái)清除浮動(dòng)-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
這個(gè)方法不單使用簡(jiǎn)單，而且FF、OP、IE7都支持，從此可以告別那又長(zhǎng)兼容性又差的FF清浮動(dòng)的方法了。 方法真的很簡(jiǎn)單，只要為需要清浮動(dòng)的標(biāo)簽加上overflow這個(gè)屬性。2008-10-17CSS教程:CSS讓網(wǎng)頁(yè)文字自動(dòng)隱藏
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：文字隱藏應(yīng)用廣泛，但常用的方法沒(méi)有什么親和力。 文字隱藏應(yīng)用廣泛，但常用的方法沒(méi)有什么親和力。 常用文字隱藏方法的缺陷：2009-04-02CSS--overflow:hidden在項(xiàng)目實(shí)例中使用心得分享
大家對(duì)CSS屬性中overflow:hidden并不陌生，至于它的應(yīng)用，在下文中列出我在項(xiàng)目中，運(yùn)用到此屬性的例子，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-04css中position:relative和overflow:hidden之間的問(wèn)題
在父標(biāo)簽中使用了overflow:hidden;時(shí)，如果子標(biāo)簽中有元素的position設(shè)置成relative的時(shí)候，在IE6和IE7中父元素的overflow對(duì)其將不起作用，其實(shí)將父標(biāo)簽的position也設(shè)置成2013-09-04