盒子模型

一、盒子模型介紹

什麼是盒子模型？

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;
- 左右填充為50px
padding:25px 50px;
- 上下填充為25px
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;
- 左右邊距為50px
margin:25px 50px;
- 上下邊距為25px
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;
- 左、右邊框是 solid
border-style:dotted solid;
- 上、底邊框是 dotted
- 右、左邊框是 solid
border-style:dotted;
- 四面邊框是 dotted

上面的例子用了

border-style

。然而，它也可以和

border-width

、

border-color

一起使用。

清除預設樣式

border:none;
或者
border:0;
複制代碼

清除外線

outline:none;
複制代碼

清除HTML标簽元素的預設樣式

盒子居中顯示

作者

：泰鬥賢若如

微信公衆号

：見賢思程式設計

Github

:https://github.com/zyx110

有事微信

：zyxt1637039050

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連結，否則保留追究法律責任的權利。

我不能保證我所說的都是對的，但我能保證每一篇都是用心去寫的，我始終認同: “

分享的越多，你的價值增值越大

”，我們一同在分享中進步，在分享中成長，

越努力越幸運

。再分享一句話“

十年前你是誰，一年前你是誰，甚至昨天你是誰，都不重要。重要的是，今天你是誰，以及明天你将成為誰

。”

人生赢在轉折處，改變從現在開始！

支援我的朋友們記得點波

盒子模型超詳解——大佬不用看，新手看過來