哈哈哈哈。翻出了css，隨便寫寫 ......

盒模型簡介

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計和布局時使用。

CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。

1. margin(外邊距) - 邊界外的透明區(qū)域。由外邊距邊界限制，用空白區(qū)域擴展邊框區(qū)域，以分開相鄰的元素。它的尺寸為 margin-box 寬度 和 margin-box 高度。
2. border(邊框) - 邊框在填充和內(nèi)容周圍。由邊框邊界限制，擴展自內(nèi)邊距區(qū)域，是容納邊框的區(qū)域。其尺寸為 border-box 寬度 和 border-box 高度。
3. padding(內(nèi)邊距) - 內(nèi)容周圍的透明區(qū)域。由內(nèi)邊距邊界限制，擴展自內(nèi)容區(qū)域，負責(zé)延伸內(nèi)容區(qū)域的背景，填充元素中內(nèi)容與邊框的間距。它的尺寸是 padding-box 寬度 和 padding-box 高度。
4. content(內(nèi)容) - 實際文本和圖像。由內(nèi)容邊界限制，容納著元素的“真實”內(nèi)容，例如文本、圖像，或是一個視頻播放器。它的尺寸為內(nèi)容寬度（或稱 content-box 寬度）和內(nèi)容高度（或稱 content-box 高度）。

css盒模型

頁面渲染中的盒模型

為了正確設(shè)置元素在所有瀏覽器中的寬度和高度，我們需要知道盒模型是如何工作的。
下面介紹css的兩種盒模型。

1. W3C的標(biāo)準(zhǔn)盒模型（標(biāo)準(zhǔn)盒模型）
   width是只指content部分。
2. IE盒模型 （怪異盒模型）
   width包含content、padding、border部分。
   
   image.png

在css3中有box-sizing屬性可以來改變盒模型的類型，值為content-box，代表W3C盒模型，盒子定義寬高 = 內(nèi)容寬高（content），為默認值；值為border-box代表IE盒模型，盒子定義寬高 = 內(nèi)容寬高（content） + 內(nèi)邊距 （padding）+ 邊框（border）。

css 邊框

可以使用border屬性。border屬性是一個用于設(shè)置各種單獨的邊界屬性的簡寫屬性。它可以用于設(shè)置一個或多個以下屬性的值：

1. border-width - 設(shè)置邊框的寬度。
2. border-style - 設(shè)置用于繪制邊框的樣式。
3. border-color - 設(shè)置邊框的顏色。如果這個值沒有設(shè)置，它的默認值是元素的color屬性值（是文字顏色而非背景色）。

border-width 屬性

設(shè)置盒子模型的邊框?qū)挾取４藢傩钥梢杂幸坏剿膫€值。

默認值: medium
繼承性: 否

屬性值

1. thin： 定義細的邊框。
2. medium： 定義中等邊線的邊框。
3. thick： 定義寬邊線的邊框。

用法

/* 用法一：明確指定寬度值 */
/* 當(dāng)給定一個寬度時，該寬度作用于選定元素的所有邊框 */
border-width: 5px;
/* 當(dāng)給定兩個寬度時，該寬度分別依次作用于選定元素的橫邊與縱邊 */
border-width: 2px 1.5em;
/* 當(dāng)給定三個寬度時，該寬度分別依次作用于選定元素的上橫邊、縱邊、下橫邊 */
border-width: 1px 2em 1.5cm;
/* 當(dāng)給定四個寬度時，該寬度分別依次作用于選定元素的上橫邊、右縱邊、下橫邊、左縱邊 （即按順時針依次作用） */
border-width: 1px 2em 0 4rem;

/* 用法二：使用全局關(guān)鍵字 */
/* 可以使用的全局關(guān)鍵字有：inherit(繼承),initial（初始值）,unset（不設(shè)置） */
border-width: inherit;

/* 用法三：使用作用于 border-width 的關(guān)鍵字 */
border-width: thin;
border-width: medium;
border-width: thick;

設(shè)置border-width

border-style 屬性

border-style屬性設(shè)置一個元素的邊框的樣式。此屬性可以有一到四個值。

默認值: none
繼承性: 否

屬性值

1. none：和關(guān)鍵字 hidden 類似，不顯示邊框。默認值。
2. hidden：和關(guān)鍵字 none 類似，不顯示邊框。
3. dotted：顯示為一系列圓點。
4. dashed：顯示為一系列短的方形虛線。
5. solid：顯示為一條實線。
6. double：顯示為一條雙實線。
7. groove：顯示為有雕刻效果的邊框。
8. ridge：顯示為有浮雕效果的邊框。
9. inset：顯示為有陷入效果的邊框，樣式與outset相反。
10. outset：顯示為有突出效果的邊框，樣式與inset相反。

用法

/* 用法一：明確指定寬度值 */
/* 當(dāng)給定一個寬度時，該寬度作用于選定元素的所有邊框 */
border-style: dashed;

/* horizontal | vertical */
/* 當(dāng)給定兩個寬度時，該寬度分別依次作用于選定元素的橫邊與縱邊 */
border-style: dotted solid;

/* top | horizontal | bottom */
/* 當(dāng)給定三個寬度時，該寬度分別依次作用于選定元素的上橫邊、縱邊、下橫邊 */
border-style: hidden double dashed;

/* top | right | bottom | left */
/* 當(dāng)給定四個寬度時，該寬度分別依次作用于選定元素的上橫邊、右縱邊、下橫邊、左縱邊 （即按順時針依次作用） */
border-style: none solid dotted dashed; 

/* 用法二：使用全局關(guān)鍵字 */
/* 可以使用的全局關(guān)鍵字有：inherit(繼承),initial（初始值）,unset（不設(shè)置） */
border-style: inherit;
border-style: initial;
border-style: unset;

設(shè)置border-style

border-color 屬性

border-style屬性是一個用于設(shè)置元素四個邊框顏色的快捷屬性。此屬性可以有一到四個值。

默認值: currentcolor
繼承性: 否

屬性值

1. 預(yù)定義的顏色名稱：規(guī)定顏色值為顏色名稱的顏色（比如 red）。
2. 十六進制顏色：規(guī)定顏色值為十六進制值的顏色（比如 #ff0000）。
3. RGB顏色： 規(guī)定顏色值為 rgb 代碼的顏色（比如 rgb(255,0,0)）。

用法

/* border-color: color; 單值語法 */ 
border-color: red;

/* border-color: vertical horizontal; 雙值語法*/
border-color: red #f015ca;

/* border-color: top horizontal bottom; 三值語法 */
border-color: red yellow green;

/* border-color: top right bottom left; 四值語法 */
border-color: red yellow green blue;

/* 全局關(guān)鍵字 */
border-color: inherit

設(shè)置border-color

border 簡寫用法

border: solid;
border: dashed red;
border: 4mm ridge rgb(170, 50, 220);

border設(shè)置

內(nèi)邊距

padding屬性設(shè)置一個元素的內(nèi)邊距，padding 區(qū)域指一個元素的內(nèi)容和其邊界之間的空間，該屬性不能為負值。該屬性可以有1到4個值。

默認值: 0
繼承性: 否

屬性值

1. length：規(guī)定以具體單位計的填充值，比如像素、厘米等。默認值是 0。
2. percentage：規(guī)定基于父元素的寬度的百分比的填充。
3. 全局關(guān)鍵字：指定應(yīng)該從父元素繼承padding。

用法

/* 指定一個值時 該值指定四個邊的內(nèi)邊距
指定兩個值時 第一個值指定上下兩邊的內(nèi)邊距 第二個指定左右兩邊的內(nèi)邊距
指定三個值時 第一個指定上邊的內(nèi)邊距.第二個指定左右兩邊 第三個指定下邊
指定四個值時分別為上 右 下 左（順時針順序）*/
padding: 5%;
padding: 10px 20px;  
padding: 10px 3% 20px;
padding: 1em 3px 30px 5px;

/* 簡寫模式相當(dāng)于 */
padding-left: 1em; /* 左邊距 */
padding-right: 3px;/* 右邊距 */
padding-bottom: 30px;/* 下邊距 */
padding-top: 5px;/* 上邊距 */

設(shè)置padding內(nèi)邊距

外邊距

margin屬性為給定元素設(shè)置所有四個（上下左右）方向的外邊距屬性。這是四個外邊距屬性設(shè)置的簡寫。四個外邊距屬性設(shè)置分別是： margin-top，margin-right，margin-bottom和margin-left。指定的外邊距允許為負數(shù)。

默認值: 0
繼承性: 否

屬性值

1. length：規(guī)定以具體單位計的填充值，比如像素、厘米等。默認值是 0。
2. percentage：規(guī)定基于父元素的寬度的百分比的填充。
3. auto：瀏覽器計算外邊距。
4. 全局關(guān)鍵字：指定應(yīng)該從父元素繼承padding。

用法

/* margin: style  單值語法  所有邊緣 */   
margin: 1em; 
/* margin: vertical horizontal  二值語法  縱向 橫向 */  
margin: 5% auto; 
/* margin: top horizontal bottom 三值語法 上 橫向 下*/   
margin: 1em auto 2em; 
/* margin: top right bottom left 四值語法 上 右 下 左*/ 
margin: 2px 1em 0 auto; 

/* auto 可以用來居中元素 */
margin: 0 auto;

/* 全局關(guān)鍵字 繼承 */
margin: inherit;

設(shè)置外邊距

總結(jié)

image.png

結(jié)束語

來呀，快活呀，反正有大把時光～