老师，我用左右值设为0的方法实现居中了，没看懂任务3是怎么设置的
来源：2-14 编程练习
Redamancy_Y6
2019-11-21 12:04:53
<!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:0;
right:0;
margin:0 auto;
}
.out{
width: 100%;
height: 2000px;
background-color: #abcdef;
}
</style>
</head>
<body>
<div class="out">
<div class="test"></div>
</div>
</body>
</html>
写回答
1回答
-
同学你好，关于你的问题，回答如下：
1、这种方式实现效果也是可以的，任务这里主要是提示的作用，若是有其他思路实现也可以。
2、只有这个提示的方式，可以参考如下理解：
（1）首先要明白：设置左外边距为负值，是会往左移动的
（2）然后，实现的原理可以参考如下来理解：
因为先设置了left50%，就是如下的情况，红色div块向右移动了父级的50%，现在div红色块左边框部分所在的位置就是父级的50%处（一半）。如下图：
所以红色块设置margin-left:负的自身的一半，会让红色块本身向左移动自身的一半，这个时候，红色块的一半处以父级的一半处不就正好在同一个位置么，可以测试下，先设置left:50%，看下效果。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0h019-11-21
相似问题