盒子模型关于box-sizing属性

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;
}