简单说一说什么是过度约束,如何调整
浏览器规定:
水平方向的七个值相加必须等于其父元素内容区的宽度,如果不等于,
那么浏览器就会自动调整七个值中的某值,让其成立,这就叫过度约束。
水平方向有七个值为:
margin-left+border-left+padding-left+width+padding-right +border-right+ margin-right
如何调整:
1、七个值中如果没有auto,那么浏览器默认调整的是margin-right
10+10+20+100+20+10+ 430 ==600
2、七个值中如果有auto,则浏览器就会调整auto
可以设置auto大小的属性,是margin-left width margin-right
(1)1个auto,谁是auto,浏览器就调整谁
(2)2个auto
margin-left width auto margin-right固定值 调整width
width margin-right auto margin-left固定值 调整width
margin-left margin-right auto width 固定值 左右外边距平分,盒子会居中显示
(3)3个auto
margin-left width margin-right 调整width
总结:
浏览器调整
width>margin
元素的水平方向的布局
元素在其父元素中水平方向的位置由一下几个属性共同决定
margin-left border-left padding-left width padding-right border-right margin-right
一个元素在其父元素中,水平布局必须要满足以下的等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
=父元素内容区的宽度(必须满足)
举例:子元素 inner七个元素的值如下
0 +0 + 0+ 200 + 0 + 0 + 0 =600 ??不成立
以上等式必须满足,如果相加结果等式不成立,则称为过度约束,则浏览器会让等式自动调整
-调整的情况
1:如果七个值中没有auto情况,则浏览器会调整margin-right值以使等式满足
0 +0 + 0+ 200 + 0 + 0 + 400 =600
2:这7个值中width,margin-left,margin-right,这三个值可以设置auto
如果有设置auto,则浏览器会自动调整auto的值,以使等式成立
0 +0 + 0+ auto + 0 + 0 + 0 =600 auto=600
0 +0 + 0+ auto + 0 + 0 + 200 =600 auto=400
3:如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大
4:如果三个值都是auto,也只会调整宽度
5:如果将两个外边距设为auto,宽度固定,则两侧外边距会设置为相同的值
会使元素自动在父元素中居中,所以我们经常将左右外边距设置为auto
演示代码为;
<!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>
.outer {
width: 600px;
height: 200px;
border: 10px red solid;
}
.inner {
width:100px;
height: 100px;
background-color: #bfa;
/* padding: 0 20px; */
border: 10px solid green;
/* margin-left:auto;
margin-right: auto; */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
演示效果为: