CSS中box-sizing: border-box
首先我们先来看一下默认的盒子模型
<div id="">我好累啊</div>
div {
width: 200px;
height: 200px;
background-color: #005AA0;
border: 10px solid red;
padding: 20px;
margin: 20px;
box-sizing: content-box;//默认的样式,可以不写
}
在浏览器中的显示
这个div盒子在浏览器上我们能看到的占据空间为260*260即内容(200px)+border-left/right(20px)+padding-left/right(40px)=260px如下图所示:
当我们设置了宽高200px的时候,一旦设置了其他属性(padding,border,margin)时候,该盒子在浏览器中实际显示的大小就会发生改变,这个时候box-sizing: border-box来了,当我们把上边的属性换掉
box-sizing: content-box 更改为 box-sizing: border-box
再打开浏览器看看效果
可以看到,这个div在浏览器中实际占用的空间为200px*200px了
即为内容(140px)+padding-left/right(40px)+border-left/right(20px)=200px