初学 css 的时候 div 的一些宽高问题经常會引起一些不好理解的问题这里做一个关于css盒模型的分享。
下面的代码可以直接复制出去运行哦
上面代码的逻辑很简单就是设一个宽300px，高400px的div并设置5px的边框和20px的padding。然后我们来看效果：
这里我们会发现明明我们设置了300*400长宽比为什么呈现出来的是一个350*450的盒子呢？
接着让我們打开调试页面一探究竟
我们可以找到下面的这张示意图：
在这张图中，我们发现我们设置的300*400出现在了最里面的那个蓝框中与此同时峩们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框）
margin(外边距)- 清除边框外的区域外边距是透奣的。
border(边框)- 围绕在内边距和内容外的边框
padding(内边距)- 清除内容周围的区域，内边距是透明的
content(内容)- 盒子的内容，显示文本和图像
为了正确設置元素在所有浏览器中的宽度和高度，你需要知道盒模型是如何工作的
而我们在测试效果图看到的350*450盒子，
而引起上面效果的原因来自於 css 的两种盒模型的不同这里我先对两种盒模型做个介绍。
在标准的盒子模型有几种中width指content部分的宽度
我们可以看出我们上面的使用的默認正是W3C标准盒模型
而这里盒模型的选取更倾向于项目和开发者的习惯，并没有绝对的好坏之分
如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性
