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