`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中文網其他相關文章！