• <button id="eiyoe"><acronym id="eiyoe"></acronym></button>
    <em id="eiyoe"></em>

  • <rp id="eiyoe"><acronym id="eiyoe"><input id="eiyoe"></input></acronym></rp>
      查看: 292|回復: 0
      上一主題 下一主題

      詳解overflow:hidden的作用(溢出隱藏、清除浮動、解決外邊距塌陷)

      80292

      主題

      0

      好友

      積分

      離線 發信

      跳轉到指定樓層
      樓主
      發表于 2021-07-25 19:58 | 只看該作者 | 倒序瀏覽

      一. overflow:hidden  溢出隱藏

      給一個元素中設置overflow:hidden,那么該元素的內容若超出了給定的寬度和高度屬性,那么超出的部分將會被隱藏,不占位。

      /*css樣式*/
      <style type="text/css">
          div{ width: 150px; height: 60px; background: skyblue;
      	 overflow: hidden;  /*溢出隱藏*/
             }
      </style>
       
      /*html*/
      <div style="">
          今天天氣很好!<br>今天天氣很好!<br>
          今天天氣很好!<br>今天天氣很好!<br>
      </div>

      效果如下:

      一般情況下,在頁面中,一般溢出后會顯示省略號,比如,當一行文本超出固定寬度就隱藏超出的內容顯示省略號。

      /*只適用于單行文本*/
      div{ 
          width: 150px;
          background: skyblue;
          overflow: hidden;      /*溢出隱藏*/
          white-space: nowrap;	/*規定文本不進行換行*/
          text-overflow: ellipsis;	/*當對象內文本溢出時顯示省略標記(...)*/
      }

      效果如下:

      二. overflow:hidden  清除浮動

      一般而言,父級元素不設置高度時,高度由隨內容增加自適應高度。當父級元素內部的子元素全部都設置浮動float之后,子元素會脫離標準流,不占位,父級元素檢測不到子元素的高度,父級元素高度為0。那么問題來了,如下:

      /*css樣式*/
      <style type="text/css">
          .box{ background:skyblue; }
          .kid{ width: 100px;height: 100px; float:left;}
          .kid1{ background: yellow; }
          .kid2{ background: orange; }
          .wrap{ width: 300px; height: 150px; background: blue; color: white; }
      </style>
       
      /*html*/
      <body>
          <div class="box">
              <div class="kid kid1">子元素1</div>
      	<div class="kid kid2">子元素2</div>
          </div>
          <div class="wrap">其他部分</div>
      </body>

      如上,由于父級元素沒有高度,下面的元素會頂上去,造成頁面的塌陷。因此,需要給父級加個overflow:hidden屬性,這樣父級的高度就隨子級容器及子級內容的高度而自適應。如下:

      由于在IE比較低版本的瀏覽器中使用overflow:hidden;是不能達到這樣的效果,因此需要加上 zoom:1;

      所以為了讓兼容性更好的話,如果需要使用overflow:hidden來清除浮動,那么最好加上zoom:1;

      /*css樣式*/
      <style type="text/css">
          .box{ background:skyblue; 
      	  overflow: hidden;  /*清除浮動*/
      	  zoom:1;
              }
          .kid{ width: 100px;height: 100px; float:left;}
          .kid1{ background: yellow; }
          .kid2{ background: orange; }
          .wrap{ width: 300px; height: 150px; background: blue; color: white; }
      </style>
       
      /*html*/
      <body>
          <div class="box">
              <div class="kid kid1">子元素1</div>
      	<div class="kid kid2">子元素2</div>
          </div>
          <div class="wrap">其他部分</div>
      </body>

       

      三. overflow:hidden  解決外邊距塌陷

      父級元素內部有子元素,如果給子元素添加margin-top樣式,那么父級元素也會跟著下來,造成外邊距塌陷,如下:

      /*css樣式*/
      <style type="text/css">
          .box{ background:skyblue;}
          .kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
      </style>
       
      /*html*/
      <body>
          <div class="box">
      	<div class="kid">子元素1</div>
          </div>
      </body>

      因此,給父級元素添加overflow:hidden,就可以解決這個問題了。

      /*css樣式*/
      <style type="text/css">
          .box{ background:skyblue;
                overflow: hidden; /*解決外邊距塌陷*/   
              }
          .kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
      </style>
       
      /*html*/
      <body>
          <div class="box">
      	<div class="kid">子元素1</div>
          </div>
      </body>

      到此這篇關于詳解overflow:hidden的作用(溢出隱藏、清除浮動、解決外邊距塌陷)的文章就介紹到這了,更多相關overflow:hidden的作用 內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

      來源:http://www.jb51.net/css/780971.html