CSS語法應用:overflow控制捲軸

CSS語法應用:overflow控制捲軸

捲軸控制在網頁設計上算是滿常碰到的問題， 尤其當div排版的方法逐漸成為主流時， 善用overflow就能有效的的掌握各種捲軸效果。

overflow:狀態         控制當內容超過顯示區域時捲軸的顯示，
overflow-x:狀態      x捲軸的顯示。
overflow-y:狀態      y捲軸的顯示。

捲軸顯示有四種狀態 ﹕
visible(預設):內容完全顯示不嵌入顯示區域。
auto:內容嵌入顯示區域，並視情況顯示水平與垂直捲軸。
scroll:內容嵌入顯示區域，水平捲軸會出現但視情況顯示可捲動或不可捲動。
hidden:內容嵌入顯示區域，捲軸不會出現。

<div style="overflow:hidden;display:inline-block;">overflow:hidden <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD5I8rUvc770t9j-3klDvtsmmWh1h7vwgY43aG4Cv-NR5ks0Twca-c7UbwBLyd-pMG1uCCxTJ89pqTVuVpgzhcrOMjW0mL5-6Hh9ORdVJlurkY2Jj_uGvsh4uXfWMpboXQ0OL9pPISazNO/s800/IMG-20170401-WA0006.jpg" /></div> <div style="overflow:scroll;display:inline-block;">overflow:scroll <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD5I8rUvc770t9j-3klDvtsmmWh1h7vwgY43aG4Cv-NR5ks0Twca-c7UbwBLyd-pMG1uCCxTJ89pqTVuVpgzhcrOMjW0mL5-6Hh9ORdVJlurkY2Jj_uGvsh4uXfWMpboXQ0OL9pPISazNO/s800/IMG-20170401-WA0006.jpg" /></div> <div style="overflow-x:scroll;overflow-y:hidden; display:inline-block;">overflow-x:scroll <br> overflow-y:hidden <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD5I8rUvc770t9j-3klDvtsmmWh1h7vwgY43aG4Cv-NR5ks0Twca-c7UbwBLyd-pMG1uCCxTJ89pqTVuVpgzhcrOMjW0mL5-6Hh9ORdVJlurkY2Jj_uGvsh4uXfWMpboXQ0OL9pPISazNO/s800/IMG-20170401-WA0006.jpg" /></div> <div style="overflow-x:hidden;overflow-y:scroll; display:inline-block;">overflow-x:hidden <br> overflow-y:scroll <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD5I8rUvc770t9j-3klDvtsmmWh1h7vwgY43aG4Cv-NR5ks0Twca-c7UbwBLyd-pMG1uCCxTJ89pqTVuVpgzhcrOMjW0mL5-6Hh9ORdVJlurkY2Jj_uGvsh4uXfWMpboXQ0OL9pPISazNO/s800/IMG-20170401-WA0006.jpg" /></div> <style>div {font-size:24px;color:blue;font-weight:bold;border: 10px ridge lightgray;width:45%;height:45%;margin:5px} </style>

00