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