前端的学习之路：初级CSS---绝对定位的布局
程序员文章站
2022-05-10 11:02:49
...
绝对定位的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位的布局</title>
<!-- <link rel="stylesheet" href="../chujicss/css/11.22.05.css"> -->
<style>
.box1{
width: 500px;
height: 500px;
background-color: #bfa;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: orchid;
position: absolute;
margin-left: auto;
margin-right: auto;
/* margin-top: auto;
margin-bottom: auto; */
/*
水平布局
left+margin-left+border-left+padding-left+width+padding-right+border-right+right=包含块的内容区的宽度
-当我们开启了绝对定位后：
水平方向的布局就需要添加left和right两个值
此时规则和之前一样只是多添加了两个值：
当发生过度约束：
如果9个值中没有auto则自动调整right值以使等式满足
如果有auto，则自动调整auto的值以使等式满足
可设置auto的值
margin-left，margin-right width left right
因为left和right的值默认是auto，所以如果不设置left和right
则等式不满足时，会自动调整这两个值
垂直方向布局的等式也必须要满足
top+margin-top/bottom+padding-top/bottom+border-top/bottom=包含块的高度
*/
left:0;right:0
/* top: 0;
bottom: 0;
*/
}
/* 可以使子元素在父元素水平垂直居中 */
/* .box2{
width: 100px;
height: 100px;
background-color: orchid;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto; */
/* margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto; */
/* 写为一个margin：auto */
/* left: 0;
right: 0;
top: 0;
bottom: 0;
}
*/
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
运行结果为：
水平居中：
上一篇： 学习部分经验
下一篇： 前端的学习之路：初级CSS---背景练习