【CSS】盒子模型
CSS 盒⼦模型将每个 HTML 元素表示为⼀个矩形的盒⼦，这个盒⼦包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
- 内容（content）：元素的实际内容，由 width 和 height 属性决定。
- 内边距（padding）：内容和边框之间的空间，由 padding 属性决定。
- 边框（border）：内容和外边距之间的边框，由 border 属性决定。
- 外边距（margin）：盒⼦边缘和其它元素之间的空间，由 margin 属性决定。
CSS 盒⼦模型中，盒⼦的总⼤⼩由这四个部分加起来决定，即 width + padding + border + margin。需要注意的是，CSS 盒⼦模型有两种，分别是标准盒⼦模型和怪异盒⼦模型。
- 标准盒⼦模型中，盒⼦的⼤⼩ = width + padding + border + margin
- 怪异盒⼦模型中，盒⼦的⼤⼩ = width + margin，因为 width 已经包含了 padding + border
在 CSS 当中，可以通过设置元素的 box-sizing 属性来决定元素显示为哪种盒模型：
- content-box：默认值，当前元素会显示为标准盒模型。
- border-box：当前元素会显示为怪异（替代 / IE）盒模型。
原文地址：https://blog.csdn.net/XiugongHao/article/details/140672713
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！