盒子模型中过度约束问题及其解决办法

Y-琼眸

于 2022-08-04 16:40:37 发布

阅读量600

点赞数 7

文章标签：前端 css html

本文链接：https://blog.csdn.net/rbh200812/article/details/126161811

版权

盒子模型就是用来布局的，之前已经讲了盒子模型的基本内容，接下来我们就来看看用盒子模型进行水平布局时遇到的一个问题——过度约束问题。

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

首先我们先建立两个盒子box1 box2，然后我们给这两个盒子设置样式，如下图

 <style>
        .box1{
            width: 600px;
            height: 200px;
            border: 10px red solid;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            padding: 0 20px;
            margin: 0 10px;
        }
    </style>

这样我们就得到了两个不一样的盒子。

我们来先看看能改变box2的水平方向大小位置的一些属性

有下列七个属性：margin-left、border-left、padding-left、width、padding-right、border-right、margin-right

浏览器规定，水平方向七个值相加必须等于其父元素内容区的宽度，如果不等于，浏览器会自动调整七个值中的一个值让其成立，这就是过度约束。

这个时候我们看看上面那串代码，七个值的和为20+10+10+100+10+10+20=180，这并不等于我们的父元素600，所以浏览器就会自动调整一个值让它们成立。

那么下来我们就来看看浏览器是如何调整的。

1.七个值中如果没有auto，那么浏览器默认调整margin-right

2.七个值中如果有auto，那么浏览器就调整auto

可以设置auto的属性有margin-right width margin-left

（1）一个auto，谁是auto就调整谁

（2）两个auto，只要width为auto就调整width

margin-right width为auto margin-left固定值浏览器调整width