DIV資訊溢出框外的表現形態： overflow

DIV資訊溢出框外的表現形態：
overflow: visible | hidden | scroll | auto ;

如果一個DIV的長度和寬都被設定好了，但裡面的內容資料超出了這一個DIV長寬。
那麼，超出的部分資料，會如何呢？基本的預設值是 visible：會超出去DIV的長寬。
……
同樣的概念和技法，同樣也可以應用到表格的TD。


下面Div設置了長寬各100px; css 預設值 overflow：visible

文字超溢	圖像超溢
dsfkl ds fd dslf dlsf dl fld fl dlf dslf  klds fld sfldjlf jdslf jdls jfldj sfl djf jdls fld fld fl dslf dls fld sfl dslf dflkd sf df dlk d f fdklf djfi 123 456 789 11  12 13 14 15	123 456 789 11  12 13 14 15 請移到圖像 ↑

 
說明：
當DIV的長度和寬度被設定後，超出的資料會被看到（visible），這是預設值。但，請注意，對電腦而言，這DIV所佔據的版面大小，仍然只是100px x 100px。
所以，DIV下方的紅字，仍然會出現，而且壓著溢出的資料。因為預設計是下方的資料會壓著上方的資料。



 使用css功能  overflow:  hidden;

文字超溢	圖像超溢
dsfkl ds fd dslf dlsf dl fld fl dlf dslf  klds fld sfldjlf jdslf jdls jfldj sfl djf jdls fld fld fl dslf dls fld sfl dslf dflkd sf df dlk d f fdklf djfi 123 456 789 11  12 13 14 15	123 456 789 11  12 13 14 15

使用css功能  overflow:  scroll; 的諸效果

文字超溢  overlfow: scroll; overflow-x: hidden;	圖像超溢 overflow: scroll;
dsfkl ds fd dslf dlsf dl fld fl dlf dslf  klds fld sfldjlf jdslf jdls jfldj sfl djf jdls fld fld fl dslf dls fld sfl dslf dflkd sf df dlk d f fdklf djfi 123 456 789 11  12 13 14 15	123 456 789 11  12 13 14 15

 再來， overflow: auto; 是指會內容的大小，而自動言調整。如果你填的內容，有超出被設定的長、寬度，那麼 scroll 就會自動啟動。


使用 overflow   來設定互動文本的範例：↙

書桌上的午餐

 思考方向：

「書桌上的午餐」是一個DIV。把它移到最上層的DIV外面；因為使用overflow: hidden; 所以會看不到。然後，利用互動，使它移回到上層DIV內，就又可以看到了。
照片的變化是利用背景圖的作用。

CSS語法：

<style>
 .overflani20170601 {
overflow: hidden;
background-image: url(https://c1.staticflickr.com/5/4274/35008151376_0c7414dce5_k.jpg);
background-repeat: no-repeat;
background-position: left -400px top -160px;
background-size: 1024px;
transition: 1s;
 }
     
 .overflani20170601:hover {
background-repeat: no-repeat;
background-position: left top;
background-size: 420px;
}

.divtran20170607 {
padding-left: 1em;
transform: translateX(240px);
transition: 2s;
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.06em;
background-color: lightgray;
}
   
 .overflani20170601:hover >div {
  transform: translateX(0px);
  }

</style>


影音教學：