CSS盒模型
什么是CSS盒模型？
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content ，合在一起就是在页面上看到的内容。为了增加一些额外的复杂性，有一个标准盒模型和替代（IE）盒模型。
组成盒模型需要的内容：
content：内容区域，通过
width和height设置。padding：内边距，内容区域外的空白区域，通过
padding设置。border：边框，包裹内容区域和内边距，通过
border设置。margin：外边距，盒子和其他元素直接的空白区域，通过
margin设置。
margin不会计入盒子的大小
[图片上传失败...(image-2169ae-1689210750933)]
标准盒模型
浏览器默认使用的是标准盒模型。
给标准盒模型设置width和height，实际设置的是content内容区域，盒子的宽高需要再加上padding和border。
盒子的宽度 = width + (padding * 2) + (border * 2)
盒子的高度 = height + (padding * 2) + (border * 2)
设置属性 box-sizing: content-box
标准盒模型示例
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n30" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">div {
width: 200px;
height: 200px;
padding: 10px;
border: 5px solid red;
margin: 10px;
}</pre>
[图片上传失败...(image-45205b-1689210750933)]
当前标准盒模型div的宽度为230px = 200 + 10 + 10 + 5 + 5，高度为230px = 200 + 10 + 10 + 5 + 5。
替代（IE）盒模型
IE浏览器默认使用替代盒模型，IE8+支持使用
box-sizing进行切换
如果需要使用替代盒模型，设置box-sizing: border-box属性即可。
盒子的宽度和高度和设置的width和height一样，只是内容区域的宽度和高度需要减去边框和内边距。
盒子的宽度 = width
盒子的高度 = height
设置属性 box-sizing: border-box
替代盒模型示例
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="css" cid="n46" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">div {
width: 200px;
height: 200px;
padding: 10px;
border: 5px solid red;
margin: 10px;
box-sizing: border-box;
}</pre>
[图片上传失败...(image-55a461-1689210750933)]
当前替代盒模型div的宽度为200px，高度为200px。
补充：
margin可以设置负值，padding不能设置负值，必须是>=0的值。
