CSS box-sizing:border-box应用详解

一、什么是box-sizing

box-sizing是CSS3新增的一个属性，用于控制元素宽高的计算方式，常见的有两种值：

box-sizing: content-box;  // 默认值，宽高只计算内容区域
box-sizing: border-box;   // 宽高计算包括内容、内边距和边框

box-sizing属性的主要作用是让开发者控制元素的盒模型，从而更加灵活地进行页面布局。下面我们来看一些实际应用。

二、box-sizing实战-响应式布局

在移动端开发中，响应式布局是比较常见的技术，使用box-sizing可以很好地实现这一点。我们可以通过设置所有元素的box-sizing为border-box，然后使用百分比作为宽度，达到自适应的效果。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.box {
  width: 25%;
  padding: 20px;
  float: left;
}

在上面的代码中，我们将所有元素都设置为border-box盒模型，这样可以计算内边距和边框的宽高，避免了使用传统的盒模型（content-box）时会出现的盒子宽度换算问题。接着，设置.container宽度为100%，防止盒子超出父容器，然后限制最大宽度为1200px，实现响应式布局。最后是.box的样式，宽度为25%时，可以自适应宽度，而padding的值不会改变宽度，均布四个盒子。

三、box-sizing实战-响应式表格

使用box-sizing实现响应式表格也是一种常见的技术。我们可以使用border-spacing属性来控制单元格间距，同时设置单元格宽度为百分比，使用box-sizing: border-box属性。这样可以实现表格在不同尺寸的设备上自适应的效果。

table {
  border-collapse: separate;
  border-spacing: 0px;
  width: 100%;
}

td {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}

在上面的代码中，通过设置table的border-collapse为separate，使单元格有一个边框。同时，使用border-spacing: 0px来控制单元格的间距。接着，设置td的宽度为50%和 padding 10px，实现表格单元格水平分布和自适应。

四、box-sizing实战-图片自适应

当图片大小不同时，如何保持图片的比例不受影响呢？可以使用box-sizing实现图片自适应的效果。我们可以将图片包裹在div中，将box-sizing设为border-box、将div的padding-bottom属性值设置为图片高度与宽度比例的百分比。

.wrapper {
  position: relative;
  width: 100%;
}

.img-box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  padding-bottom: 75%; // 图片高度与宽度比例为4:3
}

.img-box img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

在上面的代码中，我们用div包含了图片，将其放在一个相对定位的wrapper中，然后用绝对定位的方式将div居中。接着，将div的width设置成100%，padding-bottom设置成图片高度与宽度的比例（这里是4：3）。最后再将img的max-width和max-height都设置为100%，实现图片的自适应效果。

总结

box-sizing属性使得开发者可以更加灵活地控制元素的盒模型，较好地实现手机端的响应式布局、响应式表格、图片自适应等效果。使用box-sizing: border-box时，需要注意内边距和边框的宽高计算问题，从而准确计算元素的实际大小。