# HTML + CSS
1. 瀏覽器的內核 ( 渲染引擎 ) : 用於將代碼顯示到頁面當中
> * Safari -> Webkit。
>
> * Chrome -> Blink ( 由 Webkit 修改加強 )。
2. **web 標準** : 由 `W3C` 制定
> * 為什麼需要 `web標準`？
>> 1. 內容能被更廣泛的設備訪問，讓用戶都能看到相同的內容。
>>
>> 2. 提高頁面瀏覽速度。
>> 3. 使網站更易於維護。
>> 4. 降低網站流量費用。
>> 5. 更容易被搜尋引擎搜索。
>
> * 包括三個方面 :
> :::warning
> 三者相分離，各自寫到對應的文件。
> :::
>> 1. **`結構 (structure)`**: 網站主架構 -> `HTML`。
>>
>> 2. **`表現 (Presentation)`**: 進行版式、顏色、大小等外觀調整 -> `CSS`。
>> 3. **`行為 (Behavior)`**: 讓網站能夠互動 -> `JavaScript`。
# emmet語法
## 快速生成HTML標籤
### 父子關係 `>`
```htmlembedded=
<body>
<!-- 父子關係 -->
<!-- ul+li -->
<ul>
<li></li>
</ul>
</body>
```
### 兄弟關係 `+`
```htmlembedded=
<body>
<!-- 兄弟關係 -->
<!-- div+p -->
<div></div>
<p></p>
</body>
```
### 標籤帶class `.`
```htmlembedded=
<body>
<!-- 標籤帶class -->
<!-- div.nav -->
<div class="nav"></div>
</body>
```
### 標籤帶id `#`
```htmlembedded=
<body>
<!-- 標籤帶id -->
<!-- div#nav -->
<div id="nav"></div>
</body>
```
### 綁在一起 `()`
```htmlembedded=
<body>
<!-- 綁在一起 -->
<!-- (nav>ul>li*4)+(article>h3>p) -->
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
<article>
<h3>
<p></p>
</h3>
</article>
</body>
```
### 標籤內部寫內容 `{}`
```htmlembedded=
<body>
<!-- 標籤內部寫內容 -->
<!-- div{我是div標籤} -->
<div>我是div標籤</div>
</body>
```
### 輸入屬性和內容 `[]`
```htmlembedded=
<body>
<!-- 輸入屬性和內容 -->
<!-- img[src='test.jpg' alt='test'] -->
<img src="test.jpg" alt="test">
</body>
```
### 重複多次 `*`
```htmlembedded=
<body>
<!-- 重複多次 -->
<!-- div*3 -->
<div></div>
<div></div>
<div></div>
</body>
```
### 編序 `$`
```htmlembedded=
<body>
<!-- 編序 -->
<!-- div.nav$*3 -->
<div class="nav1"></div>
<div class="nav2"></div>
<div class="nav3"></div>
<!-- div{哈囉$}*3 -->
<div>哈囉1</div>
<div>哈囉2</div>
<div>哈囉3</div>
</body>
```
### 起始值 `@`
```htmlembedded=
<body>
<!-- div.nav$@5*3 -->
<div class="nav5"></div>
<div class="nav6"></div>
<div class="nav7"></div>
</body>
```
## 快速生成CSS樣式
### 採取簡寫形式
```css=
<style>
p {
/* h200 */
height: 200px;
/* tac */
text-align: center;
/* ti2em */
text-indent: 2em;
/* tdn */
text-decoration: none;
}
</style>
```
---
# HTML
1. HTML 指的是**超文本標記語言** ( Hyper Text Markup Language )。
## 特殊標籤
### `<!DOCTYPE>` 文檔類型聲明。
> 1. 位於文檔中的最前面，作用是告訴瀏覽器使用哪種HTML版本來顯示頁面。
>
> 2. 不屬於HTML標籤，只有在 `<html>` 下的標籤才是。
>```htmlembedded=
><!DOCTYPE html> <!--當前頁面採取的是HTML5版本來顯示網頁-->
>```
### `lang` 語言種類。
> 1. 用來定義當前文檔顯示語言。
>
> 2. `en`、`zh-TW` 、`zh-CN`。
> 3. 這個屬性對瀏覽器和搜索引擎是有作用的。
>```htmlembedded=2
><html lang="en"> <!--定義文檔顯示的語言-->
>```
### `charset` 字符集。
> 1. 方便計算機能夠識別和儲存各種文字。
>
> 2. 透過 `<mata>` 標籤的 `charset` 屬性來規定。
> 3. 常用的 : **`UTF-8 (萬國碼)`**、`BIG5 (繁體)`、`GB2312 (簡體)`、`GBK (繁+簡)`。
>```htmlembedded=4
> <meta charset="UTF-8"> <!--字符集-->
>```
>
>```htmlmixed=
><!DOCTYPE html> <!--當前頁面採取的是HTML5版本來顯示網頁-->
><html lang="en"> <!--定義文檔顯示的語言-->
><head>
> <meta charset="UTF-8"> <!--字符集-->
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>第一個頁面</title>
></head>
><body>
> 大家好 !!
></body>
></html>
>```
---
## 常用標籤
:::warning
單標籤在 `HTML5` 當中可以不用寫 **`/`**。
```htmlembedded=
<br /> ---> <br>
<img /> ---> <img>
```
:::
### 註釋標籤 `<!-- xxxx -->`
> 快捷鍵 : **`CTRL + /`**。
### 標題標籤 `<h1> ~ <h6> ... </h1> ~ </h6>` (header)
> 1. 一共只有六級。
>
> 2. **一個標題獨佔一行**，就算將內容寫到`</h#>` 之後也會顯示在下一行。
### 段落標籤 `<p> ... </p>` (paragraph)
> 1. 文本在一個段落中會根據瀏覽器窗口的大小自動換行。
>
> 2. 段落和段落之間保有空隙。
### 換行標籤 `<br />` (break)
> 1. :warning: **單標籤** :warning:
>
> 2. 強制換行。
> 3. 只是簡單的開始新的一行，跟段落標籤不同，中間不會有空隙。
### 文本格式化標籤
> 1. 粗體
>> * `<strong> </strong>`
>>
>> * `<b> </b>`
>
> 2. 斜體
>> * `<em> </em>`
>>
>> * `<i> </i>`
> 3. 刪除線
>> * `<del> </del>`
>>
>> * `<s> </s>`
> 4. 下底線
>> * `<ins> </ins>`
>>
>> * `<u> </u>`
### `<div> </div>` 分割、分區 (division)
### `<span> </span>` 跨度、跨距 (span)
> 1. 皆沒有語意，只是個盒子，用來裝內容的。
>
> 2. `<div>` 一行只能夠放一個 ( 大盒子 )。
> 3. `<span>` 一行可以放多個 ( 小盒子)。
### 圖像標籤 `<img src="url" />`
> 1. :warning: **單標籤** :warning:
>
> 2. `src` 是**必須屬性**，用於指定圖像文件的路徑和文件名。
> 3. 其他屬性 :
>> * `alt` : 替換文本，圖像不能顯示時出現的文字。
>>
>> * `title` : 提示文本，鼠標移動到圖像上時顯示的文字。
>> * `width`、`height` : 設置圖像的寬度、高度 **( 只需修改一個，圖像就會被等比例縮放 )**。
`border` : 設置圖像的邊框粗細 **( 通常是由 `CSS` 修改，不會直接寫在 `HTML` )**。
>>
>> 
>```htmlembedded=
><body>
> <img src="img.jpg" />
> <img src="xxx.jpg" alt="讀取錯誤"/>
> <img src="img.jpg" title="香菇"/>
></body>
>```
### 超連結標籤 `<a href="跳轉目標" target="目標窗口的彈出方式"> 文本或圖像 </a>` (anchor)
> 1. 屬性 :
>>* `href` 是**必須屬性**。
>>
>>* `target` :
-> 默認值為 `"_self"` : 在當前窗口打開頁面。
-> `"_blank"` : 在**新窗口**中打開。
> 2. 連結分類 :
>>* **外部連結**
>>
>>* **內部連結** : 網站內部頁面相互連結，可直接連結內部頁面名稱。
>>* **空連結** : `<a href="#"> </a>`，當目標連結還沒確定時。
>>* **下載連結** : `href` 的地址是一個文件、exe、壓縮包形式，會下載這個檔案。
>>* **網頁元素連結** : 網頁中的各種元素都可以添加超連結。
>>```htmlembedded=
>><a href="http://google.com"><img src="img.jpg" /></a>
>>```
>>* **錨連接點** : 點擊連接，可以快速定位到頁面中的某個位置。
>>> 將 `href` 屬性設置成 **`href="#名子"`** 的形式 ( 記得加 **`#`** )。
>>> 找到想要跳轉的地方，裡面添加一個 **`id="名子"`** 的屬性 ( 這裡不需要 **`#`** )。
>>```htmlembedded=
>><a href="#one"> 第一集 </a>
>><h4 id="one"> 第一集介紹 </h4>
>>```
### 特殊字符
> 
### 表格標籤
> 1. 標籤 :
>> * `<table> </table>` 定義表格的標籤。
>>
>> * `<tr> </tr>` 定義表格中的**行**。
>> * `<th> </th>` **表頭**單元格 `( table head )`，**置中、加粗**。
>> * `<td> </td>` 定義表格中的單元格 `( table data )`。
>
>>
>
>```htmlembedded=
> <table>
> <tr>
> <th> 姓名 </th>
> <th> 性別 </th>
> <th> 年齡 </th>
> </tr>
> <tr>
> <td> 王大明 </td>
> <td> 男 </td>
> <td> 20 </td>
> </tr>
> <tr>
> <td> 王小明 </td>
> <td> 男 </td>
> <td> 18 </td>
> </tr>
> </table>
>```
>
> 2. 表格屬性 ( 寫到 `<table>` 內 ) :
>> :::warning
>>實際開發不常用，通常是用 `CSS` 設置。
>>:::
>> 
### 表格結構標籤
> 1. 標籤 :
>> * `<thead> </thead>` : 表格的頭部區域，當中必須擁有 `<tr>`。
>>
>> * `<tbody> </tbody>` : 表格的主體區域。
>> * 可以讓表格更清晰、更明確。
>>
>>
### 合併單元格
> 1. 方式 :
>> * 跨行合併 : `rowspan="#"`。
>>
>> * 跨列合併 : `colspan="#"`。
> 2. **目標單元格** :
>> * 跨行 : **上側**做為目標單元格。
>>
>> * 跨列 : **左側**作為目標單元格。
> 3. 合併步驟三部曲 :
>> * 跨行 ? 跨列 ?
>>
>> * 找到目標單元格。
>> * 刪除多餘的單元格。
>
> 
>
>```htmlembedded=
><body>
> <table width="500" height="249" border="1" cellspacing="0">
> <tr>
> <td></td>
> <td colspan="2"></td>
>
> </tr>
> <tr>
> <td rowspan="2"></td>
> <td></td>
> <td></td>
> </tr>
> <tr>
>
> <td></td>
> <td></td>
> </tr>
> </table>
></body>
>```
### 列表標籤 : 用來布局頁面的。
> 1. :star: 無序列表 (用得最多) :star: :
>> * 沒有順序、級別之分。
>>
>> * :warning: `<ul> </ul>` 中**只能放 `<li></li>`**，直接在 `<ul> </ul>` 之中輸入其他標籤或是文字是不合規定的。 :warning:
>> * `<li> </li>` 可以容納所有元素，所以如果要在 `<ul> </ul>` 之中放入其他的文字或標籤，則應該放在 `<li> </li>` 裡面。
>> * 無序列表會帶有自己的樣式屬性，默認前面會有 ，而我們實際上會使用 `CSS` 來設置屬性。
>> :::success
>> ```css=
>> list-style: none;
>> ```
>> :::
>```htmlembedded=
><ul>
> <li>列表1</li>
> <li>列表2</li>
> <li>列表3</li>
> ...
></ul>
>```
> 2. 有序列表 :
>> * 規則與無序列表相同。
>```htmlembedded=
><ol>
> <li>列表1</li>
> <li>列表2</li>
> <li>列表3</li>
> ...
></ol>
>```
> 3. :star: 自定義列表 :star: :
>> * 通常是一個 `<dt></dt>` 對應多個 `<dd></dd>`。
>> * 用到的場景 :
>
>
> ---> 可以透過後期 `CSS` 布局調整。
>
>```htmlembedded=
><dl>
> <dt> 關注我們 </dt>
> <dd> 臉書 </dd>
> <dd> 哀居 </dd>
> <dd> 推特 </dd>
></dl>
>```
### 表單標籤
> 1. 用途 : 收集用戶信息。
>
> 2. 組成 : **`表單域`**、**`表單控件(表單元素)`**、**`提示信息`**。
>
>
>
> 3. 組成介紹 :
>> * 表單域 : 一個包含表單元素的區域。
>>> 1. `<form> </form>` 會把範圍內的表單元素信息提交給服務器。
>>>```htmlembedded=
>>><form action="服務器url地址" method="提交方式(get/post)" name="表單域名稱">
>>> 各種表單控件元素
>>></form>
>>>```
>> * 表單控件(表單元素) :
>>> 1. `input輸入表單元素` : :warning: **單標籤** :warning:
>>>> * 根據不同的的 `type屬性質` 輸入字段有很多種的形式。
>>>>:::warning
>>>>`<input type="radio" name="info">` 需要將選項同時附加相同的 `name` 屬性名稱，才能實現單選的效果。
>>>>:::
>>>>
>>>>
>>>> * `<input>` 的其他屬性 :
>>>>
>>>>
>>>>
>>>> * 注意事項 :
>>>>> 1. `<input type="radio" name="info">` 需要將選項同時附加相同的 `name` 屬性名稱，才能實現單選的效果。
>>>>>
>>>>> 2. `<input type="submit" value="提交">` 是根據 `<form>標籤` 的屬性提交到目標地址，而 `value` 可以更改頁面顯示的按鈕文字。
>>>>> 3. `<input type="" checked="checked">` 可以在頁面加載時就默認該個選項被選中。
>>>```htmlembedded=
>>> <form action="URL" method="GET" name="註冊表單">
>>> 名字 : <input type="text" maxlength="5" value="最多五個字"> <br>
>>> 性別 : 男 <input type="radio" name="sex" checked="checked"> 女 <input type="radio" name="sex"> <br>
>>> 上傳大頭貼 : <input type="file"> <br>
>>>
>>> <input type="submit" value="馬上註冊">
>>> </form>
>>>```
>>> 2. `select下拉表單元素` :
>>>> * 定義 `selected="selected"`，表示默認選中當前選項。
>>>```htmlembedded=
>>> <select>
>>> <option> 新北 </option>
>>> <option> 台北 </option>
>>> <option selected="selected"> 彰化 </option>
>>> <option> 高雄 </option>
>>> </select>
>>>```
>>> 3. `textarea文本域元素` :
>>>> * 用於定義**多行**文本輸入。
>>>>
>>>> * 使用場景 : 當用戶要輸入的內容較多時，常見於留言板，評論，此時就不能使用 `<input type="text">` 了。
>>>> * 實際開發中不會使用 `cols="" rows=""`，都是用 `CSS` 進行調整。
>>>```htmlembedded=
>>> 介紹 :
>>> <textarea cols="50" rows="10"> 請自我介紹</textarea>
>>>```
### label標籤
> ::: success
>原本的表單文字點擊後並不會有反應，但如果是點擊 `<label> </label>` 標籤內的文字，瀏覽器就會自動選擇到對應的表單元素上。
>:::
> 1. 常和**表單標籤**一起出現，**增加用戶體驗**。
>
> 2. `<label>` 的 `for="名子"` 屬性應該要與對應元素的 `id="名子"` 屬性相同。
>```htmlembedded=
> <label for="boy"> 男 </label>
> <input type="radio" name="sex" id="boy">
> <label for="girl"> 女 </label>
> <input type="radio" name="sex" id="girl">
>```
---
# CSS
## 基礎選擇器
### 標籤選擇器
> 1. 作用 : 可以選出**所有**相同的標籤，但**不能**單獨選出某幾個作改變。
>```
> 標籤 {
> 屬性: 屬性值;
> }
>```
>```css=
> p {
> color: red;
> }
>```
### class選擇器 (最常使用)
> 1. 作用 : 可以選出**一個或多個**標籤，且**可以根據需求選擇**。
>
> 2. 樣式用 **`.名字`** 定義，需要用 **`class`** 來調用。
> 3. 不能用標籤當作名字。
>#### 單類名
>```
> .名字 {
> 屬性: 屬性值;
> }
>```
>```css=
> .red {
> color: red;
> }
>
> <div class="red">...</div>
>```
>
>#### 多類名
>> * **`class`** 可以包含多個類名，中間以 **`空格`** 隔開。
>
>
>
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>畫盒子</title>
> <style>
> .box {
> width: 100px;
> height: 100px;
> }
> .red {
> background-color: red;
> }
> .green {
> background: green;
> }
> </style>
></head>
><body>
> <div class="box red"></div>
> <div class="box green"></div>
> <div class="box red"></div>
></body>
>```
### id選擇器
>:::danger
>**`id`** 在相同 `HTML` 中只能寫在一個標籤上，不允許多個標籤有相同的 **`id屬性`**，否則 `JavaScript` 在用 **`id`** 選擇的時候永遠只能定位到第一個元素，不便於除錯。
>:::
> 1. 作用 : 一次只能夠選一個標籤，而且該 `id屬性` 在每個 `HTML` 中**只能出現一次**，通常是和 `JavaScript` 做搭配。
>
> 2. 樣式用 **`#名字`** 定義，需要用 **`id`** 來調用。
>```
> #名字 {
> 屬性: 屬性值;
> }
>```
>```css=
> #red {
> background-color: red;
> }
>
> <div id="red"> </div>
>```
### 通配符選擇器
> 1. 作用 : 選擇所有標籤，只有特殊情況時才使用。
>```css=
> /* 清除所有元素標籤的內外邊距 */
>* {
> margin: 0;
> padding: 0;
>}
>```
## 字體屬性
### 字體系列
> 1. 盡量使用常見的字體，確保任何用戶的瀏覽器都能正確顯示。
>
> 2. 可以一次定義多種字體。
>> * 瀏覽器會從第一個開始判斷是否有該種字體，如果沒有，則會察看下一個，都沒有的話就會使用默認字體。
> 3. 實際開發中常把字體定義到 **`body {}`**，讓網頁元素都以該種字體顯示。
>```css=
>body {
> font-family: 'Microsoft YaHei', tahoma, arial;
>}
>```
### 字體大小
>:::warning
>標題標籤比較特殊，需要單獨指定文字大小。
>:::
> 1. 不同瀏覽器默認的字體大小可能不同，所以盡量要給定一個明確的大小。
>```css=
>body {
> font-size: 20px;
>}
>```
### 字體粗細
> 1. 也可以使用 `<strong</strong>`、`<b></b>` 來加粗字體。
>
> 2. 實際開發中，更常使用**數字表示**粗細 ( 後面**不用加單位** )。
>> * 屬性值 : `100 ~ 900`
>>
>> * `400 = normal`、`700 = bold`。
```css=
/* 1. */
p {
font-weight: 700;
font-weight: bold;
}
/* 2. */
.bold {
font-weight: 700;
}
<p class="bold"> 加粗 </p>
```
### 文字樣式
> 1. 平常很少改為斜體，反而常將斜體標籤 `<em> </em>`、`<i> </i>`改為正常字體。
>```css=
>p {
> font-style: normal;
> font-style: italic;
>}
>```
### 字體複合屬性
>:::danger
>* 複合的順序是固定的，不可更換順序。
>* 不需要的屬性可以省略，但是必須保留 **`font-size`、`font-family`** 屬性，否則 `font` 不起作用。
>:::
>```css=
>p {
> font: font-style font-weight font-size/line-height font-family
>
> font: italic 700 16px/20px 'Microsoft YaHei';
>}
>```
## 文本屬性
### 文本顏色
> 1. 有三種表示方式，也可以直接使用光盤調整。
>> * 實際開發時`十六進制`用得最多。
>
>
>
>```css=
>p {
> color: red;
> color: #ff0000;
> color: rgb(255,0,0);
>}
>```
### 對齊文本
>:::warning
> **垂直置中**的方法，讓文字的**行高**等於盒子的高度。
> * 如果行高**小於**盒子的高度，文字則**偏上**。
>
> * 如果行高**大於**盒子的高度，文字則**偏下**。
>:::
>```css=
>p {
> /* 默認 : left */
> text-align: left;
> text-align: center;
> text-align: right;
>}
>```
### 裝飾文本
> 1. 可給文本添加下底線、刪除線、上底線。
>
> 2. `<a> </a>` 自帶下底線，可以將他進行刪除。
>
> 
>
>```css=
>a {
> text-decoration: none;
>}
>```
### 文本縮進
:::success
**`em`** 使一個**相對單位**，就是當前元素 ( font-size )一個文字的大小。
如果當前元素沒有設置大小，則會按照父元素的一個文字大小 ( 繼承 )。
:::
> 1. 用來指定文本的第一行縮進，通常是將段落的首行縮並。
>```css=
>p {
> text-indent: 20px;
> text-indent: 2em;
>}
>```
### 行間距
:::success
可以利用 **`FSCapture`** 去測量行距。
:::
> 1. 行間距包括 `上間距`、`文本高度 (不變)`、`下間距`。
>> * 設置的大小扣除文本高度後，會平分給上下間距。
>
> 2. 不一定要有單位 ( 可以參考 **`CSS的三大特性 -> 繼承性 -> 行高的繼承性`** )。
>```css=
>p {
> line-height: 20px;
>}
>```
## 引入方式
### 內部樣式表
> 1. 將 `CSS` 代碼寫到 `HTML` 頁面內部的 `<style> </style>` 標籤中。
>
> 2. 代碼結構清晰，方便控制當前整個頁面的元素樣式。
> 3. **沒有**實現結構與樣式完全分離。
>```css=
><style>
> p {
> color: red;
> }
></style>
>```
### 行內樣式表
> 1. 不常使用，通常用於修改簡單的樣式。
>> * 可以控制當前標籤樣式。
>
> 2. **沒有**實現結構與樣式完全分離。
>```htmlbedded=
><div style="color: red; font-size: 16px;"> 紅色 </div>
>```
### 外部樣式表
>:::warning
>`.css` 文件中，不必再寫 `<style> </style>` 標籤，直接寫上樣式即可。
>:::
> 1. 實際開發中最常使用，適合樣式較多的情況。
>
> 2. 將樣式單獨寫到 `.css` 文件，再使用 `<link>` 標籤引入到 `HTML`。
> 3. **`rel(relation) 屬性`** : 定義鏈結文檔與當前文檔的關係。
>```htmlembedded=
><link rel="stylesheet" href=".css路徑">
>```
## 複合選擇器
> 1. 建立在基礎選擇器之上，對其進行組合而成的。
>
> 2. 可以更精確、更高效的選擇目標元素 ( 標籤 )。
> 3. 包括 : 後代選擇器、子選擇器、聯集選擇器、偽class選擇器。
>
> 
### 後代選擇器 ( 包含選擇器 )
>```
>元素1 元素2 { 樣式 }
>```
> 1. 可以選擇父元素裡面**所有的**後代子元素。
>
> 2. `元素1`、`元素2` 可以是任意的**基礎選擇器**。
> 3. `元素2` 只要是 `元素1` 的後代即可。
>
>
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>後代選擇器</title>
> <style>
> /* 1. 基礎用法 */
> ul li {
> color: pink;
> }
>
> /* 2. 如果想指定第二個ul樣式， */
> /* 可以將該標籤加上class標籤，再指定 */
> .nav li {
> color: red;
> }
>
> /* 3. 想改變第二個ul裡的a標籤 */
> .nav li a {
> color: aqua;
> }
> </style>
></head>
><body>
> <ul>
> <li>我是ul的孩子</li>
> <li>我是ul的孩子</li>
> <li>我是ul的孩子</li>
> <li>我是ul的孩子</li>
> </ul>
> <ur class="nav">
> <li>我是ul的孩子</li>
> <li>我是ul的孩子</li>
> <li>我是ul的孩子</li>
> <li><a href="#">我是孫子</a></li>
> <li><a href="#">我是孫子</a></li>
> <li><a href="#">我是孫子</a></li>
> </ur>
></body>
>```
### 子選擇器 ( 子元素選擇器 )
>:::warning
>只會選擇到**親兒子**。
>:::
>```
> 元素1>元素2 { 樣式 }
>```
>
>
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>子選擇器</title>
> <style>
> div>a {
> color: red;
> }
> </style>
></head>
><body>
> <div class="nav">
> <a href="#">我是兒子</a>
> <p>
> <a href="#">我是孫子</a>
> </p>
> </div>
></body>
>```
### 聯集選擇器
>```
>元素1, 元素2 { 樣式 }
>```
> 1. 用於集體聲明，可以選擇多組標籤，同時為他們定義相同的樣式。
>
> 2. 元素可以是任何形式的選擇器。
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>聯集選擇器</title>
> <style>
> div,
> p,
> .pig li {
> color: red;
> }
> </style>
></head>
><body>
> <div>熊大</div>
> <p>熊二</p>
> <ul class="pig">
> <li>豬爸爸</li>
> <li>豬媽媽</li>
> <li>小豬佩琪</li>
> </ul>
></body>
>```
### 偽class選擇器
>:::warning
>class選擇器 : 使用 **`.`** 表示。
>
>偽class選擇器 : 使用 **`:`** 表示。
>:::
> 1. 用於向某些選擇器添加特殊的效果。
>> * 給連結添加特殊效果，讓滑鼠移動到文字後變色。
>>
>> * 選擇第 1 個、第 n 個元素。
>
>#### 連結偽class選擇器
> 1. 一共有四種功能 :
>```css=
>a:link /* 選擇所有未被訪問的連結 */
>a:visited /* 選擇所有已被訪問的連結。 */
>a:hover /* 選擇滑鼠位於其上的連結 */
>a:active /* 選擇活動連結 ( 滑鼠按下且還沒未彈起的連結 ) */
>```
>
> 2. 必須按照 `link`、`visited`、`hover`、`active` 的**順序聲明**，否則會沒有作用。
> 3. 因為 `<a> </a>` 在瀏覽器中具有默認樣式，所以需要單獨指定樣式。
>
> 4. 實際開發中，通常不會用到那麼多功能。
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>連結偽class選擇器</title>
> <style>
> a {
> color: black;
> text-decoration: none;
> }
> a:hover {
> color: red;
> }
> </style>
></head>
><body>
> <a href="#">海綿寶寶</a>
> <a href="#">派大星</a>
></body>
>```
>
>#### focus偽class選擇器
> 1. 用於選取獲得焦點的表單元素。
>
> 2. 一般情況 `<input>` 類表單元素才能獲得，因此這個選擇器主要是針對表單元素。
>
>
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>focus 偽class選擇器</title>
> <style>
> input:focus {
> background-color: yellow;
> color: red;
> }
> </style>
></head>
><body>
> <input type="text">
> <input type="text">
> <input type="text">
></body>
>```
## 元素顯示模式
### 塊元素
>:::success
>常見的塊元素 : `<h1> ~ <h6>`、`<p>`、**`<div>`**、`<ul>`、`<ol>`、`<li>`。
>:::
> 1. 特點 :
>> * 自己獨佔一行
>>
>> * 高度、寬度、外邊距、內邊距都**可以控制**。
>> * 寬度默認是容器 ( 父級寬度 ) 的 100%。
>> * 是一個容器及盒子，裡面可以放**行內元素**或**塊元素**。
>
> 2. 注意 :
>> * 文字類的元素 ( `<h1> ~ <h6>`、`<p>` ) 裡面不能使用塊元素，否則會出現錯誤。
>>
>> * 可以發現我們只寫了一個 `<p>`，但實際上卻出現了兩個 `<p>`，而且 `<div>` 也不在 `<p>` 裡面。
>>
>>
>>```htmlembedded=
>><body>
>> <p>
>> <div>這裡會有問題</div>
>> </p>
>></body>
>>```
### 行內元素 ( 內聯元素 )
>:::success
>`<a>`、`<strong>`、`<b>`、`<em>`、`<i>`、`<del>`、`<s>`、`<ins>`、`<u>`、**`<span>`**。
>:::
> 1. 特點 :
>> * 相鄰行內元素在一行上可以顯示多個。
>>
>> * 高度、寬度直接設置是**無效的**。
>> * 默認寬度就是他本身內容的寬度。
>> * 行內元素只能容納**文本**或其他**行內元素**。
>
> 2. 注意 :
>> * 連結內不能再放連結。
>>
>> * 特殊情況 `<a>` 裡面可以放塊元素，但是將 `<a>` 轉換成塊元素最安全。
>>> :::warning
>>> 整個區塊包含圖片都被包含在 `<a>` 裡面。
>>> :::
>>>
>>> 
### 行內塊元素
>:::success
>`<img />`、`<input />`、`<td>`，同時具有塊元素、行內元素的特點。
>:::
> 1. 特點 :
>> * 一行可以**顯示多個** ( 行內元素 )。
>>
>> * 默認寬度是他本身內容的寬度 ( 行內元素 )。
>> * 高度、寬度、外邊距、內邊距都**可以控制** ( 塊元素 )。
### 元素顯示模式轉換
> 1. 特殊情況下，某個模式的元素會需要另一種模式的特性。
>> * 例如想要增加 `<a>` 的觸發範圍。
>
> 2. 幾種模式 :
>```css=
>display: block; /* 最常使用，因為我們通常會希望可以自己設置長寬 */
>display: inline; /* 較少使用 */
>display: inline:block; /* 常用，可以做一些巧妙的設置 */
>```
>
>
>
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>元素顯示模式轉換</title>
> <style>
> a {
> height: 50px;
> width: 200px;
> background-color: pink;
> display: block;
> }
> div {
> height: 50px;
> width: 200px;
> background-color: blue;
> display: inline;
> }
> span {
> height: 50px;
> width: 200px;
> background-color: greenyellow;
> display: inline-block;
> }
> </style>
></head>
><body>
> <a href="#">我是行內元素</a>
> <a href="#">我是行內元素</a>
>
> <div>我是塊元素</div>
> <div>我是塊元素</div>
>
> <span>行內元素轉行內塊元素</span>
> <span>行內元素轉行內塊元素</span>
></body>
>```
## 背景
> 1. 可以設置背景顏色、背景圖片、背景平舖、背景圖片位置、背景圖像固定。
### 背景顏色
>```css=
>background-color: transparent; /* 默認 */
>background-color: 顏色;
>```
### 背景圖片
> 1. 實際開發常見於 `Logo` 、`裝飾性的小圖片`、`超大的背景圖片`。
>
> 2. 好處是非常**便於控制位置**。
>```css=
>background-image: none; /* (默認) */
>background-image: url(地址);
>```
### 背景平舖
>```css=
>background-repeat: repeat; /* 默認是平鋪的 */
>background-repeat: no-repeat; /* 不平舖 */
>background-repeat: repeat-x; /* 橫向平舖 */
>background-repeat: repeat-y; /* 縱向平舖 */
>```
>
>| 平舖 | 不平舖 | 橫向平舖 | 縱向平舖 |
>| --- | ----- | ------- | ------ |
>|  |  |  |  |
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>背景平舖</title>
> <style>
> div {
> width: 150px;
> height: 150px;
> background-image: url(img.png);
> background-repeat: repeat-y;
> background-color: pink;
> }
> </style>
></head>
><body>
> <div></div>
></body>
>```
### 背景圖片位置
> 1. `x`、`y` 座標可以使用**方位名詞**或是**精確單位**。
>> * 參數都是方位名詞 : 兩者順序無關，`top center` 跟 `center top` 一樣。
>>
>> * 如果只指定一個方位名詞，另一個省略，則第二個值默認置中對齊。
>>
>>
>
>#### 方位名詞 :
>> **`x`** : `left`、`center`、`right`。
>>
>> **`y`** : `top`、`center`、`bottom`。
>>
>
>```css=
>background-position: x y;
>```
>
>#### 精確單位
> 1. 如果只指定一個值，那數值就是 `x座標`，另一個 `y座標` 默認垂直置中。
>
>```css=
>background-position: 20px 50px;
>```
>
>#### 混合單位
>```css=
>background-position: 20px center;
>```
### 背景圖像固定 (背景附著)
> 1. 設置背景圖像**固定**、**隨著頁面的其餘部分滾動**。
> 2. 可以製作**視差滾動**的效果。
>```css=
>background-attachment: scroll; /* 默認 */
>background-attachment: fixed;
>```
### 背景屬性複合寫法
> 1. 沒有特定書寫順序，但一般約定順序為 :
>> `background:` `背景顏色` `背景圖片地址` `背景平舖` `背景圖像滾動` `背景圖片位置`
>
>```css=
>background: transparent url(img.jpg) no-repeat fixed center top;
>```
### 背景顏色半透明
> 1. `alpha透明度`，取值範圍 `0 ~ 1`，小數點 `0` 可省略，越低越透明。
>> * 還可以看到背景的圖片。
>>
>> 
>
>```css=
>background: rgba(0, 0, 0, .3);
>```
## CSS的三大特性
> 1. **`層疊性`**、**`繼承性`**、**`優先級`**。
### 層疊性
> 1. 相同選擇器設置相同的樣式，此時就會產生**樣式衝突**，一個樣式會層疊 ( 覆蓋 ) 另一個衝突的樣式。
>
> 2. **`就近原則`** : 哪個樣式離結構近，就執行哪個樣式。
>
> 
### 繼承性
> 1. 子標籤會繼承父標籤的某些樣式 : `text-`、`font-`、`line-`、`color`。
>
> 2. 恰當使用可以降低 `CSS` 樣式的複雜性。
>
> 
>
> #### 行高的繼承性
> 1. 實際開發中常出現的寫法 :
>
>> * 行高也可以**不跟單位**。
>>
>> * 這個 `1.5` 就是**當前元素文字大小`font-size`** 的 `1.5` 倍。
>```css=
>body {
> font: 12px/1.5 Microsoft YaHei;
>}
>```
>
> 2. 這種寫法最大的好處就是裡面的子元素可以根據自己文字大小**自動調整行高**。
> ---
> 
>
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>行高的繼承性</title>
> <style>
> body {
> color: red ;
> font: 20px/1.5 'Microsoft YaHei';
> }
> div {
> /* div 沒有指定文字大小 */
> /* 所以繼承父親 body 的文字大小 20px */
> /* 行高 = 20px * 1.5 = 30px */
> }
> p {
> /* p 指定文字大小 16px */
> /* 行高 = 16px * 1.5 = 24px */
> font-size: 16px;
> }
> </style>
></head>
><body>
> <div>我是div</div>
> <p>我是p</p>
></body>
>```
### 優先級
> 1. 當同一個元素指定多個選擇器，就會有優先級的產生。
>> * 選擇器相同，執行 **`層疊性`**。
>>
>> * 選擇器不同，根據**選擇器權重**執行。
>>
>> 
>
> 
>
> 2. 注意 :
>> * 權重由四組數字組成，可以疊加，但是永遠不會有進位。
>>
>> * 等級判斷從左至右，如果相同，則判斷下一位數值。
>> * **繼承權重是 `0`**。
>>> :star: 可以透過這點解釋 `<a>` 必須單獨指定樣式的原因。
>>
>>```htmlembedded=
>><head>
>> <meta charset="UTF-8">
>> <meta http-equiv="X-UA-Compatible" content="IE=edge">
>> <meta name="viewport" content="width=device-width, initial-scale=1.0">
>> <title>test</title>
>> <style>
>> body {
>> color: red;
>> }
>> /* 瀏覽器默認a連結的樣式 */
>> /* a { color: blue; text-decoration: underline;} */
>> /* 權重: 元素選擇器 > 繼承， 所以 body 並不會有作用 */
>> a {
>> color: yellow;
>> }
>> </style>
>></head>
>><body>
>> <a href="#">我是單獨標籤</a>
>></body>
>>```
>
> 3. 權重疊加
>> * 如果使用**複合選擇器**，就需要計算權重。
>>
>> * 權重可以疊加，但永遠不會進位。
>>```htmlembedded=
>><head>
>> <meta charset="UTF-8">
>> <meta http-equiv="X-UA-Compatible" content="IE=edge">
>> <meta name="viewport" content="width=device-width, initial-scale=1.0">
>> <title>優先級權重疊加</title>
>> <style>
>> /* li 的權重是 0,0,0,1 */
>> li {
>> color: red;
>> }
>> /* ul li 的權重是 0,0,0,2 */
>> ul li {
>> color: pink;
>> }
>> /* .nav li 的權重是 0,0,1,1 */
>> .nav li {
>> color: yellow;
>> }
>> </style>
>></head>
>><body>
>> <ul class="nav">
>> <li>豬頭</li>
>> <li>豬腿</li>
>> <li>豬尾巴</li>
>> </ul>
>></body>
>>```
# 網頁布局
> * 有三大核心 : **`盒子模型`**、**`浮動`**、**`定位`**。
>
> * 網頁布局的本質、過程 :
>> 1. 先準備好相關網頁元素，基本都是盒子 Box。
>>
>> 2. 利用 `CSS` 設置好盒子樣式，然後擺到相應位置 ( `浮動` )。
>> 3. 往盒子裡面裝內容。
## 常見的網頁布局
>
>
>
>
>
# 盒子模型 ( Box Model )
## 盒子模型組成
> * 由 **`邊框`**、**`內容`**、**`內邊距`**、**`外邊距`** 組成。
>
>> 
>
### border 邊框
> 1. 可以設置 **`邊框粗細`**、**`邊框樣式`**、**`邊框顏色`**。
>```css=
>border-width: 5px; /* 邊框粗細，一般單位用 px */
>border-style: solid; /* 邊框的樣式 */
>border-color: pink; /* 邊框顏色 */
>
>/* 複合寫法，沒有順序 */
>border: 5px solid pink;
>```
>> * 看起來越精緻的邊框兼容性會越差 ( 例如最下方的四個樣式 )。
>>
>> 
>>
>> 
>>
>
> 2. 邊框可以單獨對某一邊進行設置
>```css=
>border-top: ;
>border-bottom: ;
>border-left: ;
>border-right: ;
>```
>
> 3. :star: **表格細線邊框**
>:::warning
>記得要單獨設置 `th`、`td` 的邊框，
>如果只設置 `table` 的話，就只會出現最外圍的邊框而已，表格中並不會出現。
>:::
>```css=
>/* 合併相鄰的邊框 */
>/* 可以避免兩個邊框疊加變粗 */
>border-collapse: collapse;
>```
>>
> 
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>表格邊框</title>
> <style>
> table {
> width: 300px;
> height: 150px;
> font-size: 16px;
> text-align: center;
> }
> th {
> height: 60px;
> }
> table,
> th, td {
> border: 3px solid blue;
> border-collapse: collapse;
> }
> </style>
></head>
><body>
> <table>
> <tr>
> <th> 姓名 </th>
> <th> 性別 </th>
> <th> 年齡 </th>
> </tr>
> <tr>
> <td> 王大明 </td>
> <td> 男 </td>
> <td> 20 </td>
> </tr>
> <tr>
> <td> 王小明 </td>
> <td> 男 </td>
> <td> 18 </td>
> </tr>
> </table>
></body>
>```
> 4. 邊框會**增加**盒子實際大小
>> * 解決辦法 :
>>> 1. 測量盒子大小時，不量邊框。
>>>
>>> 2. 測量時包含了邊框，`width/height` 必須扣掉邊框大小。
>>
>> 
### padding 內邊距
> 1. 設置邊框與內容之間的距離。
>
>```css=
>padding-top: 5px;
>padding-left: 5px;
>padding-right: 5px;
>padding-bottom: 5px;
>```
>
> 2. 複合寫法 ( 四種實際開發中都會遇到 )
>
> 
>
> 3. 內邊框會**增加**盒子實際大小
>> * 解決辦法與 `邊框` 相同。
> 4. 什麼情況不會撐開盒子大小？
>> * 如果當前盒子本身沒有指定 `width/height` ( 繼承不算，孩子不會超過父親的大小 )，此時 `padding` 不會撐開盒子大小。
>>
>> 
>>
>> 
### margin 外邊距
> 1. 控制盒子與盒子之間的距離
>
>```css=
>margin-left: ;
>margin-right: ;
>margin-top: ;
>margin-bottom: ;
>```
>
> 2. 複合寫法與 **`padding`** 相同。
>
> 3. 如何讓塊元素**水平居中**，有兩個條件 :
>>:::warning
>>只適用於 **`塊元素`**，如果想讓 **`行內元素`**、**`行內塊元素`** 居中對齊的話，
>>在父元素設置 **`text-align: center;`** 就可以了。
>>:::
>> * 盒子必須指定**寬度**。
>>
>> * 左右的外邊距都設置為 **`auto`**。
>>```css=
>>margin-left: auto; margin-right: auto;
>>margin: auto;
>>margin: 0 auto; /* 實際開發中最常見 */
>>```
>
> 4. **相鄰塊元素**垂直外邊距的合併
>> * 當**上下相鄰**的兩個塊元素 ( 兄弟關係 ) 分別設有 **`margin-bottom`**、**`margin-top`**，則他們的垂直間距不是兩者的和，而是**取值較大者**。
>>
>> * 解決辦法 : 盡量只給一個盒子設置 `margin`。
>>
>> 
>>
> 5. **嵌套塊元素**垂直外邊距的塌陷
>:::warning
>浮動的盒子不會有外邊距合併的問題。
>:::
>> * 兩個父子關係的塊元素，如果父元素與子元素同時都設置 **`margin-top`**，父元素則會塌陷成較大的外邊距值。
>>
>> * 解決方案 ( 在**父元素**添加 ) :
>>:::success
>>還有其他方法，比如 `浮動`、`固定`、`絕對定位` 的盒子不會有塌陷問題。
>>:::
>>```css=
>>border: 1px solid transparent;
>>padding: 1px;
>>overflow: hidden; /* 較常見，而且不會改變盒子大小 */
>>```
>>
>> 
### 清除內外邊距
>:::warning
>**`行內元素`** 為了兼容性，盡量只設置**左右內外邊距**，不要設置上下內外邊距 ( 設置了也不會起到效果 )，但是轉換為 **`塊元素`**、**`行內塊元素`** 就可以了。
>:::
> 1. 很多網頁元素都帶有默認的內外邊距，而且不同瀏覽器默認的數值也不一致，所以在一開始就先清除內外邊距。
>```css=
>* {
> padding: 0px;
> margin: 0px;
>}
>```
## 圓角邊框
> 1. 運作原理 :
>
> 
>
>```css=
>/* 可以跟 1~4 個數值，分別代表 左上、右上、右下、左下 */
>border-radius: 10px;
>
>/* 分開寫 */
>border-top-left-radius: ;
>border-top-right-radius: ;
>border-bottom-right-radius: ;
>border-bottom-left-radius: ;
>```
>
> ---
>
> 
>
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>圓角邊框</title>
> <style>
> .circle {
> background-color: pink;
> height: 100px;
> width: 100px;
> border-radius: 50px;
> /* 也可以寫成 50%，代表寬度的一半 */
> /* border-radius: 50%; */
> }
>
> .rec {
> background-color: pink;
> height: 100px;
> width: 200px;
> /* 設為高度的一半 */
> border-radius: 50px;
> }
>
> .four {
> background-color: pink;
> height: 100px;
> width: 100px;
> border-radius: 10px 20px 30px 40px;
> }
> </style>
></head>
><body>
> 1. 圓形的做法
> <div class="circle"></div>
> 2. 圓角矩形的做法
> <div class="rec"></div>
> 3. 可以設置四個不同的圓角
> <div class="four"></div>
></body>
>```
## 盒子陰影
>:::warning
>1. 默認是 `outset`，但是不可寫上，否則陰影無效。
>
>2. 盒子陰影**不占空間**，不會影響其他盒子的排列。
>:::
> 1. 設置盒子陰影 :
>```css=
>box-shadow: h-shadow v-shadow blur spread color (inset)
>```
>
>
>
>2. 設置一個鼠標移動過去會出現陰影的盒子。
>
>
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>盒子陰影</title>
> <style>
> div {
> width: 200px;
> height: 200px;
> background-color: pink;
> }
>
> div:hover {
> box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
> }
> </style>
></head>
><body>
> <div></div>
></body>
>```
## 文字陰影
> 1. 實際開發用的不多。
>
> 2. 給文字添加陰影 :
>```css=
>text-shadow: h-shadow v-shadow blur color;
>```
>
>
# 浮動
:::success
第一準則 : 多個塊元素縱向排列找標準流，橫向排列找浮動。
:::
## 為什麼需要浮動
> 1. 有很多的布局效果，標準流沒有辦法完成，此時就可以使用浮動完成布局，因為浮動可以**改變元素標籤默認的排列方式**。
>
>> * 如何讓兩個盒子一個對齊左邊，一個對齊右邊？
>>
>>>
>>
>> * 如何讓多個塊盒子水平排成一行 ？
>>
>>> 
>>> * 也可以使用 `display: inline-box`，但是盒子之間默認會有大的空白縫隙，不好控制。
>
> 2. 最典型的應用 : 讓多個塊元素在一行內排列顯示。
## 什麼是浮動
> 1. `float` 用於創建浮動框，將其移動到一邊，直到左邊緣或右邊緣碰到包含塊或是另一個浮動框的邊緣。
>
> 2. 語法 :
>```css=
>選擇器 {
> float: none;
> float: left;
> float: right;
>}
>```
## 浮動特性
### 會脫離標準流 (脫標)
> 1. 脫離標準流的控制，移動到指定位置。
>
> 2. 浮動的盒子**不再保留原先的位置** 。
>> * 後面的盒子會補上他原本的位置。
>>
>> * 如果兩個盒子，只給一個盒子設置浮動，那麼就會出現疊加的效果。
>>> 
>>> 
### 一行內顯示並且元素頂部對齊
> 1. 如果多個盒子都設置浮動，則他們會在**一行內顯示**並且**頂端對齊排列**。
>
> 2. 浮動元素是互相靠在一起的，不會有縫隙，如果父級寬度裝不下這些盒子，多出的盒子就會另起一行對齊。
>>
>> 
### 具有行內塊元素的特性
> 1. 任何元素都可以設置浮動，並且都具有行內塊元素像似的特性。
>> * 行內元素如果設置浮動，不需要轉換型態就能設置寬度、高度。
> 2. 如果沒有設置寬度，在添加浮動後，他的大小會根據內容決定。
### 經常和標準流父級搭配使用
> 1. 網頁布局一般採取的策略 :
>> * 先用標準流的父元素排列上下位置，之後內部子元素採取浮動排列左右位置。
>>
>> * 這樣浮動元素的位置依據就會是父元素盒子大小，也就是固定的位置，而不是根據瀏覽器大小不斷變動位置。
## 簡單布局練習
>
>
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>浮動布局練習</title>
> <style>
> .box {
> width: 1226px;
> height: 615px;
> background-color: purple;
> margin: 0 auto;
> }
>
> .left {
> float: left;
> width: 234px;
> height: 615px;
> background-color: blue;
> }
>
> .right {
> float: left;
> width: 992px;
> height: 615px;
> background-color: darkorange;
> }
>
> .right>div {
> float: left;
> width: 234px;
> height: 300px;
> background-color: pink;
> margin-left: 14px;
> margin-bottom: 14px;
> }
> </style>
></head>
><body>
> <div class="box">
> <div class="left">left box</div>
> <div class="right">
> <div>1</div>
> <div>2</div>
> <div>3</div>
> <div>4</div>
> <div>5</div>
> <div>6</div>
> <div>7</div>
> <div>8</div>
> </div>
> </div>
></body>
>```
## 注意事項
> 1. 浮動和標準流的父盒子搭配。
>> * 先用標準流的父元素排列上下位置，之後內部子元素採取浮動排列左右位置。
>
> 2. 一個大盒子裡有多個盒子，如果其中一個盒子浮動了，理論上其餘的兄弟盒子也要浮動，以防止出現問題。
>> * 浮動盒子只會影響到後面的標準流元素。
## 清除浮動
### 為什麼需要清除浮動
> * 因為父盒子很多情況下**不方便給高度**，像是商品可能很多、文字內容長度不一定，但是子盒子浮動又**不占位置**，最後**父盒子高度就會為 `0`**，影響到下面的標準流盒子。
>> 
### 本質
> 1. 本質就是**清除浮動元素造成的影響**。
>
> 2. 如果父盒子本身有高度，就不需要清除浮動了。
> 3. :star: 清除浮動後，父盒子就會根據浮動的子盒子自動檢測高度，有了高度之後那就不會影響到下面的標準流了。
### 策略
> 1. **閉合浮動**，只讓浮動元素在父盒子內部影響，不影響外面的其他盒子。
>
>```css=
>選擇器 {
> clear: left;
> clear: right;
> clear: both; /* 最常使用 */
>}
>```
## 清除浮動的四種方式
>
### 額外標籤法 (隔牆法)
>:::warning
>新的空標籤必須是**塊元素**。
>:::
> 1. 在浮動元素**結尾**添加一個空的標籤。
> 2. 優點 : 通俗易懂，書寫方便。
>
> 3. 缺點 : 添加許多無意義的標籤，結構化較差，實際開發中**較少使用**。
>>
>>
>>
>>
### 父元素添加 overflow
>```css=
>overflow: hidden; /* 最常見 */
>overflow: auto;
>overflow: scroll;
>```
>
>
>
> 1. 優點 : 代碼簡潔。
>
> 2. 缺點 : 無法顯示溢出的部分。
### :after偽元素法
>:::success
>代表網站 : 百度、淘寶、網易等等。
>:::
>
>```css=
>.clearfix:after {
> content: "";
> display: block;
> height: 0;
> clear: both;
> visibility: hidden;
>}
>
>.clearfix {
> /* 照顧低版本瀏覽器 IE6、7 */
> *zoom: 1;
>}
>```
> 
>
> 1. **`:after`** 方法是額外標籤法的升級版，但是給**父元素添加**。
>
> 2. 優點 : 沒有增加標籤，結構更簡單。
> 3. 缺點 : 需照顧低版本瀏覽器。
### 雙偽元素法
>:::success
>代表網站 : 小米、騰訊等等。
>:::
>```css=
>.clear:before,
>.clearfix:after {
> content: "";
> display: table;
>}
>.clearfix:after {
> clear: both;
>}
>.clearfix {
> /* 照顧低版本瀏覽器 IE6、7 */
> *zoom: 1;
>}
>```
>
>
>
> 1. 也是給父元素添加。
>
> 2. 優點 : 代碼更簡潔。
> 3. 缺點 : 需照顧低版本瀏覽器。
# PhotoShop 切圖
## 基本操作
### 使用切片工具
>
> 
>
### 快捷鍵 : **`ALT + CTRL + SHIFT + S`**
>
> 
>
### 修改儲存的切片
>
> fds
## 怎麼獲得透明的背景圖
# 定位
## 為什麼需要定位
> 1. 很多效果是標準流做不出來的，因此需要定位來實現。
>>
>> 
>
> 2. **`浮動`** 可以讓多個塊元素一行沒有縫隙排列顯示，經常用於橫向排列盒子。
>
> 3. **`定位`** 可以讓盒子自由的在某個盒子內移動位置或者固定在屏幕中某個位置，並且**可以壓住其他盒子**。
## 定位組成
```
定位 = 定位模式 + 邊偏移
```
### 定位模式
>
>
>
### 邊偏移
> 
## 靜態定位 static
>:::warning
>布局時很少用到。
>:::
>```css=
>選擇器 {
> position: static;
>}
>```
>
> 1. 靜態定位是元素的**默認定位方式**、**無定位**的意思，按照標準流的特性擺放位置。
## 相對定位 relative
>:::warning
>最典型的應用是當作**絕對定位**的父親，限制絕對定位的移動。
>:::
>```css=
>選擇器 {
> position: relative;
>}
>```
> 1. 相對定位在移動元素位置時是**相對於他原本的位置**。
>
>> 
>
> 2. 特點 :
>> * 它是相對於自己原來的位置來移動的。
>>
>> * 移動後**保留原本的位置**，並沒有脫標。
## 絕對定位 absolute
>```css=
>選擇器 {
> position: absolute;
>}
>```
> 1. 絕對定位在移動元素位置時是**相對於祖先元素**。
>
> 2. 特點
>> * 如果**沒有祖先元素**、**祖先元素沒有定位**，則以瀏覽器為準定位。
>>
>> * 如果祖先元素有定位，則以 **最近一級`有定位`的祖先元素** 作為參考點。
>> * 絕對定位**不佔有**原先的位置 ( 脫標 )。
## 口訣 : 子絕父相
> 1. **子級使用絕對定位**，不會佔有位置，可以放到父盒子裡面的任何一個地方，不會影響其他的盒子。
>
> 2. 父盒子需要佔有位置，才能限制子盒子的定位，所以父盒子就會使用**相對定位**。
> 3. 子絕父相不是絕對的，可能也會遇到子絕父絕等等的其他情況。
## 固定定位 fixed
>```css=
>選擇器 {
> position: fixed;
>}
>```
> 1. 固定定位可將元素固定於瀏覽器可視區的某個位置，讓頁面滾動時元素的位置不會改變。
>
> 2. 特點 :
>> * 以瀏覽器的可視窗口為參考點移動元素。
>>
>> * 與父元素沒有任何關係。
>> * 不隨滾動條滾動。
>> * **不佔有**原先位置 ( 脫標 )。
>> * 也可將固定定位看成是一種特殊的絕對定位。
### 小技巧 : 固定在版心的右側位置
> 1. 先讓固定定位的盒子走到瀏覽器可視區 (版心) 的一半位置。
>
>```css=
>left: 50%;
>```
> 2. 再讓固定盒子移動版心寬度的一半距離。
>
>```css=
>margin-left: ;
>```
>
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>固定定位在版心的右側位置</title>
> <style>
> .box {
> width: 800px;
> height: 1400px;
> background-color: pink;
> margin: 0 auto;
> }
> .right {
> position: fixed;
> left: 50%;
> margin-left: 405px;
> width: 50px;
> height: 150px;
> background-color: yellow;
> }
> </style>
></head>
><body>
> <div class="right">固定位置</div>
> <div class="box">我是版心</div>
></body>
>```
## 黏性定位
>:::warning
>什麼是黏性定位？
>一開始元素可能是隨著頁面滾動的，但是到了某個位置之後就會變成固定定位。
>:::
>```css=
>選擇器 {
> position: sticky;
> top: 10px;
>}
>```
> 1. 可以當作是相對定位和固定定位的混合。
>
> 2. 特點 :
>> * 以瀏覽器的可視窗口為參考點移動元素 ( 固定定位 )。
>>
>> * 佔有原先的位置 ( 相對定位 )。
>> * 必須添加 `top`、`left`、`right`、`bottom` 其中一個才有效。
## 定位疊放次序 z-index
>```css=
>選擇器 {
> z-index: 1;
>}
>```
>
> 1. 數值可以是`正整數`、`負整數`、`0`，默認是 `auto`，數值越大，盒子越靠上。
>
> 2. 屬性質相同，按照書寫順序疊放。
> 3. 不能加單位。
> 4. 只有定位的盒子才有 `z-index` 屬性。
## 絕對定位的盒子水平垂直居中
>:::warning
>絕對定位的盒子不能透過 **`margin: 0 auto`** 水平居中。
>:::
> 1. 讓盒子左側移動到父元素的水平中心位置。
>```css=
>left: 50%;
>```
> 2. 讓盒子向左移動自身寬度的一半。
>```css=
>margin-left: -(盒子一半的寬度);
>```
> 3. 垂直居中概念與水平居中相同，改成 `top` 就可以了。
>
> 
>
>```htmlembedded=
><head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>絕對定位的盒子垂直居中</title>
> <style>
> .box {
> position: absolute;
> left: 50%;
> margin-left: -100px;
> top: 50%;
> margin-top: -100px;
> width: 200px;
> height: 200px;
> background-color: pink;
> }
> </style>
></head>
><body>
> <div class="box"></div>
></body>
>```
## 定位的特殊特性
> 1. 絕對定位、固定定位也和浮動類似。
>> * 行內元素添加絕對或固定定位，可以直接設置高度和寬度。
>>
>> * 塊元素添加絕對或固定定位，如果不給寬度或高度，默認是內容的大小。
>
> 2. 浮動元素、絕對定位、固定定位的元素 ( 脫標的盒子 ) 都不會觸發外邊距塌陷的問題。
## 絕對定位、相對定位會完全壓住盒子
> 1. 浮動元素只會壓住下面標準流的盒子，但是不會壓住裡面的內容，因為浮動最初產生的目的是為了做文字環繞的效果。
>
> 2. 絕對定位、相對定位會壓住下面標準流所有的內容。
# 元素的顯示與隱藏
## display 屬性
>:::warning
>搭配 `JavaScript` 可以做很多網頁特效，用途非常廣泛。
>:::
>```css=
>display: none; /* 隱藏元素 */
>display: block; /* 顯示元素，也可以轉換為塊元素。 */
>```
> 1. 隱藏元素後，**不再佔有原先的位置**。
## visibility 可見性
>```css=
>visibility: visible; /* 元素可視 */
>visibility: hidden; /* 元素隱藏 */
>```
> 1. 隱藏元素後，繼續**占有原來的位置**。
## overflow 溢出
>```css=
>overflow: visible; /* 顯示溢出的部分 */
>overflow: hidden; /* 隱藏溢出的部分 */
>overflow: scroll; /* 不管是否溢出，都會顯示滾動條 */
>overflow: auto; /* 當有內容溢出時，才會顯示滾動條 */
>```
> 1. 如果有定位的盒子，需要慎用 `overflow: hidden;`，因為它會隱藏多餘的部分。
>> * 如果有超出盒子的特別設計，就會被隱藏。
>>
>> 
Sign in with Wallet
Connect another wallet