盒子模型

一、盒子模型介紹

什麼是盒子模型？

CSS盒子模型就是在CSS技術中所使用的一種思維模型。CSS假定所有的HTML文件元素都生成一個描述該元素在HTML文件佈局中所佔空間的矩形元素框，可以形象地將其看作是一個盒子。

所有的HTML元素可以看做盒子，它包括：外邊距、邊框、內填充和實際內容。

但是這樣說實在是太官方了，對新手很不友好，我個人也不喜歡這樣描述。

舉個例子

在日常生活中，我們經常能看到一些精美的包裝盒

在中秋節的時候，大家都吃過月餅，那些月餅的包裝真是好看啊，有時候都不捨得拆包裝，但拆開包裝後你會發現，其實真正裝的月餅沒幾個，價格還特別貴，感覺就是在賣包裝。

閒話少說，直奔主題，在包裝盒中就裝著如下圖所示的兩個小月餅盒，看著是不是還不錯啊。

我們可以把這個小月餅盒看作是頁面中的一個元素，比如div元素，裡面的月餅就是盒子模型的實際內容(content)，這個實際內容可以是文字，也可以是圖片，還可以是另外一些標籤元素。

我們把月餅盒到月餅之間的距離叫盒子模型的內填充，在CSS中的樣式中叫padding

而月餅盒與另一個月餅盒之間距離叫盒子模型的外邊距,在CSS中的樣式中叫margin

月餅盒最外層，也就是下圖中黃色的部分叫盒子模型的邊框，在CSS中的樣式中叫border

所以到這，我們都應該知道，原來，我們之前所學習的HTML的標籤元素都是具備實際內容，包含了一些文字、圖片以及一些其他的標籤元素，並且，還有所謂的border、padding、margin，而這些就構成了我們現在所說的盒子模型。

我們之前所學的很多如下圖所示的塊級元素它們都具備盒子模型的特徵。

二、盒子模型的屬性介紹

大家看到上面的程式碼圖片以及網頁顯示圖片了吧，我來說明一下：

首先有一個div標籤，裡面設定了長度、寬度、內邊距、背景顏色以及邊框等屬性。 其實別的一些屬性不難理解，後面我也會講到，在這我就想跟大家強調一個內容：

我們看到div中設定的寬度為200px，但這個寬度不是盒子的實際寬度，而是盒子內容的寬度。

那此時盒子的實際寬度又是多少呢？

盒子的實際寬度=盒子左右兩邊邊框的寬度(3px*2)+左右兩邊的內邊距(50px*2)+盒子內容的寬度(200px)=306px。

基本屬性介紹：

• Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
• Border(邊框) - 圍繞在內邊距和內容外的邊框。
• Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
• Content(內容) - 盒子的內容，顯示文字和影象。

最終元素的總寬度計算公式是這樣的：

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

Padding(填充)

CSS padding（填充）是一個簡寫屬性，定義元素邊框與元素內容之間的空間，即上下左右的內邊距。

• padding-top：設定元素的頂部填充
• padding-bottom：設定元素的底部填充
• padding-left：設定元素的左部填充
• padding-right：設定元素的右部填充

Padding屬性，也可以用一到四個值表示上下左右的內邊距：

• padding:25px 50px 75px 100px;

  • 上填充為25px
  • 右填充為50px
  • 下填充為75px
  • 左填充為100px

• padding:25px 50px 75px;

  • 上填充為25px
  • 左右填充為50px
  • 下填充為75px

• padding:25px 50px;

  • 上下填充為25px
  • 左右填充為50px

• padding:25px;

  • 所有的填充都是25px

Margin(外邊距)

CSS margin(外邊距)屬性定義元素周圍的空間。

• margin-top：設定元素的上外邊距。
• margin-bottom：設定元素的下外邊距。
• margin-left：設定元素的左外邊距
• margin-right：設定元素的右外邊距。

Margin屬性，也可以用一到四個值表示上下左右的內邊距：

• margin:25px 50px 75px 100px;

  • 上邊距為25px
  • 右邊距為50px
  • 下邊距為75px
  • 左邊距為100px

• margin:25px 50px 75px;

  • 上邊距為25px
  • 左右邊距為50px
  • 下邊距為75px

• margin:25px 50px;

  • 上下邊距為25px
  • 左右邊距為50px

• margin:25px;

  • 所有的4個邊距都是25px

Border屬性

邊框樣式(border-style 值)

border-style屬性可以有1-4個值：

• border-style:dotted solid double dashed;

  • 上邊框是 dotted
  • 右邊框是 solid
  • 底邊框是 double
  • 左邊框是 dashed

• border-style:dotted solid double;

  • 上邊框是 dotted
  • 左、右邊框是 solid
  • 底邊框是 double

• border-style:dotted solid;

  • 上、底邊框是 dotted
  • 右、左邊框是 solid

• border-style:dotted;

  • 四面邊框是 dotted

上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

清除預設樣式

border:none;
或者
border:0;
複製程式碼

清除外線

outline:none;
複製程式碼

清除HTML標籤元素的預設樣式

盒子居中顯示