盒模型宽高值的计算方式，边界塌陷，负值作用，box-sizing

标准盒模型：内容区域只有宽度和高度。
计算总宽度=内容+内边距+边框+边距。
奇怪的盒子模型：宽度和高度包括内容、填充和边框。
计算总宽度 = 内容 + 内边距 + 边框。
折叠边框：同级元素的垂直边距被合并并取最大值。
重叠父元素和子元素的垂直边距。
负边距：可以覆盖元素并调整布局。
例如，负上边距覆盖了上面的元素。
框尺寸：内容框（标准）、边框框（宽度和高度包括内边距+边框）。
操作提醒：边框框常用于简化计算，需要手动调整边距。

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

箱体模型有两种类型：标准箱体和奇数箱体。

标准盒子模型：宽度只计算内容的宽度。
盒子的总宽度=内容+边框+内边距+边距。

罕见的盒子模型：宽度计算内容+边缘+填充。
盒子的总宽度=宽度+边距。

浏览器默认使用标准盒模型。
使用 border-box 来改变奇怪的盒子。

装饰元素不是直接添加的。
添加父母或孩子。

盒子模型简介

盒模型是 Web 元素在页面上占用空间的方式。
在W3 C模型中，宽度是内容+填充+边框+边距。
在IE模型中，内容+边框直接通过宽度计算。

根据W3 C模型，元素宽度为1 00px，内边距为1 0px，边框为1 px，实际占用1 2 2 px。
根据IE模型，宽度为1 00px，内边距为1 0px，边框为1 px，内容宽度变为7 8 px。

CSS3 的box-size属性解决了不同浏览器中盒子模型差异的问题。
内容框是默认的W3 C模型，边框框是IE模型。
该属性从 IE8 开始支持，并被现代浏览器支持。
为了与旧版浏览器兼容，开发人员可以添加前缀。