`box-sizing: border-box` 如何影响带边框的 HTML 元素的大小？

内部边框与外部边框

使用边框设计 HTML 元素时，必须考虑边框相对于边框的位置元素的尺寸。默认情况下，CSS 边框放置在元素外部，向两侧添加宽度。

使用 Box-Sizing 维护 Div 大小

确保 div 的尺寸保持不变添加边框后，box-sizing 属性就会发挥作用。将其设置为 border-box 包括元素指定宽度和高度内的边框。

CSS 实现

这里有一个 CSS 示例，演示了 box 的效果 -调整大小：

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

在此示例中，div 的边框为 20px。如果没有 box-sizing: border-box，div 的总宽度为 140px（内容为 100px，每侧边框为 20px）。但是，使用 box-sizing: border-box 时，边框包含在指定的 100px 宽度内，确保 div 的实际宽度保持为 100px。

以上是`box-sizing: border-box` 如何影响带边框的 HTML 元素的大小？的详细内容。更多信息请关注PHP中文网其他相关文章！