div嵌套引發的margin-top不起做用

時間 2019-11-14

標籤 div 嵌套引發 margin 不起欄目 CSS 简体版

原文原文鏈接

一般你們在製做網頁的過程當中會遇到不少棘手的問題，好比我在寫一個頁面的時候，遇到了div嵌套引發的margin-top不起做用，對內部的div設置margin-top時，內部對於外部的div並無產生一個margin值，而是外部的div相對於上面的div產生了一個margin值，爲何會出現這種狀況？？？css

　　這是由於嵌套div中margin-top出現轉移，在部分瀏覽器中，兩個嵌套的div，若是外層父元素div的padding值爲0，那麼內層div的margin-top，margin-bottom值都會轉移到父元素也就是外層div身上。html

<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.div1{
height: 500px;
width: 100%;
background: #ccc;
}
.div2{
height: 100px;
width: 100px;
background: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>瀏覽器

由代碼可看出，div1嵌套div2，對div2設置margin-top是100px；post

可看出，div1 上方留的空白正是咱們對div2設置的margin值ui

解決辦法：htm

1.給父元素div1設置一個padding值blog

.div1{
height: 500px;
width: 100%;
background: #ccc;
padding-top: 1px;
}get

2.給父元素div1設置一個overflow：hidden；在不加overflow:Hidden;的時候，margin-top:這個屬性是認不到邊的，也就是失效。可是ie瀏覽器解決了這個問題，火狐、谷歌之類的就會出現失效，因此這是個標準問題，也是個兼容問題。it

.div1{
height: 500px;
width: 100%;
background: #ccc;
overflow: hidden;
}io

3.把外邊距margin改成padding，因爲這樣作撐大了盒子的高度，會出現如圖效果，因此不建議使用。

4.讓父元素生成一個塊級格式化範圍（BFC）（關於BFC：http://blog.sina.com.cn/s/blog_48422a050100tkig.html）

給子元素div2加：

float: left/right
position: absolute
display: inline-block/table-cell(或其餘 table 類型)
overflow: hidden/auto

給父層div1加：position: absolute;

引用於：http://www.cnblogs.com/huixinyudeboke/p/5043500.html

相關文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<