前端盒模型详解
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`