欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2021-07-01 17:04:45   作者：星星之火M   我要評論
overflow:hidden是當元素內的內容溢出的時候使它隱藏溢出的部分，即超出部分隱藏。本文介紹了幾種用法，具有一定的參考價值，感興趣的可以了解一下

一. 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;	/*規(guī)定文本不進行換行*/
    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的作用 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • CSS中如何解決外邊距塌陷問題

    這篇文章主要介紹了CSS中如何解決外邊距塌陷問題,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習
    2020-05-11

  • CSS中外邊距塌陷的八種解決方法

    margin-top塌陷是在CSS的盒子模型中出現(xiàn)的一種現(xiàn)象，本文就介紹了CSS中外邊距塌陷的八種解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學
    2023-05-31

最新評論