box-sizing-70
刘耀文的大沙雕
钟意阿满
如何让box-sizing 在div内失效
box-sizing是CSS的一个属性，很好的解决了盒模型的相关问题。CSS中的盒模型（Box model）分为两派，一派是W3C的标准模型，一派是IE的传统模型。那它们之间有什么不同的呢？首先需要明确它们都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系；而不同的地方就在于两者的计算方法不一至：（下面引用一些公式向大家展示一下两者的不同之处）
W3C的标准盒模型
IE传统盒模型（IE6以下不含IE6版本或“QuirksMode下IE5.5+”）
接下来直接看看box-sizing的应用吧。
box-sizing属性可以分为两个值：content-box（default），border-box。
content-box，border和padding不计算入width之内。
border-box，border和padding计算入width之内。
（注1：ie8+浏览器支持content-box和border-box；ff则支持全部三个值）
（注2：使用时，有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-）
栗子，接住：
<style type="text/css">。
.content-box{
-webkit-box-sizing:content-box;。
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;。
background: blue;。
.border-box{
-webkit-box-sizing:border-box;。
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;。
background: yellow;。
</style>
我是在谷歌下运行的，所以加了-webkit-前缀，效果如下：
蓝色加边框：总宽150px，高150px。
黄色加边框：总宽100px，高100px。
抱起亚轩找小葵
为什么css里面没有box-sizing这个属性？
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
语法：box-sizing: content-box|border-box|inherit;。
你要在那一层级上写box-sizing，是<div id="a"></div>的上一层不，你在上一层写，下一层不继承的。
你想要写的是内边框的
大圣杰锅是
如何在VSCode解决办法可以设置div的box-sizing:border-box(盒模型)~
有的。
语法
box-sizing: content-box|border-box|inherit;。
属性值1、content-box 。
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
属性值2、border-box 。
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
属性值3、inherit 规定应从父元素继承 box-sizing 属性的值。
小韩在追星
CSS box-sizing 属性为什么没有 margin-box
盒子模型概述：
所有HTML元素都可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：
盒子模型组成以及对应区域
盒子模型的组成：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
以上是html中盒子模型的结构，每个元素都可以用这个盒子模型来解析。在开发中，一个元素的样式表现形式，也是由这个盒子模型的每个部分来表现的。对应到css中样式的属性有一下几个纬度——
width, height, padding, border, margin。由于在不同的浏览器中，这几个属性所表示的盒子模型中的部分有所差异，所以又分为了标准盒子模型和怪异盒子模型。
一，标准盒子模型
解释：在标准盒子模型下
（1）css中的width, height属性，分别表示的是盒子模型中content的宽度和高度。
（2）css中的padding，表示的是盒子模型的的padding部分。
（3）css中的border，表示的是盒子模型中的border部分。
（4）css中的margin，表示的是盒子模型中的margin。
二，怪异盒子模型（ie盒子模型）
解释：在怪异盒子模型下
（1）css中的width, height属性，分别表示的是盒子模型中content的宽度和高度加上盒子模型中padding和border的宽度。
（2）css中的padding，表示的是盒子模型的的padding部分。
（3）css中的border，表示的是盒子模型中的border部分。
（4）css中的margin，表示的是盒子模型中的margin。
**段落性总结 —— 标准盒子模型和怪异盒子模型的区别**。
从上述的内容可以看出，标准盒子模型和怪异盒子模型的区别，完全体现在css中width和height这两个属性对盒子模型的表现上。
标准盒子模型：css中width/height=content的width/height。
怪异盒子模型：css中width/height=content的width/height+padding+border。
导致的结果：
由于标准盒子模型和怪异盒子模型的存在，这就导致当同一段css代码作用在同一个元素上时，在不同盒子模型下的浏览器中，元素所占的宽度和高度却不同。
三，css3中box-sizing下的盒子模型。
语法：（属性）box-sizing: （属性值）content-box/border-box/inherit；
box-sizing对盒子模型的影响：
（1）当“box-sizing“的值为”content-box“时，css中的width所包含的部分是盒子模型中content的宽度。此时和标准盒子模型表现一致。
（2）当“box-sizing“的值为”border-box“时，css中的width所包含的是盒子模型中的content的宽度+padding+border的宽度。此时和怪异盒子模型的表现一致。
总结：box-sizing属性，让开发人员可以控制浏览器的是以标准盒子模型表现，还是以怪异盒子模型表现。
box-sizing的兼容性：
到此盒子模型的所有内容全部阐述完毕。
最佳方案：由于box-sizing的兼容性在ie8及以上，那在不要求兼容ie8一下的项目中，可以使用box-sizing给所有元素统一设置盒子模型的表现形式。个人推荐:。
*{box-sizing:'border-box'}。
这样只要设置的width的宽度，就是这个元素在页面中真实的宽度了。不用再去计算padding和border对width的影响。
对于需要兼容ie8的项目，就需要针对不同的浏览器，添加特定的代码。或者避免指定宽度的元素border和padding的设置。
相关内容：
1.行内元素之间的水平margin，即两个元素margin之和。
2.块级元素之间的竖直margin， 即取最大的。
3.嵌套盒子之间的margin，即父元素的padding+子元素的margin。
4.margin可以设置为负值。
不同浏览器的css前缀：Element {。
-moz-box-sizing: content-box;。
-webkit-box-sizing: content-box;。
-o-box-sizing: content-box;。
-ms-box-sizing: content-box;。
box-sizing: content-box;。
参考：
w3c标准：https://www.runoob.com/cssref/css3-pr-box-sizing.html。
小韩在追星
box-sizing出现是border-box有强烈的需求，在许多场合也更符合大多数人对于sizing的直觉。但margin-box其实很少人会这样理解sizing。
stackoverflow这个提问者的需求改用border和border-box，或者用calc函数，或者改用flexbox等都可以达成，且可能更符合直觉。况且margin存在collaspe和负值，如果要引入margin-box，会有点复杂，理解成本估计比前面的那些方式都要高。