盒子模型关于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: px;
            height: px;
            background-color: blue;
            float: right;
            border: px solid #000;
            padding: px;
        }