overflow 第三頁

overflow overflow-x overflow-y 3

混合使用 overflow-x, overflow-y。 overflow-x:visible; overflow-y:hidden<br /> <div style='overflow-x:visible; overflow-y:hidden; width:150px; height:150px'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </div> <br />overflow-x:visible; overflow-y:auto<br /> <div style='overflow-x:visible; overflow-y:auto; width:150px; height:150px'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </div> <br />overflow-x:hidden; overflow-y:visible<br /> <div style='overflow-x:hidden; overflow-y:visible; width:150px; height:150px'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </div> <br />overflow-x:auto; overflow-y:visible<br /> <div style='overflow-x:auto; overflow-y:visible; width:150px; height:150px'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </div>

• 風格用法：

  overflow-x:visible; overflow-y:hidden<br />
  <div  style='overflow-x:visible; overflow-y:hidden; width:150px; height:150px'>
  <img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
  </div>
  
  <br />overflow-x:visible; overflow-y:auto<br />
  <div  style='overflow-x:visible; overflow-y:auto; width:150px; height:150px'>
  <img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
  </div>
  
  <br />overflow-x:hidden; overflow-y:visible<br />
  <div  style='overflow-x:hidden; overflow-y:visible; width:150px; height:150px'>
  <img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
  </div>
  
  <br />overflow-x:auto; overflow-y:visible<br />
  <div  style='overflow-x:auto; overflow-y:visible; width:150px; height:150px'>
  <img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
  </div>
  

• 執行結果：
  overflow-x:visible; overflow-y:hidden
  
  
  
  overflow-x:visible; overflow-y:auto
  
  
  
  overflow-x:hidden; overflow-y:visible
  
  
  
  overflow-x:auto; overflow-y:visible
  
  

• 上面第一與第二例，在 Firefox, Safari, Chrome 會自動變成 overflow-x:auto；第三與第四例，會自動變成 overflow-y:auto；而 IE6 則依設定展現。

overflow（你正在看 第三頁）

:

第一頁

第二頁

第三頁

第四頁