<style> .markdown-body{ font-family: "微軟正黑體" ; } </style>
# 動畫互動網頁程式入門筆記
## [兩欄式版型]
### 不使用float把內容分成左右兩邊
1. 在父元素裡加入display=flex;(預設同一行左右排列)
~~~css=
父層{
display = flex;
}
~~~
2. 在本身使用display = inline-block;

父層 li {
    display = inline-block;
}

:::warning
注意對齊標的 （設定vertical-align）
:::

父層 li {
    display = inline-block;
    vertical-align = top;
}

>#### colorzilla:選取顏色的擴充套件
>https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

## [置中方式]
### 不使用margin: 0 auto;水平置中的方式
1. 用display = flex;

body {
    display = flex;
    justify-content = center; *水平置中*
    align-items = center; *垂直置中*
    }

:::warning
margin : 0 auto; 是放在物件本身
display : flex; 是放在父層物件
*父層如果是body/html，要注意畫面有無撐滿width:100%; hight:100%;
:::
:::info
justify-content 決定了內容元素與整個 Flexbox 的「水平對齊」位置
align-items 決定了內容元素與整個 Flexbox 的「垂直對齊」位置
:::

2. 使用絕對定位及translate(-50%, -50%)

父層 {
    position: relative;
    }
物件本身{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    

>#### flexbox參考文件
>https://www.oxxostudio.tw/articles/201501/css-flexbox.html

## [解決border-radius失效]
因為內部物件超出範圍，但沒有使用圓角。

    overflow = hidden;

## [子層hover效果]
### 游標滑到父層時，子層動作

父層：hover > 子層{
    動作內容;
}

## [排版]
1. float的父層使用overflow:hidden;撐開容器以包容float物件
2. positiob: static、relative 在排版系統內(移動後原本的位置依然保留)
position: absolutely、fixed 在排版系統外 (移動後原本位置被取代)

## [線性背景]

linear-gradient(direction, color-stop1, color-stop2, ...) *direction非必要
/* example */
background: linear-gradient(transparent 0%, black 100%);

## [讓padding不占空間]

box-sizing: border-box;

## [各種tr開頭]
:::info
1. transition "過度"：控制動畫的各種屬性(時間、曲線、延遲...等)
2. transform "變形"：可使用translate移動、scale放大縮小、rotate旋轉、skew傾斜
:::

## [width & max-width]
:::info
max-width會使得「你縮小瀏覽器時可以等比例縮小，但若你要放大瀏覽器時，圖片最多只能放大到原設定的大小」
:::

## [偽元素]
::before ::after 預設都是display: inline-block;無法設定寬度

class::before{
    content: "";
    display: block;
}