margin-top:50%,子元素为什么不相对父元素下移？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*完善下列代码*/
.per{
width: 300px;
height: 300px;
background: red;
margin-left:200px;
margin-top: 200px;
}
.son{
width: 100px;
height: 100px;
background: blue;
margin-left:50%;
margin-top:50%;
position:relative;
left:-50px;
/* top:-50px; */
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
为什么给子元素设置了margin-left可以生效呢？
css中对于盒模型规定了：所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、padding或border分隔。
嵌套也属于毗邻，所以子元素的margin是会影响父元素的，但是子元素的margin-top:50%，是相对与父元素的宽度来进行计算的。比父元素自己定义的margin-top值要小，所以子元素和父元素的top值都显示为200px；但其实子元素的top值是150px哦。
如果不想子元素影响父元素，可以给父元素添加一个属性overflow:hidden
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星