深入理解CSS之overflow:hidden，scroll，visible

在佈局時，如果遇到內容超過盒子大小時，可以用CSS屬性Overflow將超出對象的內容實現隱藏，同時也可以將超出部分顯示或者隱藏滾動條的作用，接下來我們來了解學習css overflow樣式。

一、Overflow語法值

overflow : visible | auto | hidden | scroll

當然overflow可以單獨設定X（overflow-x ）和Y（overflow-y）方向的捲軸樣式其值與應用程式與overflow語法用法結構相同。

二、Overflow參數值解釋 

visible : 　不剪下內容也不新增捲軸。假如明確宣告此預設值，物件將被剪下為包含物件的window或frame的大小。且clip屬性設定將失效

auto : 　此為body物件和textarea的預設值。在需要時剪下內容並新增捲軸，DIV預設值也是這個值，但需要設定時候設定即可

hidden : 　不顯示超過物件尺寸的內容

scroll : 　總是顯示捲軸

三、Overflow特別解釋說明

檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。

設定textarea物件為hidden值將隱藏其捲軸。

對於table來說，假如table-layout屬性設定為fixed，則td物件支援帶有預設值為hidden的overflow屬性。如果設為hidden，scroll或auto，那麼超出td尺寸的內容將被剪切。如果設為visible，將導致額外的文字溢出到右邊或左邊（視direction屬性設定而定）的儲存格。自IE5開始，此屬性在MAC平台上可用。

四、重點學習Overflow 

Overflow:visible 此樣式可以讓捲軸隱藏，但可以滑鼠上拉下拉滑動。

Overflow:hidden 隱藏物件超出設定寬度高度的內容

Overflow:scroll 此樣式，會讓內容無論是否超出高度寬度也會顯示捲軸。

五、Overflow:hidden與Overflow:scroll實踐 

我們透過同樣的寬度高度設置，一個隱藏超出寬度高度內容，一個為顯示滾動條，為了案例演示，我們對案例2個物件加CSS border邊框。

CSS程式碼:

.divcss5-hidden,.divcss5-scroll{width:300px; height:100px;line-height:25px; border:1px solid #333} 
.divcss5-hidden{overflow:hidden; height:50px} 
.divcss5-scroll{overflow:scroll; margin-top:10px}

html程式碼:

<div class="divcss5-hidden"> 
隐藏超出的内容但不显示滚动,divcss5的overflow:hidden测试示范 
案例，设置了高和宽后对象，内容多不超出对象 
</div> 
<div class="divcss5-scroll"> 
<img  src="/static/imghwm/default1.png"  data-src="http://www.divcss5.com/uploads/allimg/130219/1_130219231214_1.jpg"  class="lazy"   / alt="深入理解CSS之overflow:hidden，scroll，visible" > 
</div>

總結：Overflow css樣式我們常常用來隱藏於顯示捲軸，同時可以隱藏超出大小寬度高度顯示對象的內容，非常簡單如果不能拼寫此單字也無所謂，看到就能認識常用到地​​方，基本語法結構等借助於DW軟體快速輸入即可。

以上是深入理解CSS之overflow:hidden，scroll，visible的詳細內容。更多資訊請關注PHP中文網其他相關文章！