女屌丝又来为你分享前端技术鸡汤啦！上一篇，简单的分享了float的使用以及注意事项，这一次给你分享点什么呢？？作为前端开发工程师，你觉得你还必须掌握的是什么呢？是不是想到了-盒子模型。对，就是它，这可谓是布局中的核心。通过上一篇我们认识了float，它能帮我们改变元素性质，能帮助我们让元素并排显示并且还能左右布局，那这就可以了吗？答案，是No！No！No！我们还需要掌握盒子模型的使用。你的布局稳不稳，它可是起到关键作用。那么下面我们就一起来看看这个比较让人垂涎欲滴的技术吧。
我们先来简单认识一下，什么是盒子模型？
说到盒子模型，那我们可以看到其中两个关键字“盒子”。日常生活中，盒子的作用是什么？是不是用来盛放东西，会根据要盛放东西的多少选择适合尺寸的盒子。那我们会将每个盒子放到指定的位置，每个盒子之间整齐堆叠或排列在一起。那么我们把这种情况放到前端页面中去思考，是不是我们的页面布局中也可以这样。把网页中零散元素内容，集中放在某个盒子中，然后将这些盒子整齐排列堆叠起来，这样一个整齐的页面是不是就可以实现了呢？比如看图1，这是我学习过程中模仿小米官网做的商城首页部分效果展示。
图1：喜科堂页面
从页面图片可以看出，我们可以把这四部分划分成四个模块，而这四个模块可以看成是四个大小不同的盒子，将性质相同的元素放在对应的盒子里边，就可以呈现出我们想要的布局，这样看起来是不是会舒服点。
那么通过盒子模型，就可以帮助我们实现这样的布局，让我们的页面看起来整齐，布局更加的稳当。
那么要想利用好盒子模型，我们就得清楚的认识什么是盒子模型。
首先，看一下盒子模型的概念，在HTML中，所有的HTML元素都可以看作盒子，在CSS中，“box model”是用来设计和布局时使用。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距、边框、填充，和实际内容。盒模型允许我们其它元素和周围元素边框之间的空间放置元素，下面通过图2，看一下标准盒子模型的图示。
图2：标准盒子模型
示例代码：图3
图3：示例代码
从图2可以看出，一个标准盒子的组成，是由内容（content）、内边距（padding）、border（边框）、外边距（margin）构成，在使用的过程中，可以根据实际的情况增加或减少其中某个组成，说到这儿，我们还得清楚知道一个标准盒子模型宽高的计算。
一个标准盒子模型宽高是如何计算呢？这个可是关系到内容布局。
从盒子模型的组成可以看出，一个盒子的宽度计算由以下公式组成：
boxWidth=contentWidth+padding*2+border*2+margin*2（PS：此处的*2代表的是左右大小，因此要乘以2）。
boxHeight=contentHeight+padding*2+border*2+margin*2。
根据以上这个计算公式，可以得出图2盒子的宽度实际是270px，高度也是270px。
以上就是我们网页中的一个标准的盒子模型，也是W3C标准盒子模型，是不是很好理解，下次再计算盒子宽高，不能再错了哦。
内容不多，但是全是干货经验分享。