CSS盒子模型的种类区别有哪些

这篇文章主要介绍“CSS盒子模型的种类区别有哪些”，在日常操作中，相信很多人在CSS盒子模型的种类区别有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS盒子模型的种类区别有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

站在用户的角度思考问题，与客户深入沟通，找到东乌珠穆沁网站设计与东乌珠穆沁网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、雅安服务器托管、企业邮箱。业务覆盖东乌珠穆沁地区。

盒子模型是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）padding-left:10px;左内边距

（2）padding-right:10px;右内边距

（3）padding-top:10px;上内边距

（4）padding-bottom: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盒子模型的种类区别有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！