CSS中“厚度”涉及width、height、border-width及padding、margin等属性，box-sizing决定尺寸计算方式：content-box下width仅含内容，border-box下width包含padding和border，推荐使用border-box避免布局溢出，实现更直观的尺寸控制。
CSS中设置“厚度”并非单一属性，它通常指的是通过
width、
height属性直接控制元素的尺寸，以及通过
border-width调整边框的粗细。此外，
padding和
margin也间接影响元素的视觉占位和“厚重感”，而
box-sizing属性则决定了这些尺寸的计算方式，理解这些是精确控制元素布局和外观的关键。
解决方案
当我们谈论CSS中的“厚度”，通常指的是几个关键维度：元素的实际宽度、边框的粗细，以及通过内边距和外边距间接营造出的空间感。
对于元素的实际宽度，我们直接使用
width属性。例如，
width: 200px;会将一个块级元素的宽度设定为200像素。
width: 50%;则会使其宽度占据父元素宽度的50%。这里要注意的是，
box-sizing属性对
width的计算方式有显著影响。默认的
content-box意味着
width只包含内容区域，而
border-box则会将
padding和
border包含在
width之内，这在布局时非常关键，我个人更倾向于全局设置
box-sizing: border-box;来简化宽度计算，避免很多不必要的布局问题。
边框的厚度由
border-width属性控制。你可以设定一个统一的值，比如
border-width: 2px;，或者为上下左右分别设定，如
border-top-width: 1px; border-right-width: 2px; border-bottom-width: 3px; border-left-width: 4px;。当然，简写形式
border: 2px solid #ccc;更常用，它包含了宽度、样式和颜色。有时候，我发现新手会忘记设置
border-style，导致
border-width设置了也看不见效果，这是个小坑。
立即学习“前端免费学习笔记（深入）”；
内边距
padding和外边距
margin虽然不直接定义“厚度”，但它们极大地影响了元素在页面上的视觉占位和与其他元素的距离，从而间接影响了整体的“厚重感”。
padding增加的是元素内容与边框之间的空间，使内容看起来不那么局促；
margin则增加元素与相邻元素之间的空间。例如，一个按钮如果
padding太小，会显得非常单薄，而适当的
padding则会让它看起来更饱满，更有点击区域。
/* 示例：设置一个div的宽度和边框 */
.my-element {
width: 300px; /* 元素宽度 */
height: 150px; /* 元素高度，这里也算一种“厚度” */
border: 5px solid #3498db; /* 边框厚度5px */
padding: 20px; /* 内边距，增加内容与边框的距离 */
margin-bottom: 30px; /* 外边距，增加与下一个元素的距离 */
background-color: #ecf0f1;
box-sizing: border-box; /* 个人偏好，让宽度包含padding和border */
}
/* 示例：只设置边框某个方向的厚度 */
.another-element {
border-top: 10px dashed #e74c3c;
border-left-width: 2px; /* 单独设置左边框宽度 */
border-right-width: 0; /* 右边框无宽度 */
border-bottom-width: 5px;
border-style: solid; /* 确保边框样式有定义 */
width: 200px;
height: 100px;
background-color: #f1c40f;
}box-sizing
如何影响CSS元素尺寸与厚度的计算？
box-sizing属性在CSS布局中扮演着一个至关重要的角色，尤其是在我们讨论元素“厚度”或者说尺寸计算时。它主要有两种模式：
content-box（默认值）和
border-box。理解这两者的区别，能让你在设置
width和
height时少走很多弯路，避免那些莫名其妙的布局溢出。
当
box-sizing设置为
content-box时，你设定的
width和
height仅仅指的是元素内容区域的尺寸。这意味着，如果你给一个
div设置了
width: 200px;，然后又加了
padding: 20px;和
border: 2px solid black;，那么这个
div的实际占用宽度将是
200px (内容) + 20px (左padding) + 20px (右padding) + 2px (左border) + 2px (右border) = 244px。这在做响应式布局或者需要精确计算尺寸时，常常会让人头疼，因为你需要不断地在
width中减去
padding和
border的值，或者手动计算。
而当我把
box-sizing设置为
border-box时，情况就完全不同了。此时，你设定的
width和
height将包含
padding和
border的尺寸。也就是说，如果你设置
width: 200px;，并且有
padding: 20px;和
border: 2px solid black;，那么这个
div的实际占用宽度就是
200px。内容区域的宽度会自动调整为
200px - 20px (左padding) - 20px (右padding) - 2px (左border) - 2px (右border) = 156px。这种模式极大地简化了布局计算，特别是在处理多列布局或者组件封装时，我几乎总是倾向于使用
border-box。这让我能更直观地思考元素的总尺寸，而不用担心
padding和
border会“撑大”元素。
/* 全局设置，个人推荐的做法 */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit; /* 继承html的box-sizing */
}
/* 演示两种box-sizing的区别 */
.content-box-example {
width: 100px;
padding: 10px;
border: 5px solid blue;
background-color: lightblue;
box-sizing: content-box; /* 明确指定，通常是默认值 */
margin-bottom: 20px;
}
.border-box-example {
width: 100px;
padding: 10px;
border: 5px solid green;
background-color: lightgreen;
box-sizing: border-box; /* 包含padding和border */
}通过上面的代码，你可以清楚看到，虽然两个元素的
width都设为
100px，但
content-box的
