前端学习笔记56-绝对定位元素的位置
没想到定位还没学完，继续学。
水平方向
在笔记36提到过水平布局
元素的以下七个值的和等于包含块的内容区宽度。
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
但是当我们开启了绝对定位后，就不止七个了，还得加上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: 0;
right:0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
这里我给box2开了绝对定位，为了明确它的包含块，我给box1开了相对定位。结果如下，即使我设置了left和right都为0，但是由于等式必须成立，所以right的设置无效。
因此，开启了绝对定位后，如果九个值中没有auto，浏览器自动调整的不再是margin-right，而是right。
可设置auto的有
margin-left margin-right width left right。
其中后面的三个默认值为auto。
垂直方向
之前垂直方向的的七个值可以不严格等于包含块的，但如果开启了绝对定位，就必须得等于了，且变成了九个值。
具体哪九个我就不写了，把水平的九个的left和right换成top和bottom，width换成height就是了。
让box2居中的一种方法
很简单，看代码
.box2{
width: 100px;
height: 100px;
background-color: orange;
margin:auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0;
}
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
