css布局学习笔记之box-sizing

当你设置了元素的宽度，实际展现的元素却能够超出你的设置：因为元素的边框和内边距会撑开元素。

.div{
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

上面的元素所展示出来的效果，宽度会不止500px。这可能不是我们想要的。通常或许我们会去计算宽度来实现想要的效果。但是如果计算的地方太多的话，事件很烦人的事。

此时我们可以通过设置box-sizing：border-box来实现。

.div{
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

此时，该div所展示出来的宽度就是500px，外边距和内边距将会在这个宽度内进行绘制。实际上，就是缩小了内容的宽度，此时的内容宽度是设置的值减去边距。

box-sizing:content-box;就是未设置box-sizing属性时的默认效果。

* {
  -webkit-box-sizing: border-box; /* Safari */
     -moz-box-sizing: border-box; /* Firefox */
          box-sizing: border-box;
}

这样可以确保所有的元素都会用这种更直观的方式排版。