如何使用 CSS 使 Div 邊框保持一致？

實現一致的Div 邊框

當使用邊框設計div 元素時，標準CSS 方法（例如，“邊框：1px 純黑色” ） ) 將邊框厚度加到div 的大小中。例如，1px 邊框將導致 div 的尺寸為 102px x 102px，而不是預期的 100px x 100px。

利用「box-sizing」屬性

為了修正這個問題，CSS 引入了「box-sizing」屬性。透過將此屬性設為“border-box”，瀏覽器會將邊框寬度視為 div 尺寸的一部分。

程式碼中的實作

請考慮以下程式碼:

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

透過指定“box-sizing: border-box”，div 現在的尺寸為100px x 100px，20px 邊框包含在這些尺寸內。

以上是如何使用 CSS 使 Div 邊框保持一致？的詳細內容。更多資訊請關注PHP中文網其他相關文章！