元素必须满足的等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度
- 7个参数的中，若手动设置后等式不成立，称为过度约束，浏览器会自动调整
- 调整策略如下，其中width、margin-left和·margin-right可以设置为auto
| 参数取值 | 调整结果 |
|---|---|
| 无auto | 调整margin-right |
| 一个值为auto | 调整该值 |
| width为auto，一个或两个margin为auto | width调整为最大，margin调整为0 |
| width为固定值，两个margin为auto | 调整使两个margin相等 |
- 前面提到块元素的默认宽度会把父元素撑开，因为width的默认值是auto
- 常用width固定、两margin为auto来设置居中
div{
height: 100px;
width: 100px;
margin: auto;
background-color: #bbffaa;
}
显示效果
