css 大话盒子模型

什么是盒子模型？

CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每一个元素（element）都有盒子模型，因此说在Web世界里（特别是页面布局），Box Model无处不在。

什么是Box Model?

为何要理解盒子模型？

由于（可以更好的装逼）？

若是你理解了盒子模型，你就能知道这个东西在页面上面的大小，既然知道了这个东西的大小，那么反之你就能够在页面上面为所欲为的控制这个东西进行定位了（砧板上的肉）。

可是通常 咱们说的盒子模型其实组要仍是针对的是块状元素，非行内元素。

既然这个东西那么好，我应该怎么理解了？头疼？

确定要先知道应该如何的计算这个盒子。

咱们由外而内的来讲说盒子，咱们先来看看内容？

若是我没有设置他的宽度和高度其实他是auto设置。若是我给了具体的高度他是什么样子的？（其实我不想在截图的但是本人今天心情好）

我插？为何我设置的高度与宽度不是整个盒子的高和宽了，只有内容的了。。。。尼玛原来之前理解的有问题啊。知道这个有什么用啊？（然并卵）

其实这个在你定位的时候就颇有用（下次讲有具体的用）说了那么多但是盒子的计算我仍是不知道啊？

其实盒子的计算方法是？

盒子的宽度=内容宽度 + border宽度 + padding宽度 + margin宽度

我去这么复杂啊？我笨怎么办啊，彻底不会啊？（很差截图去搞了个QQ截图看起来舒服点）

我去这个盒子大小是多少了？ 我用谷歌浏览看结果是？210px*410px .什么状况亮瞎了个人眼睛啊，这个到底什么什么状况，为何会这样啊，后来我仔细一看原来是我看错了，很差意思让你们受惊吓了。 

问题又来了，既然是这样的话，那不是很恶心我设置高度和宽度的时候都是内容了，那 我想设置这个盒子的，有什么好办法了，我就不行去调整其余的属性。怎么搞？

 看懂了没有？若是没有看懂我也就醉了。

下面一张会专卖讲定位。我是新手欢迎你们吐槽，常常麻烦美工我也很差意思了。如今开始专门学一下这个。欢迎你们拍砖谢谢

参考：http://www.cnblogs.com/wangfupeng1988/p/4287292.html