Css盒子模型

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