html盒模型之入門篇

html盒模型之入門篇

首先我們先要了解什麼是盒子，就是能裝下別的東西的盒子。而在我們網頁中盒模型就是把html頁面中的元素看作乙個能裝內容的矩形的容器。而這個矩形的容器都是由內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。入下圖的盒模型簡圖。

如上圖，看過上圖我們是能夠更加直觀的了解到盒模型的組成部分了。

看到這裡我想有人會說盒子的寬（width）和高（height）是什麼了？

有人會像上面一樣回答。但這不是非常完美的答案。我為什麼會這樣說請看下圖

看上面的這個盒子，width：500px；height：200px; 但是在網頁中真是顯示的寬高是602*302。這位是因為還要加上padding、和border的值。所以盒子寬高和盒子在頁面中的顯示寬高是不一樣的。上面的那個等式因該加上一句「盒子在頁面中顯示打大小「。

盒子的作用是用來放內容的。而我們都是有審美感的，所以為了讓盒子在頁面中更好的布局，和自由的控制盒子在頁面中的樣式。我們可以通過一下的屬性進行單一屬性設定。

外邊距（margin）：

內邊距（padding）

邊框（border）

margin-top 頂部外邊距

padding-top 頂部內邊距

border-top 上邊框

margin-bottom 底部外邊距

padding-bottom 底部內邊距

border-bottom 底邊框

margin-left 左部外邊距

padding-left 左部內邊距

border-left：左邊框

margin-right 右部外邊距

padding-right 右部內邊距

border-right 右邊框

上面的**和網頁介面顯示告訴我們：

margin是相鄰div（盒子）之間的間距，影響的是同級元素之間的位置間距關係；

padding是盒子內邊框（border）到盒子內容的間距，需要注意的是在使用padding的過程中會將盒子模型「撐大「，撐大的方向需要我們將寬或高減去撐大的數值。如下圖

邊框以下屬性：邊框樣式（border-style）、邊框顏色（border-color）、邊框寬的（border-width）和其他屬性如圓角邊框。

盒子邊框：border:border-width(邊框款的）border-style(邊框樣式）border-color(邊框顏色);

邊框寬度（border-width）、邊框顏色（border-color）這兩個屬性是根據實際情況來確定屬性值的，他們兩和***要講的邊框樣式有相同之處。

邊框樣式（border-style）

 solid：邊框為單實線

 dashed：邊框為虛線

 dotted：邊框為點線

 double：邊框為雙實線

當border-style的屬性值為不同個數是，

border-style：上邊右邊下邊左邊；

border-style：上邊左右兩邊下邊；

border-style：上下兩邊左右兩邊；

border-style：四條邊；