美文网首页
标准盒模型VS怪异盒模型

标准盒模型VS怪异盒模型

作者: 神秘者007 | 来源:发表于2018-04-18 08:10 被阅读251次

    一,原理
    css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型。
    大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准。
    怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。
    当不对Doctype进行定义时,会触发怪异模式。

    在标准模式下,一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

    在怪异模式下,一个块的总宽度=width+margin(左右)(既width已经包含了padding和border值)

    image.png
    image.png

    二,用法(css3的box-sizing)

    box-sizing:content-box || border-box || inherit;

    当设置为box-sizing:border-box时,将采用怪异模式解析计算;

    相关文章

      网友评论

          本文标题:标准盒模型VS怪异盒模型

          本文链接:https://www.haomeiwen.com/subject/okwmkftx.html