老师看看这个margin-left: -400px;这个问题

老师看看这个margin-left: -400px;这个问题

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    *{

      margin: 0;

      padding:0;

    }

    .test{

     width: 800px;

     height: 100px;

     background: red;

     /*此处写代码*/

     position: fixed;

     left: 50%;

     margin-left: -400px;

   

   }

   .out{

    width: 100%;

    height: 2000px;

    background-color: #abcdef;

  }

</style>

</head>

<body>

  <div class="out">

    <div class="test"></div>

  </div>

</body>

</html>

为什么设置margin-left: -400px;,后实现居中

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

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

2回答
好帮手慕粉 2020-07-15 16:01:02

‘不努力就淘汰’同学你好,理解的是不正确的。margin负边距法实现居中显示,总的来说就是子元素先向右移动父元素的一半,再向左移动自身的一半。

1、a向右移动50%,是相对于b来说,向右移动b的宽度的一半。

2、margin-left:-400px,才是相对于自身来说的,因为自身的宽度是800px,所以再向左移动自身的一半即400px:

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

3、另外,同学如果有新的问题,建议同学新建一个问答进行提问呢。这样便于同学后期的复习与整理,老师也能更快的看到同学的问题。

祝学习愉快~

好帮手慕小鱼 2020-06-03 12:08:05

同学你好,对于你的问题解答如下:

当元素A相对于父元素B水平居中定位时,需要先将元素A移动到元素B宽度的一半处,此时设置定位的left值为50%;如图:

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


当元素A移动到元素B中线后,发现元素A相对元素B没有居中,还差了元素A宽度的一半,所以需要将元素A再往左移动自己宽度的一半,所以需要设置margin-left:-400px。如图:

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


这样两步就实现了元素的定位居中。

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

  • 老师可以这么理解么:a元素和b元素其实定位一样,a移到了b左边的一半,也就是他想对与b挪了400px,因为a是固定的,所以a挪了margin-left:-400px么?
    2020-07-15 15:29:04
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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