用这个定位可以达到要求为什么我用marginleft,top方法不行呢

<!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;
     position:relative;
   }
   .son{
     width: 100px;
     height: 100px;
     background: blue;
     /*top:0px;*/
     /*left:0px;*/
     /*right:0px;*/
     /*bottom:0px;*/
     /*position:absolute;*/
     margin-left:100px;
     margin-top:100px;
     margin-bottom:100px;
   }
  </style>
</head>
<body>
  <div class="per">
    <div class="son"></div>
  </div>
</body>
</html>

慕仙3016536 2019-01-16

源自：CSS定位（弃用） 2-7 编程练习

收起

2回答

好帮手慕查理回答被采纳获得+3积分 2019-01-17 11:02:12

您好，如果只使用margin时会造成整个布局margin-top距离上方100px;，那么就需要使用绝对定位完成距离per父元素100px像素的效果。绝对定位：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。参考如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /*完善下列代码*/
    .per{
     width: 300px;
     height: 300px;
     background: red;
   }
   .son{
     width: 100px;
     height: 100px;
     background: blue;
     position:absolute;
     margin-left:100px;
     margin-top:100px;
   }
  </style>
</head>
<body>
  <div class="per">
    <div class="son"></div>
  </div>
</body>
</html>

祝学习愉快！

收起回答

慕仙3016536 提问者 #1

嗯嗯！谢谢老师指导！我想问一下就是这个margin不是相对父元素的外边距嘛，也就是son相对于per的外边距是100px但是为什么会导致整个布局向下100px呢。求老师解答～

2019-01-17 18:04:34
好帮手慕查理回复提问者慕仙3016536 #2

您好，一个盒子如果没有上边距(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。也就是父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素，祖先元素的麻烦。只要给父元素设置个有效的border或者padding就可以有效的管制子元素的margin越级，把子元素自己的margin当父元素的margin执行。祝学习愉快！

2019-01-17 19:01:04
慕仙3016536 提问者回复好帮手慕查理 #3

懂了！谢谢老师

2019-01-18 12:58:24

好帮手慕查理 2019-01-17 09:49:30

您好，margin设置的是外边距，可以使用padding设置，但会将父元素撑大。如下效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /*完善下列代码*/
    .per{
     width: 300px;
     height: 300px;
     background: red;
     position:relative;
     padding-left:200px;
     padding-top:200px;
   }
   .son{
     width: 100px;
     height: 100px;
     background: blue;
   }
  </style>
</head>
<body>
  <div class="per">
    <div class="son"></div>
  </div>
</body>
</html>