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

标准盒模型和怪异盒模型

作者: 前端开发养成记 | 来源:发表于2021-08-11 16:54 被阅读0次

    1. 标准盒模型

    width:代表内容区域的宽度;

    height:代表内容区域的高度;

    盒子总宽:width + 内边距 + 边框 + 外边距;

    2. 怪异盒模型

    width:代表的是 内容区宽度 + 内边距 + 边框;

    height:代表 内容区高度 + 内边距 + 边框;

    盒子总宽:width + 外边距;

    3. box-sizing 属性

    通过这个属性,可以规定盒子是以标准盒模型还是怪异盒模型(IE盒模型)来渲染。

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

    content-box:默认值,以标准盒模型模式去解析计算;

    border-box:以怪异盒模型去解析计算。

    相关文章

      网友评论

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

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