05.绝对定位元素的布局1
作者:互联网
水平布局
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和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 =包含块的高度
<!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;
/* right:0; */
/* 靠右 */
/* left:0; */
/* 靠左 */
/* left:0;
right:0; */
/* 发生了过度约束,自动调整right为400px */
/* left:0;
right:0;
width:auto; */
/* 宽度撑满,因为浏览器会尽量调整width以使等式满足 */
/* margin-left:auto;
left:0;
right:0; */
/* 靠右 */
/* margin-left:auto;
margin-right:auto;
left:0;
right:0; */
/* 水平居中 */
/* margin-left:auto;
margin-right:auto; */
/* 靠左,因为left和right默认是auto,所以如果不指定left和right
那么等式不满足时,会自动调整这两个值
*/
/* 相当于 */
margin-left:auto;
margin-right:auto;
left:auto;
right:auto;
/* margin没用了,调整left和right,发生过度约束,right400px */
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
标签:定位,right,05,auto,元素,width,等式,margin,left 来源: https://www.cnblogs.com/sherryyuan/p/16409814.html