CSS解決border影響元素寬高的問題（box-sizing屬性）
阿新 • • 發佈：2018-12-15
問題
我們在用 CSS 進行頁面佈局時，經常會給元素指定寬高。在沒有邊框時（border為0）往往父元素的寬高是子元素寬高的和。但是在新增邊框寬度後如果不調整元素寬度，會導致佈局錯亂。
例如我們想要下面這樣的效果：
一個寬度為 600px 的父元素下有三個 200px 的子元素。
可以這樣實現：
<body>
<div class="container">
<div class="item one"></div>
<div class="item two"></div> .container{
width: 600px;
height: 400px;
display: flex;
flex-wrap: wrap;
background-color: blue;
}
.item{
width: 200px;
height: 400px;
}
.one{
background-color: #bbb;
}
.two{
background-color 但是如果新增邊框後：
.item{
width: 200px;
height: 400px;
border: 2px solid red;
}
會出現這種情況：
導致這種情況出現的原因就是 border 的寬度並不在元素的 200px 範圍內，當增加 border 後實際上元素的寬度變為了 204px（200+2+2）。 這樣父元素的寬度不夠就會導致子元素換行。
解決方案
解決這種問題有兩種方案，第一種就是按照變化修改元素的寬高屬性。（當然不推薦，只有不懂css的新手才會這麼幹。/* 雖然我原來這麼幹過 */）
正確的解決方案就是修改 box-sizing 屬性。將 box-sizing 設定為 border-box 即可。
.item{
width: 200px;
height: 400px;
border: 2px solid red;
box-sizing: border-box;
}
這樣就達到了我們想要的效果，而且不需要修改元素寬高。
