[分享]css中div两边宽度

CSS中，div是网页排版中必不可少的标签，它可以帮助我们将页面分为不同的块，方便我们进行布局。然而，在使用div进行布局时，经常会遇到一个问题就是div的两边宽度不一致，这是为什么呢？div { w...

CSS中，div是网页排版中必不可少的标签，它可以帮助我们将页面分为不同的块，方便我们进行布局。然而，在使用div进行布局时，经常会遇到一个问题就是div的两边宽度不一致，这是为什么呢？

div {
    width: 200px;
    margin: 0 auto;
    border: 1px solid #000;
} 

我们首先来看看上面这段CSS代码，这是一个最基本的div样式。其中，width定义了div的宽度为200px，margin设置了水平居中，border添加了1像素的黑色实线边框。

但是，当我们在浏览器中查看结果时，会发现div的左右两端的边框线距离浏览器窗口边缘的距离是不同的，左侧比右侧宽出了一些。这是因为边框线是在div内部的空间以外绘制的。

为了让div的两边宽度一致，我们可以使用box-sizing属性，将它的值设置为border-box。这样，div的宽度就包括了边框宽度，而不是从边框外计算宽度。

div {
    box-sizing: border-box;
    width: 200px;
    margin: 0 auto;
    border: 1px solid #000;
} 

通过添加box-sizing: border-box属性，可以解决div两侧宽度不一致的问题。这是CSS中非常实用的一个属性，具有很强的兼容性，可以大大方便我们进行布局设计。