目錄

一.背景屬性

二.盒子模型

1.邊框border

a. 圓角屬性border-radius

b. 圖像屬性border-image

2. 內邊距padding

3. 外邊距margin

3. 寬度width與高度height

---

一.背景屬性

瀏覽器背景圖默認是平鋪效果（復制圖片直至填滿設置的區域大小）

背景應用于由內容和內邊距、邊框組成的區域。

屬性	描述
background	在一條聲明中設置所有背景屬性的簡寫屬性。
background-attachment	設置背景圖像是固定的還是與頁面的其余部分一起滾動。
background-clip	規定背景的繪制區域。
background-color	設置元素的背景色。
background-image	設置元素的背景圖像。
background-origin	規定在何處放置背景圖像。
background-position	設置背景圖像的開始位置。
background-repeat	設置背景圖像是否及如何重復。
background-size	規定背景圖像的尺寸。

在使用簡寫屬性時，屬性值的順序為：

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

二.盒子模型

1.邊框border

邊框線會撐大盒子，解決方法：

border {box-sizing:border-box
}

屬性	描述	值
border-style	邊框類型	solid(實線)、dashed(虛線)、dotted(點線)
border-width	寬度	數值
border-color	邊框顏色	顏色值、RGB、RGBA、HSL、HSLA等
border-radius	圓角屬性
border-(方位)	單獨設置某一方向的邊框	方位包括left right top bottom
border	邊框屬性的簡寫	其中width、color、style必須寫，無順序要求

1. border-style 屬性指定要顯示的邊框類型。

允許以下值：

• dotted - 定義點線邊框

• dashed - 定義虛線邊框

• solid - 定義實線邊框

• double - 定義雙邊框

• groove - 定義 3D 坡口邊框。效果取決于 border-color 值

• ridge - 定義 3D 脊線邊框。效果取決于 border-color 值

• inset - 定義 3D inset 邊框。效果取決于 border-color 值

• outset - 定義 3D outset 邊框。效果取決于 border-color 值

• none - 定義無邊框

• hidden - 定義隱藏邊框

border-style 屬性可以設置一到四個值（用于上邊框、右邊框、下邊框和左邊框）。

1. border-width 屬性指定四個邊框的寬度。

• 可以將寬度設置為特定大小（以 px、pt、cm、em 計），也可以使用以下三個預定義值之一：thin、medium 或 thick。

• 可以設置一到四個值（用于上邊框、右邊框、下邊框和左邊框）

1. border-color 屬性用于設置四個邊框的顏色。

2. border簡寫必須包含width、color、style屬性。

a. 圓角屬性border-radius

屬性	描述
border-radius	用于設置所有四個 border---radius 屬性的簡寫屬性。
border-top-left-radius	定義左上角邊框的形狀。
border-top-right-radius	定義右上角邊框的形狀。
border-bottom-right-radius	定義右下角邊框的形狀。
border-bottom-left-radius	定義左下角邊框的形狀。

單值寫法：

從左上角開始順時針賦值至左下角 border-radius: 10px 20px 30px 40px;

三值，兩值寫法：

從左上角開始順時針賦值至左下角，缺少的值與對角相等

常用的形狀：

b. 圖像屬性border-image

border-image 屬性接受圖像，并將其切成九部分，就像井字游戲板。然后，將拐角放置在拐角處，并根據設置重復或拉伸中間部分。

為了使 border-image 起作用，該元素還需要設置 border 屬性！

屬性	描述
background	用于在一條聲明中設置所有背景屬性的簡寫屬性。
background-clip	規定背景的繪制區域。
background-image	為一個元素指定一幅或多幅背景圖像。
background-origin	規定背景圖像的放置位置。
background-size	規定背景圖像的大小。

2. 內邊距padding

注意：border、padding都會撐大盒子

解決方法：

手動減法（自己計算減去border和padding的尺寸）

內減模式（添加屬性：box-sizing:border-box）

3. 外邊距margin

不會撐大盒子尺寸

重要應用：版心居中 margin: 0 auto即將左右外邊距的值設置為自適應，注意此時必須設置好盒子的寬度，因為瀏覽器需要此數據自動做減法。

3. 寬度width與高度height

設置的是padding、border、margin區域內的寬度與高度。

清除默認樣式：

* {margin: 0;padding: 0;box-sizing: border-box;
}

【記錄學習過程的筆記，歡迎大家一起討論，會持續更新】