盒子模型关于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;
        }