CSS盒子模型含义和原理的示例分析-创新互联

这篇文章主要介绍CSS盒子模型含义和原理的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

公司主营业务：成都网站设计、成都网站建设、外贸网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出安多免费做网站回馈大家。

什么是盒子模型

说起盒子模型，作为前端开发的我们，相信大家都有了解过的。这里套用mdn官网的解释：

在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸, 属性 --- 像它的颜色，背景，边框方面 --- 和位置是渲染引擎的目标。

在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。

官方语言总是那么的晦涩难懂，那我接用chrome的控制台的截图来说明吧：

CSS盒子模型含义和原理的示例分析

最外面橙色的就是外边距区域(margin area )，往里黄色的是边框区域(border area)，再往里的绿色的是内边距区域(padding area )，最里面绿色的就是内容区域（content area）了。

盒子模型的作用

好吧，盒子模型的概念好像没有什么好说的，就上面那张图片罢了。下面一起来看看盒子模型对我们布局有什么影响。举个栗子，假如想设置一个元素的大小为200px，如果写了如下的代码：



  盒子模型

结果，你在审查元素时，发现这个元素的大小变成了240px，而不是200px了。

CSS盒子模型含义和原理的示例分析

这是为什么呢？因为默认情况下，设置width 、height 等作用对象是内容区域，所以设置的width: 200px仅仅是内容区域的宽度，加上左右内边距大小，导致了元素的整体尺寸变大了。这和我们对现实世界的中盒子的认识有差异的。比如，你我们说房子的面积，并不单单指可用面积，还要包括墙壁厚度、阳台、电梯之类的空间的。

盒子模型和box-sizing

为了把CSS和现实世界对应起来，这时候box-sizing就要用上场了。box-sizing是用来设置width、height的作用对象的。有三个值，分别是content-box 、 paading-box 、 border-box，默认值是content-box。可能有人会问，为什么没有margin-box啊？具体原因就不知道了，可以参考张鑫旭老师在《CSS世界》一书中提到了两个原因：

margin-box 本身没有多大的价值

和 margin 的规范会冲突。因为margin规范写着“ margin的背景永远是透明的 ”，如果来个margin-box，那background怎么办？

至于为什么没有margin-box就简单的提一下，有兴趣的朋友可以自己去查一下。

最佳实践

为了布局上的方便，一些专家建议我们将所有的元素都设置为box-sizing: border-box

如果不考虑低版本浏览器的话，可以用下面的代码：

*,
*:before,
*:after { 
  box-sizing: border-box;
}

后来,又有专家建议用的继承的方法，如下：

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

这种方法被称为最佳实践，具体原因就不说了，既然是专家推荐，那我们以后可以把第二种方法的段代码放到reset.css里面的。

以上是“CSS盒子模型含义和原理的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章名称：CSS盒子模型含义和原理的示例分析-创新互联
文章网址：http://dzwzjz.com/article/dieedo.html

大橙子网站建设，新征程启航

CSS盒子模型含义和原理的示例分析-创新互联

其他资讯