css布局为什么两边有空白

CSS布局技术是网页制作中非常重要的一部分，其中一个常见的问题就是布局两侧出现空白的情况。这种情况出现的原因有多种，但主要是因为盒模型的问题。

.Box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #000;
    background-color: #ccc;
}

我们以一个例子来说明这个问题。在上述代码中，我们定义一个类名为Box的div元素，它的宽高均为200px，设置了20px的内边距和1像素的边框，并使用了自适应的margin值来实现居中效果。如果我们在HTML中引用这个类名，并在浏览器中查看，你会发现这个元素两侧都留有一些空白。

这个问题的原因在于CSS中盒模型的标准规定，一个盒子的宽度并不仅仅包括width，还包括padding、border和margin。因此，如果我们只修改元素的width属性，而不修改padding或border的值，就会导致元素两侧出现空白的现象。

要解决这个问题，我们需要修改盒子的盒模型属性，从W3C标准盒模型切换成IE盒模型。在IE盒模型中，一个盒子的宽度不包括它的padding和border，只有margin会加入盒子宽度的计算。在CSS中，我们可以使用Box-sizing属性来控制盒子的盒模型。将Box-sizing属性值设置为border-Box即可实现IE盒模型。

.Box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #000;
    background-color: #ccc;
    Box-sizing: border-Box;
}

通过修改Box-sizing属性，我们就可以解决盒子两侧留白的问题了。此外，还有一些问题可能会导致盒子两侧出现空白，例如浮动、定位等，这些问题需要根据具体情况进行处理。