我们知道，盒子模型是css中一个重要的概念，只有理解了盒子的模型你才能更好的布局和排班，但是一般我们所说的盒子模型分为俩种，一种ie盒子模型和一种w3c盒子模型
ie 盒子模型的范围也包括margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了border 和 pading。
例：一个盒子的 margin 为 20px，border 为1px，padding 为 10px，content 的宽为 200px、高为 50px，
假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：宽20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽1*2+10*2+200=222px、高 1*2+10*2+50=72px；
假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。
立即学习“前端免费学习笔记（深入）”；
盒子模型的选定：
怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。
PS：CSS中margin和padding的区别
在CSS中margin是指自身边框到自身外部另一个容器边框之间的距离，就是容器外距离；padding则是容器内距离。
一、padding
1、语法结构
（1）盒子模型:10px; 左盒子模型
（2）盒子模型:10px; 右内边距
（3）盒子模型:10px; 上内边距
（4）盒子模型:10px; 下内边距
（5）padding：10px; 四边统一内边距
（6）padding:10px 20px; 上下、左右内边距
（7）padding:10px 20px 30px; 上、左右、下内边距
（8）padding:10px 20px 30px 40px; 上、右、下、左内边距
2、可能取的值
（1）length 规定具体单位记的内边距长度
（2）% 基于父元素的宽度的内边距的长度
（3）auto 浏览器计算内边距
（4）inherit 规定应该从父元素继承内边距
3、浏览器兼容问题
（1）所有浏览器都支持padding属性
（2）任何版本IE都不支持属性值“inherit”
相信看了这些案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
相关阅读：
盒子模型
盒子模型
盒子模型
以上就是CSS里的盒子模型的种类区别的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3121114.html
