前端知識筆記（二十七）———CSS核心功能手冊：從熟悉到精通

參考HTML代碼

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>example</title><link rel="stylesheet" href="./index.css"><script src="./index.js"></script>
</head>
<body><div><h1>1. CSS</h1><p class="box">CSS（Cascading Style Sheets，層疊樣式表）是用于控制HTML元素在網頁上如何顯示的一種標記語言。它允許開發者為網頁創建樣式，包括布局、顏色、字體和響應式設計等。通過CSS，可以將設計和內容分離，使得網頁更易于維護和訪問。CSS（Cascading Style Sheets，層疊樣式表）是用于控制HTML元素在網頁上如何顯示的一種標記語言。它允許開發者為網頁創建樣式，包括布局、顏色、字體和響應式設計等。通過CSS，可以將設計和內容分離，使得網頁更易于維護和訪問。CSS（Cascading Style Sheets，層疊樣式表）是用于控制HTML元素在網頁上如何顯示的一種標記語言。它允許開發者為網頁創建樣式，包括布局、顏色、字體和響應式設計等。通過CSS，可以將設計和內容分離，使得網頁更易于維護和訪問。</p><span>測試span</span></div><div><h1>2. CSS</h1><p>CCSS（Cascading Style Sheets，層疊樣式表）是用于控制HTML元素在網頁上如何顯示的一種標記語言。它允許開發者為網頁創建樣式，包括布局、顏色、字體和響應式設計等。通過CSS，可以將設計和內容分離，使得網頁更易于維護和訪問。CSS（Cascading Style Sheets，層疊樣式表）是用于控制HTML元素在網頁上如何顯示的一種標記語言。它允許開發者為網頁創建樣式，包括布局、顏色、字體和響應式設計等。通過CSS，可以將設計和內容分離，使得網頁更易于維護和訪問。CSS（Cascading Style Sheets，層疊樣式表）是用于控制HTML元素在網頁上如何顯示的一種標記語言。它允許開發者為網頁創建樣式，包括布局、顏色、字體和響應式設計等。通過CSS，可以將設計和內容分離，使得網頁更易于維護和訪問。</p></div><div><h1>3. CSS</h1><p>CSS（Cascading Style Sheets，層疊樣式表）是用于控制HTML元素在網頁上如何顯示的一種標記語言。它允許開發者為網頁創建樣式，包括布局、顏色、字體和響應式設計等。通過CSS，可以將設計和內容分離，使得網頁更易于維護和訪問。CSS（Cascading Style Sheets，層疊樣式表）是用于控制HTML元素在網頁上如何顯示的一種標記語言。它允許開發者為網頁創建樣式，包括布局、顏色、字體和響應式設計等。通過CSS，可以將設計和內容分離，使得網頁更易于維護和訪問。CSS（Cascading Style Sheets，層疊樣式表）是用于控制HTML元素在網頁上如何顯示的一種標記語言。它允許開發者為網頁創建樣式，包括布局、顏色、字體和響應式設計等。通過CSS，可以將設計和內容分離，使得網頁更易于維護和訪問。</p></div><div><h1>4. CSS</h1><p>CSS（Cascading Style Sheets，層疊樣式表）是用于控制HTML元素在網頁上如何顯示的一種標記語言。它允許開發者為網頁創建樣式，包括布局、顏色、字體和響應式設計等。通過CSS，可以將設計和內容分離，使得網頁更易于維護和訪問。CSS（Cascading Style Sheets，層疊樣式表）是用于控制HTML元素在網頁上如何顯示的一種標記語言。它允許開發者為網頁創建樣式，包括布局、顏色、字體和響應式設計等。通過CSS，可以將設計和內容分離，使得網頁更易于維護和訪問。CSS（Cascading Style Sheets，層疊樣式表）是用于控制HTML元素在網頁上如何顯示的一種標記語言。它允許開發者為網頁創建樣式，包括布局、顏色、字體和響應式設計等。通過CSS，可以將設計和內容分離，使得網頁更易于維護和訪問。</p></div>
</body>
</html>

尺寸操作
設置元素尺寸
通常用在塊級元素內，width和height屬性是用來設置元素的寬度和高度的。這些屬性定義了元素的尺寸，即寬度（水平方向）和高度（垂直方向）的大小。

默認情況下，瀏覽器會讓元素自動適應瀏覽器的尺寸和屏幕尺寸，但是你可以使用這兩個參數去設置它的具體數值。

width:

width屬性用于設置元素的寬度。在你的代碼中，它被設置為500px，意味著該元素的寬度是500像素。
示例:

.box {width: 500px; /* 設置元素的寬度為500像素 */
}

height:

height屬性用于設置元素的高度。在你的代碼中，它被設置為280px，意味著該元素的高度是280像素。
示例:
```
.box {height: 280px; /* 設置元素的高度為280像素 */
}
```
這些屬性允許你明確地控制元素的大小，以適應你的設計需求。在CSS中，你可以使用不同的單位來指定寬度和高度，例如像素（px）、百分比（%）、em單位、rem單位等。像素是固定的尺寸單位，而百分比、em和rem則是相對的尺寸單位，它們的大小是相對于其他元素或屏幕尺寸而定的。

border：

此屬性設置元素的邊框樣式。
示例
?
```
.box {border: 3px dotted grey;
}
```
- 3px是邊框寬度。
- dotted表示邊框是點狀的。
- grey是邊框顏色。
border-radius:
- 此屬性設置元素邊框的圓角半徑，使得邊框拐角處呈現為圓角，而非默認的直角。值會是圓角的半徑。
- 示例
- ```
.box {border-radius: 8px;
}
```
  內邊距
  內邊距（Padding）: 內邊距是**元素邊框與元素內容之間的空間**。它是元素內部的空白區域，用于創建元素內容和元素邊框之間的緩沖空間。在CSS中，內邊距通過padding屬性來設置。
  
  屬性：
  padding-top: 設置元素的上內邊距。
  padding-right: 設置元素的右內邊距。
  padding-bottom: 設置元素的下內邊距。
  padding-left: 設置元素的左內邊距。
  padding: 同時設置元素的上、右、下、左內邊距。
  示例代碼：
  ?
```
/* 單獨設置內邊距 */
.element {padding-top: 10px;padding-right: 20px;padding-bottom: 10px;padding-left: 20px;
}/* 使用一個值來設置所有的內邊距 */
.element {padding: 10px;
}/* 使用兩個值來設置內邊距：第一個值為上下內邊距，第二個值為左右內邊距 */
.element {padding: 10px 20px;
}/* 使用四個值來分別設置上、右、下、左內邊距 */
.element {padding: 10px 20px 30px 40px;
}
```
  外邊距
  外邊距（Margin）: 外邊距是元素邊框外側到相鄰元素邊框的空間。它是元素周圍的空白區域，用于在元素之間創建空間，以保持頁面的清晰和組織良好的布局。在CSS中，外邊距通過margin屬性來設置。
  
  屬性：
  
  margin-top: 設置元素的上外邊距。
  margin-right: 設置元素的右外邊距。值設置為auto的時候可以實現元素垂直居中顯示。
  margin-bottom: 設置元素的下外邊距。
  margin-left: 設置元素的左外邊距。值設置為auto的時候可以實現元素垂直居中顯示。
  margin: 同時設置元素的上、右、下、左外邊距。設置為0 auto可以實現垂直居中顯示
  示例代碼：
  ?
```
/* 單獨設置外邊距 */
.element {margin-top: 10px;margin-right: 20px;margin-bottom: 10px;margin-left: 20px;
}/* 使用一個值來設置所有的外邊距 */
.element {margin: 10px;
}/* 使用兩個值來設置外邊距：第一個值為上下外邊距，第二個值為左右外邊距 */
.element {margin: 10px 20px;
}/* 使用四個值來分別設置上、右、下、左外邊距 */
.element {margin: 10px 20px 30px 40px;
}
```
  特殊處理：%百分比布局
- width: 100%的意義:
  當你設置一個元素的width屬性為100%時，你是在告訴瀏覽器將該元素的寬度設置為其父元素的寬度。這意味著，元素會盡可能地擴展以填充其父元素的水平空間。
- ```
.element {width: 100%;
}
```
  與父容器的寬度計算:
  在默認情況下，一個元素的寬度是由其內容區的寬度、內邊距、邊框和外邊距組成的。當你設置width: 100%時，你只是設置了元素內容區的寬度等于父元素的寬度，而不是整個元素（包括內邊距和邊框）的寬度
- 可能出現溢出屏幕的情況:
  如果元素具有內邊距或邊框，那么即使設置了width: 100%，元素的總寬度也會超過其父元素的寬度，可能導致元素溢出其父元素或溢出屏幕。
- ```
.element {width: 100%;padding: 10px;border: 5px solid black;
}
```
  解決方法 (box-sizing: border-box;):
  box-sizing屬性允許你更改瀏覽器計算元素寬度和高度的方式。通過設置box-sizing: border-box;，你可以告訴瀏覽器包括內邊距和邊框在內，但不包括外邊距在內，來計算元素的寬度和高度。
- ```
.element {width: 100%;padding: 10px;border: 5px solid black;box-sizing: border-box;
}
```
  這樣，即使有內邊距和邊框，元素的總寬度也會與其父元素的寬度相匹配，防止溢出。
  
  為什么這樣能解決:
  box-sizing: border-box;是因為它改變了瀏覽器計算元素寬度的方式。在這種模式下，元素的width和height屬性包括了內邊距和邊框，而不僅僅是內容區域。這意味著，即使元素有內邊距和邊框，其寬度也會保持為100%，與父元素的寬度相匹配，從而防止了溢出的問題。
  
  設置默認布局邊距
  *{ padding: 0; margin: 0;} 是一種CSS重置（CSS Reset）的簡單形式。讓我們逐一解釋：
  
  通配符 *:
  通配符 * 是一個全局選擇器，它匹配頁面上的所有元素。
  
  padding: 0; 和 margin: 0;:
  這兩條樣式規則分別將所有元素的內邊距（padding）和外邊距（margin）設置為0。
  ?
```
* {padding: 0;margin: 0;
}
```
  用途和使用場景：
  消除瀏覽器默認樣式:
  不同瀏覽器有不同的默認樣式。例如，某些瀏覽器可能會為<body>、<h1>、<p>等元素提供默認的margin和padding值。通過使用* { padding: 0; margin: 0; }，你可以重置所有元素的margin和padding值，確保在不同瀏覽器中的一致性。
  
  創建清晰的布局:
  在開始創建網站布局之前重置margin和padding值是一個好習慣，我們可以放在css布局里的首行。這樣做可以確保你的布局不會受到未預期的空間影響，使布局過程更為清晰和可預測。
  
  減少樣式沖突:
  在大型項目或使用第三方庫時，重置margin和padding值可以幫助減少樣式沖突，使樣式更容易管理和維護。
  
  背景設置
  在CSS中，背景屬性用于為元素設置背景內容。你可以設置顏色、圖像、重復、位置和滾動等屬性來配置背景。以下是背景屬性及其用法的概述：
  
  背景顏色 (background-color):
  設置元素的背景顏色。
  ?
```
.element {background-color: #ff0000; /* 紅色 */
}
```
  背景圖像 (background-image):
  
  設置元素的背景圖像。
- ```
.element {background-image: url('background.jpg');
}
```
  這只是部分