4-12 overflow / visibility

overflow 屬性掌握捲軸控制效果

• 當圖片或文字放在div標籤內，希望限制在某個範圍內，避免破壞版面配置的時候，就可以透過 overflow 的設定，讓圖片或文字區塊在固定的範圍內呈現
• 若超出範圍的話，會自動變成捲軸呈現方式

overflow 屬性

overflow 屬性列表

屬性	說明	CSS3	連結
overflow	(1) 設定框架內容超出框架的部份該如何表現，有 visible、hidden、scroll、auto… (2) 如果框架沒有設定固定高度，並且內容的子元素為浮動排版，那麼框架的高度會包含所有子元素		英 ／ 中
overflow-x	設定框架內容水平範圍超出框架的部份該如何表現	V	英 ／ 中
overflow-y	設定框架內容垂直範圍超出框架的部份該如何表現	V	英 ／ 中

overflow 屬性值

其他屬性說明，詳：w3schools(英) / runoob(中)

屬性值	說明
auto	預設會自動使用捲軸
visible	顯示的文字或圖片會直接超出範圍，不使用捲軸
hidden	自動隱藏超出的文字或圖片
scroll	自動產生捲軸
inherit	繼承自父元素的可見性

visibility 屬性

visibility 屬性值

其他屬性說明，詳：w3schools(英) / runoob(中)

屬性值	說明
visible	預設值。元素可見
hidden	元素不可見，其元素空間仍存在
collapse	詳：w3schools(英) / runoob(中)
inherit	繼承自父元素的可見性