overflow:hidden,auto什麼區別

盘思动發表於2024-05-25

overflow: hidden;overflow: auto; 是 CSS 中用於處理溢位內容的兩種常見方式,它們之間有一些區別:

  1. overflow: hidden;

    • 當內容超出容器尺寸時,超出部分將被隱藏,不會顯示在容器之外。
    • 不會顯示捲軸,使用者無法滾動檢視隱藏的內容。
    • 超出的內容將被裁剪,即使使用者想要檢視也無法透過滾動來實現。
  2. overflow: auto;

    • 當內容超出容器尺寸時,會根據需要自動顯示捲軸。
    • 如果內容沒有超出容器尺寸,不會顯示捲軸。
    • 允許使用者透過捲軸來檢視超出容器尺寸的內容,提供了更好的使用者體驗。

使用場景

  • 使用 overflow: hidden; 通常用於隱藏不需要顯示的溢位內容,或者用於建立視覺效果,比如裁剪圖片。
  • 使用 overflow: auto; 則通常用於容器中可能出現溢位內容的情況,以便使用者能夠滾動檢視全部內容。

區別總結

  • overflow: hidden; 裁剪並隱藏溢位內容,不顯示捲軸。
  • overflow: auto; 自動顯示捲軸以允許使用者檢視溢位內容,但僅在需要時顯示。

相關文章