css的两种盒模型

Posted maxueting

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css的两种盒模型相关的知识,希望对你有一定的参考价值。

W3C标准盒模型

技术图片

在标准盒模型中,width指content部分的宽度。

IE的盒模型

技术图片

在IE盒模型中,width表示content+padding+border这三个部分的宽度

 

 

box-sizing的使用

定义使用哪种盒模型的属性

box-sizing:content-box  是W3C 盒子模型

box-sizing:border-box 是IE盒子模型也叫怪异模型

box-sizing:padding-box   padding计算入width内,不包括border

 

以上是关于css的两种盒模型的主要内容,如果未能解决你的问题,请参考以下文章

CSS两种盒模型

网页设计css盒子模型代码

精通css 高级web标准解决方案——可视化格式模型

盒子模型

CSS3盒模型温故

前端面试题一(题目来源网络)