标准W3C盒子模型和IE(IE6及其以前)盒子模型

盒模型：content，padding。border，margin

W3C盒子模型和IE(IE6及其以前)盒子模型的区别是，IEcontent部分包含了padding和border。

比如：一个盒子，content的宽为100px，高为50px；padding是10px；border是2px；margin是20px；
W3C盒子模型解释盒子占据的位置为：宽 100+102+22+202=164 高 50+102+22+202=114
W3C盒子模型解释盒子实际大小为：宽 100+102+22=124 高 50+102+22 = 74
IE盒子模型解释盒占据的位置为：宽 100+202= 140 高 50+202= 90
IE盒子模型解释盒实际大小为：宽 100 高 50

那么应该选择哪种盒子模型呢？当然是标准W3C盒子模型啦！所以加上doctype声明，所有浏览器都会采用标准W3C盒子模型，网页就能在各个浏览器中显示一致了。

赏

谢谢你请我吃糖果

微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

尽情期待