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