CSS之绝对定位的位置以及子元素在父容器的居中显示
2023-11-15阅读：2501
元素开启了绝对定位:
水平布局：
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
垂直方向布局也必须满足等式：
topt+margin-top+border-top+padding-top+height+padding-bottom+border-bottom++margin-bottom+bottom
=包含块的高度
通过以上规则,可以实现使得子元素在父容器中居中显示(水平方向和垂直方向)``
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位元素的位置</title>
<style>
.box1{
width:500px;
height:500px;
background-color:#bfa;
/* 父元素开启相对定位 */
position: relative;
}
.box2{
width:100px;
height:100px;
background-color:orange;
/*设置水平居中显示 */
/* margin-left:auto;
margin-right:auto; */
/* 设置垂直方向垂直居中显示 */
/* margin-top:auto;
margin-bottom:auto; */
/* 设置水平方向和垂直方向居中显示 */
margin: auto;
/* 开启绝对定位 */
position: absolute;
/*
left和right的默认值为auto,所以如果不设置这两个值
则等式不满足时,会自动调整这两个值(必须设置)
*/
/* (水平方向)将子元素置父元素左上角处 */
left:0;
right:0;
top:0;
bottom:0;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>