前端盒模型详解

2022-09-07 15:35:40
## #标准盒模型:`box-sizing: content-box;`(w3c盒子模型) ![百度](https://img-blog.csdnimg.cn/20200229115102416.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pyMTU4MjkwMzkzNDE=,size_16,color_FFFFFF,t_70) ## #IE盒模型:`box-sizing: border-box;` ![百度](https://img-blog.csdnimg.cn/20200229115122566.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pyMTU4MjkwMzkzNDE=,size_16,color_FFFFFF,t_70) 从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content **和标准 w3c 盒子模型不同的是:** IE盒子模型的 content 部分包含了 border 和 padding。 两者的不同体现在width和height上 `IE:width=content+padding+border ` `W3C: width=content`