Css盒子模型
一、当box-sizing:content-box(标准盒模型)
width=content
div{
box-sizing: content-box;
width: 100px;
height: 100px;
border: 10px solid red;
padding: 20px;
margin: 20px;
}
let div= document.querySelector('div')
console.log(div.offsetWidth);
//width 160px=100px+2*20px+2*10px
二、当box-sizing:border-box(IE盒模型、怪异盒模型)
width=content+padding+border
div{
box-sizing: border-box;
width: 100px;
height: 100px;
border: 10px solid red;
padding: 20px;
margin: 20px;
}
let div= document.querySelector('div')
console.log(div.offsetWidth);
//width 100px