老师这个头像居中是怎么回事,没有浮动为什么会需要overflow:hidden;

来源：3-2 项目作业

weibo_执著的弧线_0

2019-12-19 22:05:30

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>index</title>
   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
   <link rel="stylesheet" href="../lib/reset.css" />
   <link rel="stylesheet" href="/MeituanPR/Common/bottomBar/bottomBar.css" />
   <link rel="stylesheet" href="/MeituanPR/my/my.css" />
   <script type="text/javascript">
      <!--修改HTML根元素单位为rem-->
 (function () {
         var docEL = document.documentElement;
         function setRemUnit() {
            //获取rem基准值
 var rem = docEL.clientWidth/10;

            //动态设置HTML根元素的fontsize
 docEL.style.fontSize = rem + 'px';
         }
         setRemUnit();
         //窗口大小变化时触发
 window.addEventListener('resize',setRemUnit);

         //窗口出现在当前屏幕时(有浏览器兼容性)
 window.addEventListener('pageshow',function (e) {
            if (e.persisted){
               setRemUnit();
            }
         })
      })();
   </script>
</head>
<body>
   <!--头部开始-->
 <div class="my-top">
      <!--头像-->
 <div class="top-img"></div>
   </div>
   <div class="content">
      <div class="address">收货地址管理</div>
      <div class="coupons">商家代金券</div>
   </div>
   <div class="content">
      <div class="advice">意见反馈</div>
      <div class="proplem">常见问题</div>
   </div>
   <div class="content">客服电话:&nbsp;101-097-77</div>
   <div class="content-bottom">服务时间:&nbsp;9:00-23:00</div>
   <!--头部结束-->
   <!--底部栏开始-->
 <div class="bottom-tab"></div>
   <!--底部栏结束-->
<script type="text/javascript" src="/MeituanPR/lib/jquery.min.js"></script>
<script type="text/javascript" src="/MeituanPR/Common/bottomBar/bottomBar.js" ></script>
</body>
</html>

.my-top{
    height: 4.267rem;
    width: 100%;
    background-image: url("img/header.png");
    overflow: hidden;

}
.my-top .top-img{
    width: 1.92rem;
    height: 1.92rem;
    border-radius: 50%;
    border: 0.08rem solid rgba(255,255,255,0.4);
    background-image: url("http://i.waimai.meituan.com/static/img/default-avatar.png");
    background-size: cover;
    margin:0 auto;
    margin-top: 0.667rem;
}

写回答

1回答