"简单介绍下盒模型"

转载翻译原创

问答题 · 前端 · css · @{ formatTime(detail.create_time) }

简单介绍下盒模型

盒模型由内到外content,padding,border,margin四个属性组成。
市场上使用广泛的主要有两种模式，分别是：

W3C的标准盒模型

由图可知：width = content，不包含 border + padding

** IE盒模型**

由图可知：width = border + padding + content

如何设置两种模型?

.box {
    /* 标准模型 */
    box-sizing:content-box;

     /*IE模型*/
    box-sizing:border-box;
}

PS：写作不易，如要转裁，请标明转载出处。

猜你想看: 什么是BFC和IFC？; span右浮动后会发生什么变化？; line-height属性值带单位与不带单位的区别？; flex对齐方式有哪些？; 1rem、1em、1vh、1px各自代表的含义？; 物理像素和逻辑像素区别？; 为什么calc计算要加空格？

回顶部