css左右两边宽度

CSS中可以用Box-sizing属性来控制元素的盒模型的宽度计算方式。默认情况下，元素的宽度是由内容(content)、内边距(padding)和边框(border)三部分共同决定的，使得CSS布局比较困难。

一个比较典型的例子就是在一个宽度为x的容器中放置两个div元素，一个宽度为y，另一个宽度为x-y，需要通过CSS来控制两个元素的宽度来达到效果。我们可以使用float属性，或者使用display:inline-block，来让两个元素并排排列，但是它们的宽度却比较难调节。

在这种情况下，可以使用Box-sizing: border-Box来让元素的宽度是由内容+内边距+边框的总宽度来计算的。这样我们就可以直接使用百分比来设置元素的宽度，而不需要手动计算容器宽度和子元素宽度的差值。

/* 不使用border-Box的计算方式 */
.container {
  width: 800px;
}

.item1 {
  width: 50%;
  float: left;
  Box-sizing: content-Box;
  padding: 10px;
  border: 2px solid #ccc;
}

.item2 {
  width: calc(50% - 24px);
  float: right;
  Box-sizing: content-Box;
  padding: 10px;
  border: 2px solid #ccc;
}

/* 使用border-Box的计算方式 */
.container {
  width: 800px;
}

.item1 {
  width: 50%;
  float: left;
  Box-sizing: border-Box;
  padding: 10px;
  border: 2px solid #ccc;
}

.item2 {
  width: 50%;
  float: right;
  Box-sizing: border-Box;
  padding: 10px;
  border: 2px solid #ccc;
}

上面的代码演示了两种不同的计算方式。在不使用border-Box的情况下，我们需要手动计算子元素的宽度；而在使用border-Box的情况下，子元素的宽度是可以直接使用百分比来设置的。

需要注意的是，使用border-Box的计算方式会让元素的内部空间变小，因为内边距和边框的宽度也要算在宽度内。如果需要让元素的内部空间和以前一样大，可以提高元素的宽度和高度。