CSS box-sizing 两种属性 border-box,content-box

box-sizing 是什么？

css的盒子模型box model 不会将padding与border计算到容器（如div）的宽高中的，

这就导致你所设定的容器宽度未必是最终宽度（需要加上padding与border）.

因此有了box-sizing：border-box的设定，其效果就是将padding和border纳入容器宽高

如何应用box-sizing

多用与所有css选择器，一般都在reset.css里直接指定

*{
box-sizing:border-box;
}

相对于border-box，原本的不计算padding与border的称为：content-box.

用 * 设置的问题是box-sizing是不被继承的，如果需要在某些地方用回content-box，

这个content-box内部的容器依然会是border-box;

可以这样设置

html{
box-sizing:border-box;
}
*,
*::before,
*::after{
box-sizing:inherit;
}

*::before 和*::after 也被加进来，并且所有元素都会继承上级的设定。

注：

bootstrap 推翻了这一设定，

理由：

chrome 中 details 无法正确继承父级的box-sizing，

bootstrap的做法，放弃继承的部分：如下：

*，
*::before,
*::after{
box-sizing:border-box;
}

chrome 存在的这个问题影响很小，所以就这个考虑而言，不推荐bootstrap的做法，

::after 是css3 的写法  要考虑兼容问题还是写  :after