內部邊框與外部邊框
使用邊框設計 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中文網其他相關文章！
