前段時(shí)間做一個(gè)頁(yè)面的時(shí)候旨别，遇到一些樣式上的問(wèn)題：由于layout的關(guān)系鸥跟，在我需要顯示最外div橫向滾動(dòng)條和縱向滾動(dòng)條時(shí)，遇到了一些阻礙秋忙，因此也借此機(jī)會(huì)彩掐，研究了一下div的overflow屬性，下面給大家分享一下：
1.overflow屬性多用于div灰追，其作用是：規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情堵幽；
2.所有主流瀏覽器都支持 overflow 屬性，因此可以放心使用弹澎；
3.overflow可分別設(shè)置x軸或者y軸（即overflow-x:朴下，overflow-y:），也可以對(duì)兩者同時(shí)進(jìn)行設(shè)置（overflow:）
4.overflow有以下這些屬性：
visible 默認(rèn)值苦蒿。內(nèi)容不會(huì)被修剪殴胧，會(huì)呈現(xiàn)在div之外。
hidden 內(nèi)容會(huì)被修剪佩迟，并且其余內(nèi)容是不可見(jiàn)的团滥。
scroll 內(nèi)容會(huì)被修剪免胃，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto 如果內(nèi)容被修剪惫撰，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容羔沙。
inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。（注：所有IE瀏覽器都不支持inherit屬性）
普遍來(lái)說(shuō)厨钻，auto屬性比較常用扼雏，一般y軸都會(huì)生成滾動(dòng)條，而x軸的滾動(dòng)條并不多見(jiàn)夯膀。特別是使用了bootstrap等框架后诗充，利用其分欄功能搭建的div，會(huì)有效利用瀏覽器的橫向?qū)挾龋▽?00%的寬度等分成12格诱建，如果一行排列的元素超過(guò)12格蝴蜓，則會(huì)自動(dòng)換行），因此一般不會(huì)出現(xiàn)橫向滾動(dòng)條俺猿。
我上面說(shuō)到遇到的具體問(wèn)題是這樣的：我的頁(yè)面布局茎匠，是比較常見(jiàn)的，最外層是一個(gè)大div押袍，當(dāng)中的上部是設(shè)置菜單诵冒，左下是真正的菜單，右下是主體內(nèi)容顯示區(qū)域谊惭。我現(xiàn)在需要在右下的主體內(nèi)容區(qū)域中做一個(gè)頁(yè)面汽馋，這個(gè)頁(yè)面會(huì)顯示sql查詢語(yǔ)句返回的內(nèi)容，動(dòng)態(tài)生成一個(gè)table圈盔，這個(gè)table的寬度可能會(huì)非常寬豹芯，因此我需要顯示x軸滾動(dòng)條。
如果單純顯示右下div的滾動(dòng)條驱敲，那會(huì)有一個(gè)問(wèn)題：如果頁(yè)面高度很高（sql返回的結(jié)果數(shù)較多）铁蹈，則必須要將頁(yè)面y軸滾動(dòng)條拉動(dòng)之最底端，才能看到x軸的滾動(dòng)條癌佩，這顯然是非常不方便的木缝。
如果光設(shè)置最外層div的滾動(dòng)條，則y軸會(huì)出現(xiàn)兩個(gè)滾動(dòng)條围辙，這也是不能接受的我碟。
最終的方案是這樣的：
右下的div，overflow設(shè)置成visible姚建，最外層的div矫俺，overflow設(shè)置成auto（當(dāng)然，這只是針對(duì)我這個(gè)特殊的頁(yè)面，因此直接在view里重寫并覆蓋html和body的overflow屬性厘托，其余頁(yè)面不受影響）
大家可以根據(jù)自己的實(shí)際需要友雳，試著調(diào)整一下overflow的屬性，多試幾次铅匹，自然會(huì)理解這幾個(gè)屬性的作用的區(qū)別了押赊。
