? ? ? ?之前知道盒子模型，但是沒有進入到更深層次的理解中去，昨天晚上在做一個頁面內的導航欄時，出現了很多問題。所以今天在這里將有關盒子模型以及自己出現的問題整理一下，加深鞏固。

? ? ? ?1、什么是盒子模型？?

? ? ? ?網頁中間每一個元素都被表示為一個矩形的盒子，這個盒子的各種屬性是瀏覽器渲染的目標。CSS中規定了盒子的包裝樣式，盒子的擺放位置，盒子的長寬高等等，開發的頁面就好像是瀏覽器管轄下面的一所房子，一個個盒子就是房子通過的家具，你需要通過CSS使你的家具更加漂亮，結實耐用。一個盒子模型中分為以下幾部分：內容(content)、內邊距（padding）、邊框（border）、外邊距（margin）。

? ? ?2、盒模型的分類

? ? ?目前，有兩種盒模型，但是我們平時使用的是以W3C標準盒模型為主。

?

?? ? ??在W3C標準盒子模型中，width?和?height?指的是我們表示的內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框（或者說整體盒子）的總尺寸。IE盒子模型中，width?和?height?指的是內容區域+border+padding的寬度和高度（除去外邊距都算在內）。

? ? ? ?3、例子

<div class="box"><div class="box1"></div><div class="box2"></div></div> .box {background-color: pink;width: 200px;height: 200px;border: 3px solid palevioletred; } .box1{padding: 10px;background-color: palevioletred;width: 80px;height: 80px; } .box2{margin: 10px;background-color: peachpuff;width: 80px;height: 80px; }

效果圖：

由左圖可以看出設置的10px的padding，由下方小正方形可以看出10px的margin。

小了解：正是因為標簽都會有內外邊距、邊框，影響我們后面的定義的css樣式，所以在進行網頁開發的時候，我們通常會在css樣式代碼的開始利用通配符選擇器，去除掉margin和padding，初始化所有標簽。

---

病來如山倒，病去如抽絲，感冒發燒好難受....... ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 元氣少女，加油！?

總結

以上是生活随笔為你收集整理的一些有关盒子模型的话的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。