1. 程式人生 > >內容超出DIV寬高後隱藏或出現滾動條和overflow的屬性

內容超出DIV寬高後隱藏或出現滾動條和overflow的屬性

  • div{overflow:hidden}

    • 這樣設定後,假如DIV物件設定一定寬度高度,此時加入overflow:hidden將會隱藏超出DIV寬度高度的內容包括圖片。
    •  
  • overflow 一共有5個屬性

    • 1、overflow: auto ;   //內容會被修剪,超出設定的寬高後會出現滾動條
    • 2、overflow: scroll  //內容會被修剪,不管內容是否超出,都會出現滾動條的位置
    • 3、overflow: visible ;  //這個是預設值,內容不會被修剪,會出現在元素框外面。
    • 4、overflow: hidden ;  //內容被修剪,多餘的內容被隱藏
    • 5、overflow: inherit   //從父元素那裡繼承overflow的值
    •  
  • 怎麼只顯示橫向的滾動條?

    • 可以設定:overflow-x:scroll,或者:overflow-y:hidden 即可實現這個效果。
    • 同理如果 overflow-y:scroll或者:overflow-x:hidden 是隻顯示豎的滾動條,不顯示橫向
    • overflow:scroll  
      如果你想讓滾動條自始至終都存在,而不僅僅是內容超出後才出現,