CSS解决border影响元素宽⾼的问题（box-sizing属性）
问题
我们在⽤ CSS 进⾏页⾯布局时，经常会给元素指定宽⾼。在没有边框时（border为0）往往⽗元素的宽⾼是⼦元素宽⾼的和。但是在添加边框宽度后如果不调整元素宽度，会导致布局错乱。
例如我们想要下⾯这样的效果：
⼀个宽度为 600px 的⽗元素下有三个 200px 的⼦元素。
可以这样实现：
<body>
<div class="container">
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
</div>
</body>
.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: #777;
}
.three{
background-color: #444;
}
但是如果添加边框后：
.item{
width: 200px;
div border属性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;
}
这样就达到了我们想要的效果，⽽且不需要修改元素宽⾼。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。