代码设置如下所示,son元素怎么没有填充满per元素

代码设置如下所示,son元素怎么没有填充满per元素

<!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;
     position:absolute;
     left:0;
     right:0;
     top:0;
     bottom:0;
     /*margin:auto;*/
   }
  </style>
</head>
<body>
  <div class="per">
    <div class="son"></div>
  </div>
</body>

</html>

http://img1.sycdn.imooc.com//climg/5ab6763600012a1d13030851.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

6回答
mr_chauncey 2018-04-28 11:23:07

son不要自定义宽和高,设置lrtb为0 margin:auto目的就是让son的宽高自适应父容器的大小

慕移动1381886 2018-04-27 15:38:29

定义的宽高就不行

Larkin610 2018-04-19 23:05:33

   .son{


     background: blue;

     position:absolute;

     left:0;

     right:0;

     margin:0 auto;

     /*margin:auto;*/

   }


  • 如果要达到填充的效果,不能定义宽高
    2018-04-19 23:06:08
  • 提问者 黑妞不是妞 回复 Larkin610 #2
    谢谢你的提醒和代码
    2018-04-29 11:22:36
慕粉3989962 2018-04-05 15:10:35

红色正方形的宽度和高度不会因为设置了top=0,right=0,left=0,bottom=0而改变,这些改变的只是红色方块的位置,因为设置了绝对定位属性,top和left离边框最近,所以设置的值就是有效的

破晓小哥哥 2018-03-30 19:55:44

son的宽和高必须为0的情况下才能充满整个per元素!

S丶crab 2018-03-25 01:00:04

son的尺寸比per小啊,怎么会充满per?

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师