</body> </html> 结果如下：

如何在VSCode解决办法可以设置div的box-sizing:border-box(盒模型)~

框模型的概述：所有HTML元素都可以视为框，在CSS中，“ BoxModel”一词用于开发和演示文稿。
CSS框模型本质上是一个框，它封装了周围的HTML元素，其中包括：边距，边界，铺设和实际内容。
盒子模型使我们能够将元素放入其他元素和周围元素边界之间的空间中。
下一个图像由盒子的框说明：框模型的组成和框模型的相应区域：字段（字段） - 清洁边界外的区域，电源是透明的。
边框是内部边缘和外部内容周围的边界。
木乃伊 - 清洁内容周围的区域，内部边缘是透明的。
显示文本和图像的含内容字段是HTML中拳击模型的结构，可以使用此盒子的盒子分析每个元素。
在开发中，元素样式的表达也用盒子的每个部分表示。
对应于CSS中样式的属性具有以下纬度 - 宽度，高度，垫圈，边框，边缘。
由于这些属性代表的框模型的部分在不同的浏览器中不同，因此它们分为框的标准模型和Beard框模型。
1 标准框模型的说明：在框（1 ）的标准模型下，CSS中宽度和高度的属性分别表示框模型中内容的宽度和高度。
（2 ）CSS中的衬里是框模型的一部分。
（3 ）CSS中的边框代表框模型中边界的一部分。
（4 ）CSS中的边距是框模型中的字段。
2 盒子的奇怪模型（即框模型）的解释：在框（1 ）的奇怪模型下，CSS中的宽度和高度的属性是框模型中内容的宽度和高度CSS中框（2 ）衬里的垫圈和边框的宽度是盒子盒的一部分。
（3 ）CSS中的边框代表框模型中边界的一部分。
（4 ）CSS中的边距是框模型中的字段。
**段落摘要是标准框模型与怪异框**模型之间的差异，我们看到差异是差异在盒子的标准模型和怪异框模型之间，对于模型性能框的CSS中的两个宽度和高度的属性，都完全反映了。
标准框型号：宽度/高= CSS中的内容怪异框模型：宽度/高度= CSS中内容/高度+贴片+边框的宽度结果：从标准模型的存在和盒子的奇怪盒子中，这是结果是，当将一个和一个和一个相同的CSS代码应用于同一元素时，元素的宽度和高度在不同模型的盒子中占据不同。
3 盒子模型的语法在CSS3 中的盒子大小下：（属性）盒子的分布：（属性值）框/box-box/nehrit的内容； - 当大小的值为“内容框”时，CSS中宽度中包含的部分是框模型中内容的宽度。
目前，这与盒子的标准模型一致。
（2 ）当“盒子的大小”的值是“边框框”时，CSS中的宽度包含内容 +边界 +边界 +框模型中的边界的宽度。
目前，这对应于一个奇怪盒子的模型的性能。
摘要：盒子大小的属性使开发人员可以控制浏览器是否使用奇怪盒子的标准盒或型号的标准盒显示。
盒子大小的兼容性：该框模型的整个内容都得到了解释。
最好的解决方案：由于盒子的尺寸的确定具有IE8 及更高的兼容性，在不需要IE8 的项目中，可以使用盒子的大小确定盒子的大小来设置表达所有模型的模型元素。
个人建议： *{box-size：'border-box'}，因此，如果安装了宽度，这是页面上此元素的真正宽度。
无需计算垫圈和边界对宽度的影响。
对于应与IE8 兼容的项目，必须将特定代码添加到不同的浏览器中。
或避免设置用指示宽度填充的边界和元素。
相关内容：1 线中的元素之间的水平边缘，即两个元素的总和。
2 块水平元素之间的垂直边缘最大。
盒子之间的3 个 - 即覆盖父元素 + margin4 可以在不同浏览器的CSS前缀的负值上安装孩子的元素：元素{-moz-box-size- contents-box; -webkit-box-size：content-box; -o-o-o-box-size：content-box; -ms-box-size：content-box; Box-Size：content-box;}链接：W3 C标准：https：//www.runoob

修改盒模型计算方式

有两种计算框模型的方法，不同的是如何计算框的宽度和高度值。
可以通过CSS中的盒子大小来检查计算框模型的方法。
1 盒子：盒子大小时的内容框：我们设置的元素的宽度和高度实际上是框型号中内容区域的宽度和高度。
目前，框的宽度=宽度（内容区域） +填充 +边框，而计算框高度的方法也是如此。
特定的计算如下图所示：2 有限的Sigsis：框：边框框；此时设置宽度和元素高度，这是框的宽度和高度。
目前，计算框模型的方法如下图：block级别1 元素上的注释。
更大的边距。
2 当块级元素为巢时：当一个块级别元素包含块级别的另一个元素时，如果父元素目前未放置限制并填充，则在父级上方和下方的余量，以及在孩子的上方和下方的余量元素将崩溃，因此巨大的价值是父母最终要素边缘的价值。

css盒子模型及盒子模型的类型

从新手教程转载所有HTML元素都可以视为框。
在CSS中，设计和布局时使用术语“ BoxModel”。
CSS框模型本质上是一个包装盒，它封装了周围的HTML元素，其中包括：边距（外边缘），边界，边界，填充（内部边缘）和实际内容。
框模型使我们能够将元素放在其他元素和周围元素边界之间的空间中。
下图说明了框型号（BoxModel）：有两种类型的框型号从链接中复制，即W3 C框型号（标准框型号）和IE框型号（怪异的框模型）。
1 在标准框型号中，宽度是指内容区域。
内容的宽度； 高度是指内容区域内容的高度。
2 标准框模型下的盒子大小=内容+边框+填充+边框1 怪异框模型的宽度是指内容，边框和内部边框的总宽度（内容+边框+填充）； 高度是指内容，边界，内部边距2 的总高度。
但是，尝试添加内部边距或边缘会添加到元素的父和子元素中。
也就是说，盒子大小的属性可以指定框模型的类型，内容框指定框模型是W3 C（标准框模型），并且Border-Box是IE框模型（怪异的框模型）。