CSS 盒子模型详解（标准盒模型/怪异盒模型）

盒模型都是由四个部分组成的，分别是margin、border、padding 和 content。即外边距，边框，内边距，内容。

一；标准盒模型

 

 

 

1. box-sizing: content-box 表示标准盒模型（默认值）

2.标准盒模型在计算宽高的时候只计算 content 内容的宽高，不包含内外边距以及边框的宽高。

3.当标准盒模型的宽高确认时，增加内外边距和边框会撑大原盒子。

二；怪异盒模型

 

 

 

1.box-sizing: border-box 表示IE盒模型（怪异盒模型）

2.怪异盒模型在计算宽高时包含 conntent 内容、padding内边距、border边框的宽高。

3.当怪异盒模型的宽高确认时，给怪异盒模型添加内边距和边框，怪异盒模型的宽高不会改变，而是通过向内压缩，挤压 content 内容的宽高实现。

————————————————
原文链接：https://blog.csdn.net/qq_59181609/article/details/126332869