CSS寬度去除邊框樣式
在CSS中，我們可以通過設置元素的width屬性來控制其寬度。但是，如果我們的元素有邊框，那么設置的寬度不包含邊框寬度，這會導致元素的寬度比我們想象中的要寬。那么該如何去除邊框的影響呢？
方法一：使用box-sizing屬性
box-sizing屬性是CSS3中新增的屬性，可以控制元素盒模型的計算方式。默認情況下，元素的寬度是指內容區的寬度，而不包括邊框和內邊距。設置box-sizing為border-box時，元素的寬度計算方式變為包括邊框和內邊距。
示例代碼如下：

.box { 
width: 200px; 
height: 100px; 
padding: 10px;
border: 1px solid #ccc;
box-sizing: border-box; /* 添加此屬性 */
}

上述代碼中，設置了元素的寬度為200px，但是由于添加了1px的邊框和10px的內邊距，實際元素的寬度變成了222px。當添加box-sizing:border-box時，寬度計算方式變為包括邊框和內邊距，因此元素實際的寬度為200px。
方法二：使用calc()函數
calc()函數是CSS3中新增的函數，可以實現計算式運算，可以用來計算元素寬度。
示例代碼如下：

.box { 
width: calc(200px - 2px); /* 200px減去邊框寬度的兩倍 */
height: 100px; 
border: 1px solid #ccc;
}

上述代碼中，通過使用calc()函數，計算了元素的寬度為200px減去邊框寬度的兩倍，即為198px。
以上兩種方法都可以較好地解決元素寬度的問題，根據實際情況選擇即可。