# CSS Note
## weight:100%

- 若沒有給預設值，會自動填滿整個瀏覽器的頁面寬

## height:100%

- **沒有預設值**，沒寫就是null
- height的百分比值需要父元素有一個有效的高度值才能起作用
-ex.

  height: 100%; margin: 0; padding: 0;
  }

## box-sizing：border-box

- 讓你不用手動加減就可以涵蓋padding+margin在原本容器尺寸

## background-image
- 插入背景圖片

## linear-gradient漸層

- `background: linear-gradient(方向/角度, 顏色1 位置(％數), 顏色2 位置(％數)....);)`
- 要是方向沒寫的話，預設為**由上往下**，若填寫角度則**由左下角為圓心順時針旋轉**
- ex.

linear-gradient(blue, yellow 30%, blue 90%)


## position 定位

- absolute(絕對定位)
- 使用`absolute`屬性定位的元素是以在他所處==上層容器==的相對位置，若沒有上層容器，則以`body`(螢幕左上角)位置作為相對位置
- 上層元素要設定屬性`position:relative`
- 當畫面在捲動時，有該屬性的元素還是會隨著頁面捲動。
- fixed(固定定位)
- 相對於 ==瀏覽器視窗== 來定位，即便頁面捲動，它還是會固定在相同的位置。
-

- relative(相對定位)
- 會使其元素「相對地」調整其原本該出現的所在位置，做出調整。
- 例子，假設設定兩個帶有顏色的容器。
- 若增加`relative`屬性後且增加距離原本元素`top:100px`後。

- sticky （跟relative 很像）
- 只要內層元素設定屬性`sticky`就好，在設定top/left/right/ bottom，就可以表達距離外層元素多少距離，而且長度超過螢幕尺寸（有捲軸的產生)，不論我們怎麼轉他都是黏在那邊
- 預設滿版，width: 100％

## font-weight(文字體粗細)

[Demo 傳送門](https://codepen.io/chrislinlin/pen/KKMGJZd)

## line-height

- text 裡的行高

## transition 動畫

- opacity .5s .5s //延長多久 delay多久

### 常見屬性
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- 可以跟transform一起搭配
### 例子
假設html 有一個容器，我們在css設定他碰到時容器會以2秒時間增長程式碼如下。

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
div:hover {
  width: 300px;
}

## transform
- 2D/3d transform
- 常見屬性：
- translate以原本容器所在處，往X或Y軸移動，
- scaleX/scaleY()
- rotate(角度) 讓容器原地旋轉多少角度，若角度值為負數，則逆時間旋轉，要是角度為負責代表逆時鐘旋轉。

transform:translate

## z-index層

- 只有在設定position 的元素上會有效
- 設定值越高越前面，值可以為負數
- 檢查
1. 被覆蓋的層(想要置頂的層）的position是否也為relative或者absolute
2. 如果1成立，則判斷是否此層的z-index比誤覆蓋的層的z-index數值大
3. 如果2成立，判斷是否此層的父級元素比誤覆蓋的層的z-index數值大
4. 如果3成立，判斷是否此層的父級元素比誤覆蓋的層的父級層的z-index數值大

## overflow

- 元素要是超出某一範圍時該怎麼辦
- 常見的值
- overflow:auto; //預設會自動使用捲軸
- overflow:visible;　//顯示的文字或圖片會直接超出範圍，不使用捲軸。
- overflow:hidden;　//自動隱藏超出的文字或圖片。
- overflow:scroll;　//自動產生捲軸。
- overflow:inherit;　//繼承自父元素的可見性。

## css 選擇器- 子選擇器(選擇器之間使用`>`大於符號)
選擇父元素的子元素，但不包括子元素的子元素

 <div class="div1"><p>div1-P1</p><span><p>div1-P2</p></span></div>
 <div class="div2"><p>div2-P1</p><span><p>div2-P2</p></span></div>

.div1 > p {
	color: #F00;
}
.div2 p {
	color: #F00;
}


###### tags: `css`