2-9作业，没按照任务要求做

<!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;
   top:0;
   left:0;
   right:0;
   margin:auto auto;
   }
   .out{
    width: 100%;
    height: 2000px;
    background-color: #abcdef;
  }

我本来想让红色居中，然后就试试如何移到上面，就把bottom删掉了，这是什么原理呢？麻烦能耐心讲讲么？

慕先生8562478 2017-09-14

源自：CSS定位（position） 2-14 编程练习

收起

5回答

Miss路 2017-09-15 19:09:35

1、

position:fixed;

top:0;

left:0;

right:0;

bottom: 0;

margin:auto auto;

这么写能让红色的块水平方向和垂直方向都居中

2、

position:fixed;

top:0;

left:0;

right:0;

margin:auto auto;

这么写相当于margin：0 auto的效果，margin：0 auto表示上下填充为0，左右自适应。

祝学习愉快，

收起回答

小丸子爱吃菜 2017-09-15 16:26:28

要这样设置：

.test {
    width: 800px;
    height: 100px;
    background: red;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    }

margin:0 auto;定位元素的居中设置是这样设置的。

收起回答

小丸子爱吃菜 2017-09-14 22:16:03

首先，代码中的position拼写错误。

其次，不明白“我本来想让红色居中，然后就试试如何移到上面，就把bottom删掉了，这是什么原理呢？”这句话想表达的是什么意思，如果是实现水平居中的话，给红色横条设置margin-left：-400px；就可以了。

收起回答

提问者慕先生8562478 #1

因为我一开始设置成这样： top:0; left:0; right:0; bottom:0 margin:auto auto; 敲出来的效果就是红色方块在左上角，后来我把bottom:0删掉，发现红色居然在中间了，也达到了任务中的效果，这是什么原理呢？？？

2017-09-15 13:39:24

提问者慕先生8562478 2017-09-14 21:12:53

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    .test{
     width: 800px;
     height: 100px;
     background: red;
     /*此处写代码*/
     positon:fixed;
   top:0;
   left:50%;
   }
   .out{
    width: 100%;
    height: 2000px;
    background-color: #abcdef;
  }
</style>
</head>
<body>
  <div class="out">
    <div class="test"></div>
    
  </div>
</body>
</html>

收起回答