CSS中不計算border寬度是指當我們設置一個元素的寬度或高度時,CSS不會包括元素的邊框寬度。比如:
div {
width: 100px;
height: 100px;
border: 2px solid red;
}
上面的代碼中,我們設置了一個div元素的寬高都是100px,并且添加了2px的紅色邊框。實際上這個元素的寬度是104px(100px寬度 + 2px左邊框 + 2px右邊框)。
如果我們希望實際寬度就是100px,可以使用CSS3中的box-sizing屬性:
div {
width: 100px;
height: 100px;
border: 2px solid red;
box-sizing: border-box;
}
使用border-box屬性會告訴CSS將元素的寬度和高度包括邊框和內邊距在內進行計算,最終的寬度仍是100px。而默認的content-box屬性則不會將邊框寬度計入寬度的計算中。
因此,當我們在設計界面時要格外留意元素的邊框寬度,以避免寬度溢出或未達到預期效果。