box-sizing常用的属性有哪些？分别有什么作用？

最新推荐文章于 2025-06-27 15:22:38 发布

转载最新推荐文章于 2025-06-27 15:22:38 发布 · 1.4w 阅读

HTML5+CSS3 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS中box-sizing属性的两种取值方式：content-box和border-box。解释了这两种方式如何影响元素的尺寸计算，以及它们在实际网页布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。