元素必须满足的等式
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;
}
显示效果