box-sizing属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变
增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
box-sizing取值
1.content-box
元素的宽高 = 边框 + 内边距 + 内容宽高
2.border-box
元素的宽高 = width/height的宽高
.xx{
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: blue;
float: right;
border: 20px solid #000;
padding: 20px;
}