盒子模型知多少？

什么是盒子模型？

我其实对这个问题很疑惑，刚开始我不知道什么是盒子模型。盒子模型有什么用，我百度或者查了一些资料才搞明白什么是盒子模型。
盒子模型：所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
以上是w3c组织对盒子模型的定义，简单来说，网页就是由一个个好看的盒子组装起来的，每个盒子里会放不同的东西，就像是一个分叉好看的餐盒一样。餐盒的每一层的外观都不一样，里面装的东西都不一样。而就是这么一层层餐盒就组成了我们的一个整体。而正是这些一个个功能样式不同的小盒子，凑在一块组成了我们的网页页面。
上面是一个盒子模型的样式图：
我们可以看到content（内容):顾名思义就是盒子里具体要装啥？这里面的标签决定了这个盒子的功能。
padding（内边距):他可以撑大盒子，颜色收到背景色的影响
border(边框)：盒子的边框，同样是受背景色的影响
margin(外边距):盒子的外边距，透明不受背景色的影响

盒子大小的计算方法

div{
width:300px;
height:300px;
margin:10px;
padding:5px;
border:5px solid red;
}

根据上面的图我们可以看到：
width：$300px+10\ast 2px+5\ast 2px+5\ast 2px=340px$
height:$300px+10\ast 2px+5\ast 2px+5\ast 2px=340px$

好了，我就bb到这，web新手，说的不对的还请各位网友帮忙指出！