<style>
.father{
width: 400px;
height: 400px;
background-color: skyblue;
/* margin: 200px; */
text-align: center;
/* overflow: hidden; */
}
.son{
width: 100px;
height: 100px;
background-color: thistle;
margin: 50px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
</body>
為什么給子元素添加overflow 達不到隔開的效果 而給父元素添加就可以了呢?
uj5u.com熱心網友回復：
這是因為發生了margin塌陷，son的margin-top 影響到了father，所以會出現，父級元素向下偏移了10px。給父級元素設定overflow屬性，會強制加載子元素的高度，所以達到了隔開的效果。給子元素添加overflow屬性，會影響到子元素的子元素，不會影響到父級元素，想要實作隔開的效果1、洗掉父級子級元素的overflow，給父級元素添加邊框就行==>border：1px solid #fff 。或者父級元素使用 padding-top:10px 都可以，還有很多種方法，望采納轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/234789.html
標籤：HTML(CSS)
上一篇：網頁代碼
下一篇：求教這個CSS的頁面布局