###### tags: `tutorials`
# CSS notes

**1. em v.s. rem**
**em** is relative to the font-size of its direct or nearest parent
**rem** is relative to the html (root) font-size

---

**2. 偽元素(pseudo element):**
https://www.astralweb.com.tw/the-things-about-css-pseudo-element/
1. 必須設定 content，否則沒有作用
2. 會繼承原本元素的屬性
3. 以 display: inline-block 的屬性存在
4. 默認 user-select: none，代表 ::before 和 ::after 的内容無法被使用者選中
5. 利用 ::after 清除 float

.clearfix:after {
         content: "";
         display: block;
         clear: both;
}

6. 實現換行，代替換行標籤

inline-element::after {
         content:"\A";
         white-space: pre;
}

7. 增強用戶體驗，增大點擊熱區

.btn::before {
         content:"";
         position:absolute;
         top:-10px;
         right:-10px;
         bottom:-10px;
         left:-10px;
}

8. **重點code**

<div class="naruto"></div>
.naruto{
	background-image: url("/images/naruto.png")
	position: relative;  /*相對位置*/
	...
}
.naruto:before,.naruto:after{ /*選取.naruto的前方偽元素及後方偽元素*/
	content: ""; /*產生一個空的元素*/
	position: absolute; /*利用absolute定位*/
	left: 150px;  /*調整位置*/
	background-image: (...)  /*插入圖片*/
	...
}

---

**3. support different browser**
transform : rotate(20deg) /// W3C
-webkit-transform : rotate(20deg) /// Safari & Chrome
-moz-transform : rotate(20deg) /// FireFox
-ms-transform : rotate(20deg) /// IE
-o-transform : rotate(20deg) ///Opera