CSS設置邊框不被撐開 邊框是網頁設計中常用的元素之一，但是在CSS中設置邊框時經常會出現一個問題——邊框會撐開元素。這在布局和排版時會給設計帶來極大的困難。下面將介紹如何利用CSS設置邊框不被撐開。 在CSS中，我們通常使用border屬性來設置元素的邊框。例如： pre { border: 1px solid black; } 上述代碼會在pre元素周圍創建一個1像素寬、黑色的實線邊框。不過這種設置會導致元素的總寬度和高度增加2像素。這是因為邊框是在元素框框的外部顯示的。 如果我們想要讓元素不被撐開，可以使用CSS盒模型中的box-sizing屬性。這個屬性可以設置元素的盒模型計算方式。默認值是content-box，也就是不包括border和padding在內的內容寬度計算盒模型。而我們需要使用border-box，它會將元素的border和padding也算入盒模型內。 例如： pre { border: 1px solid black; box-sizing: border-box; } 上述代碼中的border-box屬性告訴瀏覽器在計算元素寬度時將border和padding也算入盒模型內。這樣就不會出現邊框撐開元素的問題了。 上面的代碼可以用簡寫方式表達： pre { border: 1px solid black; box-sizing: border-box; } 最后，建議開發者在設計頁面時就盡量考慮到邊框的寬度和元素的布局關系，這樣可以減少不必要的邊框設置導致的麻煩。