左右距离设置为0px，不是很明白
来源：2-14 编程练习
慕仰5025445
2020-06-13 21:21:20
左右设置为0px，test的宽度比out宽度小，左右可以设置为0px？？总觉得哪里不理解，不明白
<!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:0px;
right:0px;
margin:auto;
/*left:50%;*/
/*margin-left:-400px;*/
/*right:50%;*/
/*margin-right:-400px;*/
}
.out{
width: 100%;
height: 2000px;
background-color: #abcdef;
}
</style>
</head>
<body>
<div class="out">
<div class="test"></div>
</div>
</body>
</html>
1回答
-
好帮手慕粉
2020-06-14
同学你好，设置left:0,right:0是在横向上把元素充满了容器，同时自身指定了宽度，总宽度（固定） = width（固定） + margin-left + margin-right。当margin设置为auto的时候，左右边距会平分，元素自然就居中了。
这里可以换一个理解方式，设置离左边的距离为0，右边的距离为0，再设置margin:auto时（居中显示），元素就会被“拽到”中间显示，就像拔河效应一样，左边跟右边的力气一样，那绳子就是在中间显示。
如果我的回答帮助了你，欢迎采纳。祝学习愉快~
0
相似问题