owned this note
owned this note
Published
Linked with GitHub
###### tags: `上課筆記`
# HTML&CSS
## 簡介
#### HTML是一種標記語言，非程式語言。
* 標記語言：描述網站的結構
* 程式語言：有邏輯判斷在裡面
#### CSS用來給網頁的內容進行樣式上的編輯
# HTML常用標籤
20200221作業
# CSS
## 樣式表 style
### 網頁內含樣式表
第一種方式style 標籤樣式:寫在<style></style>
* 該網頁文件專屬樣式，無法被其他網頁使用
1. 原始碼
在Head裡建立樣式表，在Body裡面指定h1標籤的時候就會改變樣式
```htmlmixed=
<style>
h1{
color: brown;
background-color: burlywood;
font-size: 42px;
}
</style>
...
<h1>Lorem ipsum dolor sit amet.</h1>
```
2. 結果
<p style="color:brown;background-color: burlywood;font-size:42px;">Lorem ipsum dolor sit amet.</h1>
### 連結外部樣式表
第二種方式使用<link>連結外部樣式表
* 優點可以減少CSS原始碼，不需要每個HTML重複寫CSS，檔案較小。
* 設計專題或工作時，使用外部樣式表。
* 外部樣式表不只有一份，可能會有樣式被覆蓋的問題，因為瀏覽器在閱讀網頁時，由上至下閱讀每份外部樣式表。
1. 原始碼
```htmlmixed=
<link rel="stylesheet" href="style.css">
...
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi possimus consequatur fugit dolorem.
</p>
```
2. 同個資料夾下建立style.css，並裡面寫好樣式
3. 結果
<p style="color:purple;font-size:20px;" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi possimus consequatur fugit dolorem.
</p>
### 行內樣式
第三種方式：style屬性樣式，被稱為行內樣式，寫在標籤裡面
1. 原始碼
```htmlmixed=
<p style="color: hotpink;">Lorem ipsum dolor sit amet.</p>
```
2. 結果
<p style="color: hotpink;">Lorem ipsum dolor sit amet.</h1>
:::info
**樣式表寫入順序**
* 如果有重複的選擇器，瀏覽器在閱讀(從第一行開始)的時候會把最後讀到的樣式作為最終呈現。
* 行內樣式優先權最高，因為style是標籤的屬性，不會被內嵌(style)標籤、外部樣式表影響
:::
## 顏色使用方式
### 使用顏色名稱
```htmlmixed=
<p style="color: red;">Lorem ipsum dolor sit amet.</p>
```
<p style="color: red;">Lorem ipsum dolor sit amet.</p>
### 使用HEX 16進位碼
```htmlmixed=
<p style="color: #0000ff;">Lorem ipsum dolor sit amet.</p>
```
<p style="color: #0000ff;">Lorem ipsum dolor sit amet.</p>
### 使用rgb()
```htmlmixed=
<p style="color: rgb(0, 255, 0);">Lorem ipsum dolor sit amet.</p>
```
<p style="color: rgb(0, 255, 0);">Lorem ipsum dolor sit amet.</p>
## 選擇器 Selector
### Class 類別選擇器
<style>
.a{
color: red;
}
.li{
color:green;
}
.b{
color: darkmagenta;
}
</style>
<p>class是CSS樣式<em class="a">最常</em>被使用的選擇器，具有重複使用的特性，往後學習<a class="a" href="#"> Bootstrap</a>時，可以看到大量樣式被設計成class</p>
* 命名前面一定要加個半形句點(.)
* 只允許 字元、數字、連字、減號(-)，底線(_)
* 句點後必須以字源開始，不能用數字開頭、中文命名
* 類別、ID的名稱有大小寫區分
```htmlmixed=
<style>
.a{
color: red;
}
</style>
...
<body>
<div class="a"></div>
</body>
```
### ID選擇器
在一份文件裡面，只能有一個獨一無二的ID，具有唯一的特性，通常作為網頁邏輯區塊名稱，或是js、jq控制元素的選擇器(簡單來說就是可以直接被程式呼叫使用)。
* 命名前面要加個井字符號(#)
```htmlmixed=
<style>
#btn{
color: blue;
}
</style>
...
<body>
<div id="btn"></div>
</body>
...
<script>
$('#btn').click(function(){
/* do something */
})
</script>
```
### 後代選擇器與子代選擇器
```htmlmixed=
<style>
/* 後代選擇器，選擇後代子孫，nav裡面的所有p */
nav p{
color: blue;
}
/* 子代選擇器，只選擇兒子，nav下一層的p */
nav>p{
color: red;
}
</style>
...
<nav>
<p>Lorem ipsum dolor sit amet.</p>
<div>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</nav>
```
<style>
nav p{
color: blue;
}
nav>p{
color: red;
}
</style>
<nav>
<p>這是nav下一層</p>
<div>
<p>這是nav下下一層</p>
</div>
</nav>
## Font與Text常用屬性
### Font
文字尺寸：文字尺寸單位:px,em,rem
`font-size: 28px;`
斜體
`font-style: italic;`
粗體
`font-weight: bold;`
文字全部變大寫，並且第一個文字再加大
`font-variant: small-caps;`
指定字形
`font-family: 微軟正黑體;`
### Text
對齊
`text-align: left;`
底線
`text-decoration: underline;`
縮排
`text-indent: 60px;`
文字呈現：uppercase全大寫、lowercase全小寫、capitalize每個單字開頭大寫
`text-transform: capitalize;`
陰影：x軸 y軸 模糊半徑 色碼
`text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.527);`
## 背景 Background
單色背景顏色
`background-color: #FFA;`
背景圖片
`background-image: url("...");`
背景水平重複填滿
`background-repeat: repeat-x;`
背景垂直重複填滿
`background-repeat: repeat-y;`
背景不重複填滿
`background-repeat: no-repeat;`
背景圖片等比例縮放，背景圖片會填滿整個盒子
`background-size: cover;`
背景圖片等比例縮放，圖片一邊碰到盒子一邊，另一邊停止縮放
`background-size: contain;`
背景圖片定位:x軸 y軸
`background-position: 50% 50%;`
背景圖片直線漸層(上到下)
`background-image: linear-gradient(red, yellow, white);`
背景圖片直線漸層(左到右)
`background-image: linear-gradient(90deg, red, yellow, white);`
背景圖片直線漸層(左下到右上)
`background-image: linear-gradient(to right top, #fff 0%, lightblue 25%, #fff 50%, lightblue 75%, #fff 100%);`
背景圖片圓形漸層(由內而外)
`background-image: radial-gradient(white, #FFFFAA, pink);`
半透明背景:帶透明的顏色漸層放在圖片上
`background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(20, 150, 0, 0.2)), url("...");`
在圖片上左側漸層到右側
`background-image: linear-gradient(to right, #fff 0%,transparent 15%,transparent 85%,#000 100%), url("...");`
:::info
可以使用縮寫，但要注意background-size 一定要緊接在 background-position 之後，必須要用斜線分隔(/)
`background: url("...") no-repeat center center/cover;`
:::
## 盒模型 Box model
### 一個盒子由內而外的層級
### 盒子相關屬性
* `margin` 盒子的外距，可做負數設定(margin:auto預設8px)
* `padding` 盒子的內距，不可負數
* `border` 盒子的邊框，不可負數
* `outline` 外框，不會影響布局，只作為外觀呈現。顯示在border以外
* `border-radius` 盒子圓角
* `box-shadow` 盒子陰影
四個圓角都50%
`border-radius:50%;`
左上左下圓角都10rem(左上 右上 右下 左下)
`border-radius: 10rem 0 0 10rem;`
盒子內陰影(inset)，可以疊好幾個
`box-shadow: inset 0px 0px 10px #0f0,inset 0px 0px 15px #f00;`
盒子外框下面要畫一條黑線
`border-bottom:1px solid #000;`
:::info
* 兩box之間如果margin(外距)垂直重疊，大外距會吃小外距，以大外距為主
* margin可照寬度分配盒子的位置
```htmlmixed=
width: 500px;
margin: auto;
```
:::
### 計算盒子的寬度
width + padding-left + padding-right + margin-left + margin-right + border-left + border-right
改變盒子計算寬度的方式：padding、border 都會計算在 width，只考慮盒子width、margin設定
`box-sizing: border-box;`
### 畫一個圓
```htmlmixed=
.circle{
/* 畫圓，寬、高須為正方形 */
width: 500px;
height: 500px;
border:10px solid #aaaaaa;
/* 設定50%為圓形 */
border-radius: 50%;
margin: auto;
}
```
## 區塊盒與行內盒 block and inline
### 區塊盒 block
* 區塊盒前後斷行，填滿整個父元素，無法與其他元素並排
* 可以正常使用width、height、margin與padding屬性
* 區塊標籤：div、h1、p、ul
```htmlmixed=
<div style="background: #ffa;">Lorem ipsum dolor sit amet.</div>
<div style="background: #ffa;">Lorem ipsum dolor sit amet.</div>
<div style="background: #ffa;">Lorem ipsum dolor sit amet.</div>
```
<div style="background: #ffa;">Lorem ipsum dolor sit amet.</div>
<div style="background: #ffa;">Lorem ipsum dolor sit amet.</div>
<div style="background: #ffa;">Lorem ipsum dolor sit amet.</div>
<br>
### 行內盒 inline-block
* 行內盒前後不斷行，寬度以本身的內容寬度為主，width、height不會有任何作用
* 行內標籤：span、a、em、strong
```htmlmixed=
<span style="background: #ffa;">Lorem ipsum dolor sit amet.</span>
<span style="background: #ffa;">Lorem ipsum dolor sit amet.</span>
<span style="background: #ffa;">Lorem ipsum dolor sit amet.</span>
```
<span style="background: #ffa;">Lorem ipsum dolor sit amet.</span><span style="background: #ffa;">Lorem ipsum dolor sit amet.</span><span style="background: #ffa;">Lorem ipsum dolor sit amet.</span>
### 轉型 display
* 可以用Display設定其他類型的盒子
* 轉型後可使用不同類型盒子的屬性
區塊轉行內區塊
`display: inline-block;`
行內區塊轉區塊
`display: block;`
## 浮動 Float
讓區塊可以靠左靠右做排版
### float
靠左浮動
`float: left;`
靠右浮動
`float: right;`
### clear
不要靠左浮動
`clear: left;`
不要靠右浮動
`clear: right;`
不要靠兩邊浮動
`clear: both;`
:::danger
float會把沒內容的**父區塊**的背景吃掉，需要用一些手段把區塊獨立出來，背景才會正常的顯示。
解法：
被吃掉的區塊的class裡加上下列其一屬性
* `overflow: hidden;`
* `display: table;`
或，新增一個偽元素給該區塊使用
:::
## 定位 Position
定義區塊的位置
### 相對定位
會保留原本自己的位置，根據原本位置相對移動(從原本的位置定位)
`position:relative;`
### 絕對定位
脫離原本的正常流向獨立出來，被設定絕對定位的元素會往外找定位點，若沒有定位點會再往外找，都找不到的話，最後會以瀏覽器左上角為定位點。(從父元素開始定位)
`position:absolute;`
### 固定定位
頁面滑動的時候仍固定在定位點上，不會改變位置(從瀏覽器畫面開始定位)
`position: fixed;`
:::warning
* position的層級會大於float，所以被設定成position的元素會壓在flaot的區塊上
* 使用absolute，要確保父元素有定位點
:::
### 骰子練習
解題方法
1. 結構先出來
1. 設定樣式
1. 設定定位樣式
1. 把樣式指定回去
圖層順序，預設0
`z-index:1;`
全域樣式
```htmlmixed=
<!-- 全域樣式，可以自訂預設的樣式 -->
<style>
*{
/* 把排序的點點拿掉 */
list-style: none;
}
</style>
```
語意化標籤
其實沒甚麼意思，只是早期都是用`<div>`去作區塊，現在html5有更多類似用法的標籤，可以幫助辨識區塊內容，例如`<section>`或`<article>`
## Transform 移動
視窗高度
`height:100vh;`
視窗寬度
`width: 100vh;`
偏移量(x軸,Y軸) xy正值:右下/xy負值:左上
`transform: translate(50px, 100px);`
:::info
若使用%，實際長度會以元素本身尺寸計算，ex:width: 300px; => 50%(150px)
可設定單軸X移動
`transform: translateX(50px);`
可設定單軸Y移動
`transform: translateY(50px);`
:::
縮放:數值為倍數，也可以是負數(倒影)
`transform: scale(2);`
改變區塊的原點:center center是預設，為Box的中心點，也可以是百分比
`transform-origin: center center;`
`transform-origin: 50% 50%;`
旋轉:數值為角度，要加單位
`transform: rotate(45deg);`
傾斜:數值為角度，要加單位(x軸,y軸)
`transform: skew(45deg, 30deg);`
多屬性的應用:先寫的效果先做，要用空格分開
`transform: translate(100px) rotate(45deg) scale(2);`
:::info
屬性由左至右套用，作用順序十分重要，改變順序會產生不同的結果。原因是作用後原點位置會不一樣。
:::
選擇區塊`nth-child(n)`
```htmlmixed=
<style>
/* odd奇數 */
section:nth-child(odd) {
background: rgb(191, 255, 255);
}
/* even偶數 */
section:nth-child(even) {
background: rgb(255, 255, 199);
}
</style>
```
## Transition 轉場
1. 兩個樣式之間漸進式的轉換過程
2. 一個起始樣式，另一個是結束的樣式，瀏覽器會將兩個樣式之間的變化形成補間動畫(Tween)
3. 必須要有觸發動作，最常見的是:hover
滑鼠指到後要做的效果`hover`
```htmlmixed=
<style>
.box:hover {
background: red;
}
</style>
```
轉場屬性
`transition-property: background;`
持續時間
`transition-duration: 3s;`
轉場速率 ease、linear、ease-in、ease-out、ease-in-out
`transition-timing-function: ease;`
延遲時間
`transition-delay: 1s;`
transition的縮寫
```htmlmixed=
<style>
.box{
/* 縮寫 */
transition:
background 0.3s,
width 1s,
height 1s,
transform 1s ease-in-out 1.5s,
top 1s,
left 1s;
/* 或是寫成這樣，意思是全部屬性都1秒做完 */
transition: 1s;
}
</style>
```
transition 可控制屬性
[Transform 變形]
translate
rotate
scale
skew
[顏色]
color
background-color
border-color
[文字]
font-size
opacity
line-height
letter-spacing
word-spacing
[盒模型]
width
height
margin
padding
border
[定位]
top
right
bottom
left
## Animation 動畫
Transition
1.需要觸發條件(:hover)，兩種樣式狀態之間的漸進改變。
2.無法在網頁載入時自動發生，而且是一次性，必須重新再觸發一次。
Animation
1.產生更複雜的動畫，可以設定關鍵影格(keyframes)控制動畫進度。
2.網頁載入時自動撥放，且可以重複來回撥放。
建立動畫 animation
步驟一，必須建立一組關鍵影格(keyframes)，並設定動畫名稱(自訂義)
```htmlmixed=
<style>
@keyframes animaiton{
from{
...
}
to{
...
}
}
</style>
```
:::info
from、to也可以寫作0%、100%，也可以拆成0%、10%、80%、100%
:::
步驟二，套用動畫到各種選擇器或創建一個動畫專用的class，設定動畫各種屬性
```htmlmixed=
<style>
.animation{
animation-name: animation;
animation-duration:1s;
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-direction:alternate;
animation-delay:0s;
animation-fill-mode:forwards;
}
</style>
...
<body>
<div class="animation">
...
</div>
</body>
```
動畫名稱
`animation-name: animation;`
持續時間
`animation-duration: 1s;`
播放次數:預設1次，infinite無限次
`animation-iteration-count: infinite;`
播放速率 預設ease、linear、ease-in、ease-out、ease-in-out
`animation-timing-function: linear;`
播放方向
`animation-direction: normal;` 正向播放(預設)
`animation-direction: reverse;` 反向播放
`animation-direction: alternate;` 交替播放，奇數正向播放，偶數反向播放 0~100% => 100%~0%
`animation-direction: alternate-reverse;` 交替播放，奇數反向播放，偶數正向播放 100%~0% => 0%~100%
延遲時間
`animation-delay: 0s;`
播放後的狀態
`animation-fill-mode: forwards;` 保留動畫結束後的樣式
`animation-fill-mode: backwards;` 返回動畫一開始的樣式
縮寫
`animation: animation 5s infinite 0s ease alternate forwards;`
選顏色的網站
[ColorSpace](https://mycolor.space/)
[uiGradient](https://uigradients.com/#Vine)
[EvaDesignColor](https://colors.eva.design/)
### Filter 濾鏡
模糊:值越大越模糊
`filter: blur(0px);`
亮度:值越大越亮 0%黑色 100%正常 100%以上強烈
`filter: brightness(0%);`
對比:值越大對比度越高 0%灰色 100%正常 100%以上強烈
`filter: contrast(0%);`
drop-shadow 可以顯示物件形狀的陰影，包含邊框周圍(內、外)、文字外框等陰影
`filter: drop-shadow(0px 0px 5px #f00);`
灰階:0%正常 100%完全灰階
`filter: grayscale(0%);`
色相旋轉 霓虹燈效果
`filter: hue-rotate(360deg);`
負片 0%正常 100%負片
`filter: invert(100%);`
透明 0%透明 100%正常
`filter: opacity(0%);`
飽和度 0%不飽和 100%正常
`filter: saturate(0%);`
泛黃相片 0%正常 100%泛黃
`filter: sepia(100%);`
## 頁面布局練習
1. 結構先出來
可以把分好的區塊用註解包起來，這樣看起來會很清楚喔
2. 把標籤樣式重設
[Eric Meyer’s “Reset CSS” 2.0](https://cssreset.com/scripts/eric-meyer-reset-css/)
3. 建立自己的css
:::info
外部字形
[google免費字形](https://fonts.google.com/specimen/Noto+Sans+TC?selection.family=Noto+Sans+TC)
:::
display:inline-block;在排版上可能會有4px的距離產生
這個時候只要在父元素裡面，把字的大小改成0
[偽元素偽類](https://stringpiggy.hpd.io/pseudo-element-pseudo-class-difference/)
[屬性選擇器](https://pjchender.github.io/2018/07/17/css-%E5%B1%AC%E6%80%A7%E9%81%B8%E6%93%87%E5%99%A8-%EF%BC%88css-attribute-selector%EF%BC%89/)
```htmlmixed=
<style>
/* 偽元素 */
input::placeholder{
padding-left: 1rem;
}
/* 屬性選擇器 */
input[type='search']:focus{
filter: drop-shadow(0px 0px 10px rgba(12,121,0));
}
</style>
```
[Font Awesome](https://fontawesome.com/) (用在css的免費icon圖庫)
Download>下載FreeforWeb>解壓縮>留下css及webfonts資料夾，其他砍掉>css資料夾裡留下all.min.css，其他砍掉>將css及webfonts資料夾放到自己的專案內
[css瀏覽器樣式前綴](https://www.itread01.com/content/1546429612.html)
把背景的樣式弄到文字上(支援chrome/safari)
`-webkit-background-clip: text;`
[可以用這個屬性嗎?](https://caniuse.com/)
查詢各大瀏覽器支援的屬性
```htmlmixed=
<style>
/* 選擇器 hover 到 a 的時候， i 要做變化 */
#navbar .menu a:hover i{
font-size: 1.3rem;
background: linear-gradient(73deg,rgb(101, 74, 255),rgb(255, 237, 74));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
```
[選擇器參考手冊](https://www.w3school.com.cn/cssref/css_selectors.asp)
滑鼠指標變成點選的樣式
`cursor: pointer`
## 進階選擇器
對文件做一個reset的動作
```htmlmixed=
*{
margin: 0;
padding: 0;
list-style: none;
}
```
### 屬性選擇器
```htmlmixed=
/* 單屬性 */
a[title="google"] {
color: green;
}
a[title="yahoo"] {
color: red;
}
/* 多屬性 */
a[href="http://www.google.com"][title="google"] {
color: goldenrod;
}
/* 屬性中，包含 '/100/100/' 字串的元素，用 *= 找 */
img[src*="/100/100/"] {
border: 5px solid green;
}
/* 屬性中，開頭是 'https://picsum.photos' 字串的元素，用 ^= 找 */
img[src^="https://picsum.photos"] {
outline: 5px solid yellow;
}
/* 屬性中，結尾是 'random=3' 字串的元素，用 $= 找 */
img[src$="random=3"] {
width: 150px;
}
/* 屬性中，前後有空白的 'two' 字串的元素，用 ~= 找 */
img[class~="two"] {
margin-right: 0.5rem;
}
```
### 兄弟選擇器
```htmlmixed=
/* 屬性中，選擇 h2 同一層的第一個 p，用 + 找 */
.case1 h2+p {
color: red;
}
/* 屬性中，選擇 h2 同一層的全部的 p，用 ~ 找 */
.case2 h2~p {
color: blue;
}
```
### 虛擬類別(偽類) 選擇器:(單冒號)
```htmlmixed=
/* 虛擬類別(偽類) */
input[type="text"]:focus {
width: 350px;
}
h1:focus {
color: blue;
}
input[type="text"]:enabled {
color: white;
background: black;
}
input[type="password"]:disabled {
background: red;
}
input[type="password"]::placeholder {
color: white;
text-align: right;
padding-right: 0.5rem;
}
/* :checked */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
filter: drop-shadow(0 0 3px rgb(212, 0, 255));
}
```
#### nth-child
**child 適合用在單一類型的元素項目**
* :first-child第一個兒子
* :last-child最後一個兒子
* :nth-child(n)第幾個兒子
* :nth-child(odd)奇數
* :nth-child(even)偶數
* :nth-child(XN+n)第n個兒子開始，重複XN再做一次選擇，例如:2N+3 指從第3個開始選擇，接著每第2個選擇一次
* :nth-last-child(n) 可以從最後面開始選擇第n個
```htmlmixed=
/* first-child第一個子元素 */
#child :first-child {
color: red;
}
/* last-child最後一個子元素 */
#child :last-child {
color: red;
}
/* nth-child 第幾個子元素 */
#nth-child :nth-child(1) {
color: blue;
}
/* nth-last-child 倒數第幾個子元素 */
#nth-child :nth-last-child(1) {
color: blue;
}
/* odd 奇數 */
#nth-child-2 :nth-child(odd) {
color: green;
}
/* even 偶數 */
#nth-child-2 :nth-child(even) {
color: purple;
}
/* nth-child(Xn+n) */
#nth-child-3 :nth-child(3n+3) {
color: red;
}
```
#### type
**混和許多元素項目時，使用type**
* :first-of-type選擇同類型中的第一個元素
* :last-of-type選擇同類型中的最後一個元素
```htmlmixed=
#type div:first-of-type {
color: red;
}
#type p:first-of-type {
color: green;
}
#type div:last-of-type {
color: red;
}
#type p:last-of-type {
color: green;
}
```
#### nth-of-type
* :nth-of-type(n)選擇同類型中的第n個元素
* :nth-last-of-type(n)可以從最後面開始選擇類型的第n個
* :nth-of-type(odd)奇數
* :nth-of-type(even)偶數
```htmlmixed=
#nth-of-type div:nth-of-type(1) {
color: red;
}
#nth-of-type p:nth-of-type(1) {
color: green;
}
#nth-of-type div:nth-last-of-type(1) {
color: red;
}
#nth-of-type p:nth-last-of-type(1) {
color: green;
}
#nth-of-type-2 div:nth-of-type(odd) {
color: red;
}
#nth-of-type-2 p:nth-of-type(even) {
color: green;
}
```
#### not
* :not()否定掉括號中的條件，其他都要。
```htmlmixed=
.menu2 li:not(.no) {
color: blue;
}
```
### 虛擬元素(偽元素)::雙冒號
偽元素家族有::first-letter、::first-line、::selection、::placeholder，另外，還有兩個最重要的::before、::after
#### ::first-letter、::first-line、::selection
* ::first-letter 第一個字
* ::first-line 第一行
* ::selection 反白的時候
```htmlmixed=
#pseudo-element::first-letter {
font-size: 5rem;
float: left;
padding: 0 1rem;
}
#pseudo-element::first-line {
color: blue;
}
#pseudo-element::selection {
color: yellow;
background-color: green;
}
```
:::info
height屬性如果用%去設定，在沒有指定外層的高度時，通常只會有內容的高度。
<br>
* 繼承瀏覽器的高度
```htmlmixed=
<style>
html,body
{
height:100%
}
</style>
```
:::
### Before After
::before、::after的display預設是inline，如果需要box屬性，就要指定`Display:block`;
:::info
有指定Position:absolute的時候，該元素會自動是display: block;
:::
**::before、::after 啟動條件與功用特性**
1. 必須、一定要有 content:'';(至少一定要有空內容)。
2. 剛誕生的::before、::after為 inline 特性。
3. 主要輔助本體，產生更多層次的樣式效果。
4. 無法使用在置換元素(replaced element)，例如img、input
:::info
填滿box的兩種設定方式
```htmlmixed=
width: 100%;
height: 100%;
```
```htmlmixed=
top: 0;
right: 0;
bottom: 0;
left: 0;
```
:::
Google Drive
Gist
Clipboard
Sign in with Wallet
