1 border-box
box 包含四部分:content,padding,border,margin
当box-sizing 设置成border-box时
此时设置该div的width = content.width+padding.width+border.width
*{
box-sizing:border-box;
}
div{
border:20px solid red;
width:200px;
height:200px;
}
image.png
*{
box-sizing:border-box;
}
div{
border:20px solid red;
width:0px;
height:0px;
}
此时,按道理说,width=0了,应该看不到该div
但是现实结果出乎意料
image.png
这个div是完全由border撑起来的,这时候只考虑border的width,不考虑width