如果不知道left和right，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:500px;
height:500px;
background-color: #bfa;
position:relative;
}
.box2{
width:100px;
height:100px;
background-color: orange;
position:absolute;
/*
水平布局
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
=包含块的内容区的宽度
- 当我们开启了绝对定位后:
水平方向的布局等式就需要添加left和right两个值
此时规则和之前一样,只是多添加了两个值:
当发生过度约束:
如果9个值中没有auto,则自动调整right值以使等式满足
如果有auto,则自动调整auto的值以使等式满足
- 可设置auto的值
margin width left right
- 因为left和 right的值默认是auto,所以如果不知道left和right
则等式不满足时,会自动调整这两个值.
垂直方向布局的等式的也必须要满足
top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块的高度
*/
/* left:0;*/
/* right:10px; */
/* top:0;
bottom:0; */
margin:auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
可见left和right和margin都为auto时，并不会让绝对定位元素在包含块里水平方向居中，而是只调整right为400px，让其补齐500px
当left和right都为0时，才会自动调整margin使绝对定位元素在包含块里水平居中
left:0;
right:0;
/* top:0;
bottom:0; */
margin:auto;
原创文章，作者：306829225，如若转载，请注明出处：https://blog.ytso.com/269823.html