标准盒子模型&IE盒子模型

153 阅读1分钟
  • 标准盒子模型 = margin*2 + border*2 + padding*2 + width (width = content )

    标准盒子模型设置的width是36px,再设置padding10px,content还是36px

    image.png

    image.png

  • IE盒子模型 = margin*2 + width(width = border*2 + padding*2 + content )

    ie盒子模型,你设置的width包含了border、padding、content,如下图,虽然设置了宽36,但是设置了padding 10px,content就会变成36-10*2=16:

    image.png

    image.png