# **CSS架構md notes**
###### tags: `CSS`
## 文字
### font-family
- 規則
- font-family:字型名稱1、字型名稱2....通用字型名稱1、通用字型名稱2
- 字型名稱
- 通用字型名稱
- 無襯線字
- 有襯線字
- 黑體
- 瀏覽器依照字型名稱順序去找
- 襯線
- 有襯線
- 筆畫端點無裝飾性線條
- 無襯線
- 筆畫端點有裝飾性線條
- 注意事項
- 字型名稱出現空格要加雙引號
- 中文字型若有編碼問題
- 改用英文字型
- 中英合併使用
- 中英文對照表
- 微軟正黑
- Microsoft JhengHei
- 新細明體
- PMingLiu
- 標楷體
- DFKai-SB
- 思源黑體
- Noto Sans TC
### 網路字型(web Font)
- basic
- At-rules
- 以@開頭
- @charset
- @import
- @font-face
- @media
- @keyframes
- @page
- @support
- 法律Q
- 使用@font-face
- 通常有給使用權
- 沒給散布權
- 中文注意
- 法律問題
- 檔案過大問題
- 建議使用
- Noto fonts
- 思源體
### 尺寸(font-size)
- 規則
- 語法: font-size: 20px
- 可設定的值
- 關鍵字
- 絕對單位
- 相對單位
- 關鍵字
- small
- *xx-small
- x-small
- small
- smaller
- medium
- large
- large
- x-large
- xx-large
- larger
- 絕對單位
- css font-size可接受絕對單位
- px
- pt
- pc
- cm
- mm
- in
- 相對單位
- 注意相依姓(依據某個物件尺寸設定來對應的)
- %
- 百分比
- em
- 相對於父層英文字母最寬的那個字
- ex
- 字母的英文小寫x的那個高度
- rem
- root的字級
- vw
- viewport width
- 相對於視窗尺寸的寬
- vh
- viewport height
- 相對於視窗尺吋的高
- vmin
- viewport min size
- 相對於視窗尺寸的短邊
- vmax
- viewport max size
- 相對於視窗尺寸的長邊
- 注意
- chrome最小尺寸不得小於9px
- 若父層字級尺寸為0、子層不管設定多大尺寸都會是0
### 粗細(font-weight)
- basic
- 語法: font-weight: bold;
- 關鍵字
- normal
- bold
- lighter
- bolder
- inherit
- initial
- unset
### 樣式(font-style)
- 語法: font-style: italic;
- 關鍵字
- normal(無斜體)
- italic(仿斜體)
- oblique(斜角字)
- inherit
- initial
- unset
### 裝飾(text-decoration)
- 規則
- 語法: text-decoration: none;
- 關鍵字
- none
- overline(頂線)
- line-through(中線/刪除線)
- underline(底線)
- inherit(繼承)
- 組成
- 五個屬性
- text-decoration-thickness(線段尺寸)
- text-decoration-color(線段色彩)
- text-decoration-line(線段位置)
- text-underline-offset(線段偏移距離)
- 設定底線線段與文字之間的距離
- 主要針對underline
- 正數
- 分開
- 負數
- 合起來
- text-decoration-style(線段樣式)
- dotted(點線)
- dashed(需線)
- solid(單實線)
- double(雙實線)
- wavy(波浪線)
- 寫法
- 一行式寫法、safari不行
- text-decoration: 1px dotted red underline
- 多行式寫法
- text-decoration-thickness: 1px;
text-decoration-style: dotted;
text-decoration-color: red;
text-decoration-line: underline;
- 應用
- 超連結預設底線去除
- a{ text-decoration: none;}
- 碰到超連結出現底線
- a{ text-decoration: none;}
a:hover{text-decoration: underline;}
- 超連結底線改點線與色彩
- a{ text-decoration: dotted #ccc underline}
### 行高(line-height)
- basic
- 語法
- line-height: 1;
- 關鍵字
- px(像素)
- 會讓行空間設定為固定值
- 垂直置終於此行中間的位置
- %(百分比)
- 純數字(含小數點)
- em
- 單位
### 色彩 (color)
- 語法
- color: red;
- 設定值
- RGB
- color: rgb(255,0,0);
- RGBA
- color: rgba(255,0,0,0.5)
- 最後一個值是不透明度
- 可設定0~1
- 1是不透明
- HSL
- color: HSL(255,100%,50%)
- HSLA
- color: hsla(0,100%,50%,0.5)
- 最後一個值是不透明度
- 可設定0~1
- currentColor
- 目前文字色彩，就能讓css屬性套用此文字色彩
- .box{
color: red
border-width: 1px
border-style: solid;
border-color: currentColor;
}
### 首行縮排(text-indent)
- 語法
- text-indent: 1em;
- 寫法
- 縮排
- p{ font-size: 20px;
text-indent:2em;
padding:1em;}
- 凸排
- 利用padding來處理縮編目的，再將凸排距離用負em表示
- p{ font-size: 20px;
text-indent:-1em;
padding:1em , 1em ,1em,2em;}
### 對齊
- 水平(text-align)
- 語法
- text-align: left;
- 關鍵字
- left (對齊左側)
- center (置中)
- right
- justify(左右對齊，除最後一行)
- justify-all(左右對齊，包括最後一行)
- 若無效可用
- text-align-last : justify;
- start(語言的起始方向)
- end (語言的結束方向)
- inherit
- initial
### 字元間距 (letter-spacing)
- 語法
- letter-spacing: 1em;
- 字元間距控制，每個字母之間的距離
- word-spacing
- 單字間距控制，每個單字之間的距離控制
- white-space
- 連續空白字元的控制
### 方向(direction)
- 語法
- direction: ltr;
- 關鍵字
- ltr(由左至右)
- rtl(由右至左)
- inherit
- initial
- unset
### 空白字元(word-spacing)
- 語法
- word-spacing: 10px
- 關鍵字
- normal
- 數值單位
- 可為負
- inherit
### font 字體設定
- 語法
- font: small-caps italic bold 66px/70px arial;
- font; italic bold 20px/1.6 'Noto Sans TC' , sans-serif
- 可設定的值
- font-style
- font-variant
- font-size
- 要與line-height用一個"/"隔開
- font必要屬性
- 必須放在font-family的左側
- font: 20px 'Noto Sans Tc' , sans-serif
- line-height
- font-weight
- font-family
- font必要屬性
## 清單
### list-style
- 設定
- 語法
- list-style: circle outside url("gold-fish.png")
- 屬性
- list-style-type
- 清單符號樣式
- none
- 沒有符號
- cjk-ideographic
- 一、二、三
- decimal
- 1、2、3
- decimal-leading-zero
- 01、02、03
- lower-alpha
- a、b、c
- upper=alpha
- A、B、C
- lower-roman
- ⅰ，ⅱ，ⅲ
- upper-roman
- Ⅰ，Ⅱ，Ⅲ
- initial
- list-style-position
- 清單符號位置
- outside
- inside
- list-style-image
- 清單符號圖片
- list-style: type position image
## 邏輯
### 邏輯屬性(logical propertices)
- inline與block的維度概念
### CSS邏輯屬性分類與作用
- 語區塊尺寸相關屬性(properties for sizing)
- 邊框屬性(properties for borders)
- 外距與內距屬性(properties for margins)
- 定位屬性使用(Properties for floating and positioning)
### 使用情境
## 邊外框、內外距、容器尺寸
### 邊框線與外框線
- 結構
- border
- 佔據空間
- 可做圓角
- 屬性
- border-width
- 關鍵字
- px、pt、%、em、ex、vw、vh、vmin、vmax、auto
- available
- fit-content
- 當內容文字太少時，寬度會自動符合內容資料
- 當內容資料多到需要拆行時
- 不管內容文字多與少
- 寬度都會扣除margin、padding、border
- min-content
- 以最小字做為物件的寬度
- 中文
- 以一個字為寬度來換行
- 英文
- 多個英文字母做為一個英文的單字，將會以最長的那個單字做為寬度來換行
- max-content
- 以最大的內容寬度來呈現
- 他不會讓你換行! 內容有多長他就多長
- inline物件不支援width & height
- block、inline-block、flex、list-item、table、th、td
- 預設作用範圍 : content-box
- 若另外添加padding border margin
- 尺寸是往外擴充的
- 總width會是
- content +padding + border + margin
- 要改變作用範圍
- box-sizing : border-box;
- width設定的範圍則變成
- 設定邊框外緣(border)以內的寬
- min-width
- 至少要有這樣的寬度
- width 與 min width 衝突(min比較大)時會以min width為準
- min值會比max值更優先
- max-width
- 物件至多這樣的寬度存在
- 太寬時會被限制在這個max-width設定的寬度內，不會再寬
- border-style
- 關鍵字
- 無樣式
- none
- 實線
- solid
- 點線
- dotted
- 虛線
- dashed
- 雙線
- double
- 立體凹槽線，具明暗線條
- groove
- 立體凸起線，具明暗線條
- ridge
- 內凹線，具明暗線條
- inset
- 凸起線，具明暗線條
- outside
- border-color
- 簡寫
- border: width style color
- border: 1px solid red
- 運用
- 上邊框線
- border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
- 右邊框線
- border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
- 下邊框線
- border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
- 左邊框線
- border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
- 簡寫
- border-top :1px solid red ;
border-right :1px solid red ;
border-bottom :1px solid red ;
border-left :1px solid red ;
- outline
- 不會佔據空間
- 永遠是矩形
- 屬性
- outline-width
- outline-style
- outline-color
- 用哪個
- 屬性
- 單一屬性四值設定法
- 四值寫法
- 順時針
- border-width: 上邊框粗細 右邊框粗細 下邊框粗細 左邊框粗細;
border-style: 上邊框樣式 右邊框樣式 下邊框樣式 左邊框樣式;
border-color:上邊框色彩 右邊框色彩 下邊框色彩 左邊框色彩;
- 一到四值寫法
- border-width: 上 右 下 左 ;
- border-width: 上 [右左] 下;
- border-width: [上下] [右左];
- border-width: [上右下左];
- 關鍵字
### 寬與高(width & height)
- 為何無效
- 寬度auto
- width 預設
- auto
- 相似於available
- 會自動扣除 margin 、 padding 、 border 的寬度
- 滿版畫面很好用
- 100% != 100vw
- 寬100%範圍
- width: 100%
- 寬度會等於父層內容可運用的空間
- 也就是 父層padding 以內的空間
- 一個物件的寬度就是四個緣駔組成
- width 、padding 、 border 、margin
- 舉例: 父層有設定 width:600px padding:20px
- 子層設定就是
- 600-20-20=540
- 寬100vw的範圍
- width: 100vw
- 百分之百視窗寬度
- 視窗寬度不包含卷軸在內
- 若過寬
- 會出現橫向卷軸
- 算錯尺寸
- 關鍵字
### 外距語內距margin & padding)
- 一個值 vs 四個值
- margin用途
- 設定一個物件與周圍物件的距離
- 自身周圍要擴張多少地盤
- 用auto來做水平置中
- 將剩餘空間分配給具備這個值的位置
- margin: 0px 0px 0px auto;
- 列的剩餘空間被分配到了左側
- 所以物件靠右
- margin: 0px auto;
- 設定左右都是auto
- 列的剩餘空間會被平均分成兩等分
- 水平置中
- 使用%如何計算
- 依據父層內容空間(content-box)作為百分比
- margin-left: 10%;
- 等於父層width屬性值10%
- padding用途
- 設定物件邊框(border)內緣與資料之間的留白空間
- padding預設會增加物件的可見尺寸
- padding的空間會添加到width之外
- padding是添加在border
與width之間的空間
- padding會顯示背景色彩
- 使用%很特別
- 採用父層的content-box的 寬做為百分之百
- 很常搭配border
- ***父層與內容物(子層)的距離由父層padding決定!!!!***
- Margin-collapse(邊距重疊)
- .container{
width: 500px;
height: 500px;
background-color: lightblue;
}
.item{
width: 50px;
height: 50px;
margin: 100px;
background-color: tomato;
}
- Margin-collapse 需要滿足某些條件才會觸發
- Margin-collapse 水平方向無此情況。
- root 元素不會 Margin-collapse。
- 當兩個皆是 block in-flow 狀態且參與相同的 BFC 時。
- 兩個 block 沒有 padding、border 、line box、clearance 隔開時。
- 當符合以下幾種垂直 edge 重疊情況時：
- 父元素和第一個子元素的 margin-top
- 父元素和最後一個子元素的 margin-bottom，且父元素高度需要是 auto 狀態
- 兄弟元素的上下 margin
### 盒尺寸(box-sizing)
- 作用
- 控制width與height作用對象空間
- 設定物件尺寸的計算方式
- 可使用的值
- content-box
- 預設值
- border-box
- box-sizing: border-box
- 內容盒子與邊框盒子
- content-box就是預設
- border-box不用計算
## 背景
### 色彩(background-color)
- 語法
- background-color: red;
### 圖片(background-image)
- 語法
- background-image: url("");
- 關鍵字
- url()
- url寫法
- 離開資料夾
- ../
- 進入資料夾
- /
- 檢查
- 圖片路徑有無寫錯
- 圖片檔名有無寫錯
- 該圖片檔案是否有存在該路徑資料夾中
- 圖片路徑有無使用全形字
- 路徑是否多了空白
- 圖片是否有採用正確的RGB模式
- HTML檔案中的區塊是否有足夠空間可顯示你的背景圖片
- 要顯示的背景區塊是否正常顯示在畫面中
- 多重背景功能
- 寫法
- background-image: url(""),url(""),url("");
- 背景堆疊是按照順序，先寫在前
- repeat: 背景圖片社並不要重複，不然前一張圖片重複後，後面就被蓋住了
- positon: 背景圖片位置設定要錯開，否則前一張尺寸較大，後面就被蓋住了
- background-image: url(""),
url(""),
url("");
background-repeat: no-repeat;
background-position: left top ,right bottom , center center
- linear-gradient() 線性漸層
- 寫法
- background-image: linear-gradient(#F00 ,#FF0);
- background-image: linear-gradient(#F00 0%,#FF0 100%);
- background-image: linear-gradient(0deg,#F00 ,#FF0);
- background-image: linear-gradient(0deg,#F00 0%,#FF0 100%);
- background-image: linear-gradient(to right,#F00 ,#FF0);
- background-image: linear-gradient(to right bottom,#F00 ,#FF0);
- background-image: -webkit-gradient(linear,0% 50% 100% 50% ,color-stop(0, #f00) , color-stop(100%,#ff0));
- 精隨
- ***background-image: linear-gradient(起始色彩,結束色彩);***
- ***background-image: linear-gradient(to 目標方向,起始色彩,結束色彩);***
- 目標 就是 目的地
- to top (下方見層道上方)
- to right (左方漸層到右方
- to bottom(上方漸層到下方)
- to left top (右下漸層到左上角)
- to right top (左下漸層到右上角)
- to left bottom(右上漸層到左下角)
- to right bottom (左上漸層到右上角)
- ***background-image: linear-gradient(角度deg,起始色彩 起始色彩位置 , 結束色彩 結束色彩位置);***
- 透明色彩
- transparent
- 角度值
- 0deg
- 由下往上漸層
- 45deg
- 左下向右上
- 90deg
- 由左向右
- 135deg
- 左上往右下
- 180deg
- 由上向下
- 225deg
- 右上往左下
- 270deg
- 由右往左
- 315deg
- 右下往左上
- 360deg
- 由下往上漸層
- 規則
- 當沒有設定角度
- 會預設180度
- background-image: linear-gradient(#F00 ,#FF0);
- 當沒有設置色彩位置
- 預設0%與100%
- 當僅設置色彩位置時會曲前後色彩中間值做為該位置色彩
- background-image: linear-gradient( #f00 0% ,30% , #ff0 100%)
- 每個色彩點位置須按照由小到大的訓敘寫才有見層的效果
- radial-gradient() 放射/圓形漸層
- 寫法
- 規則
- ***background-image: radial-gradient(
半徑 形狀 at 圓形X軸位置 圓形Y軸位置 ,
色彩標點1,色彩標點2)***
- 舉例
- background-image: radial-gradient(#90DCEF, #106DEE)
- background-image: radial-gradient(#90DCEF 50%, #106DEE 100%)
- background-image: radial-gradient(circle ,#90DCEF 50%, #106DEE 100%)
- background-image: radial-gradient(100px circle ,#90DCEF 50%, #106DEE 100%)
- background-image: radial-gradient( circle at 50% 0% ,#90DCEF 50%, #106DEE 100%)
- conic-gradient() 錐形/角度漸層
- 規則
- ***background-image: conic-gradient(
起始角度 at 圓形X軸位置 圓形Y軸位置 ,
色彩標點1,色彩標點2,色彩標點3)***
- 舉例
- background-image: conic-gradient(#003FF, #FB8A0D);
- background-image: conic-gradient(from 90deg, #003FF, #FB8A0D)
- background-image: conic-gradient(from 0.5turn, #003FF, #FB8A0D)
- background-image: conic-gradient(from 0deg, #003FF 50%, #FB8A0D 70% , #00D3FF 100%)
- background-image: conic-gradient(from 0deg, #003FF , #FB8A0D 180deg , #00D3FF )
- background-image: conic-gradient(from 0deg, #003FF 0deg , #FB8A0D 180deg , #00D3FF 360deg )
- background-image: conic-gradient(from 0deg at 50% 30%, #003FF 10deg , 360deg , #00D3FF )
- background-image: conic-gradient(
red 10deg,
brown 10 deg 45deg,
magenta 45deg 90deg,
green 90deg 200deg,
blue 200deg 270deg,
orange 270deg);
- background-image: conic-gradient(
red 3%,
brown 3% 6%,
magenta 6% 25%,
green 25% 55%,
blue 55% 75%,
orange 75%);
- repeating-linear-gradient() 重複線型漸層
- repeating-radial-gradient() 重複放射/圓型漸層
- repeat-conic-gradiant() 重複錐形/角度漸層
- initial
- inherit
### 位置(background-position)
- 預設
- 左上角
- 先x後y
- 關鍵字
- 左上(Left Top)
- 中上(Center Top)
- 右上(Right Top)
- 左中(Left Center)
- 正中(Center Center)
- 右中(Right Center)
- 左下(Left Bottom)
- 中下(Center Bottom)
- 右下(Right Bottom)
- background-position: top bottom;
- 一個軸向僅使用一個值
- 非必要設定兩個軸向
- 水平居中、垂直居中
- background-position: center;
- 水平靠左、垂直居中
- background-position: left
- 水平居中，垂直靠上
- background-position: top;
- 水平居中、垂直靠下
- background-position: bottom;
- 混用數值
- 上方貼頂，圖片左方離邊緣50px
- background-position: 50px top ;
- 距離右側邊緣100px , 距離下方30px
- background-position : right 100px bottom 30px
- 用百分比
- 以背景圖片的寬度百分比位置來對齊空間的寬度百分比位置
- 先算出box本身左方起算20%位置的那個點
- 對齊整個空間左方起算20%位置
- 公式
- (容器寬度 - 背景圖片寬度) * CSS背景位置百分比 = 偏移量 px
- 偏移量px / (容器寬度- 背景圖片寬度) * 100 = css背景位置的百分比
### 背景重複(background-repeat)
- 會與 background-image一起搭配使用
- 在背景圖片小於容器尺寸時，利用拼接方式讓圖片鋪滿整個空間
- 語法
- background-repeat: repeat
- background-repeat: x軸, y軸
- background-repeat: repeat no-repeat
- 關鍵字
- repeat
- no-repeat
- repeat-x
- 水平重複
- repeat-y
- 垂直重複
- space
- 盡可能在不裁切、不變形、不縮放圖片的情況下。在最大量化的重複背景圖，若剩餘圖片無法拼接，會字東均分空白空間在圖片之間
- round
- 使用縮放或圖片的方式，使背景圖片在不裁切的情況下填滿空間
- initial
- inherit
- 應用
- x軸不重複，y軸重複且不要裁切
- background-repeat: no-repeat round
### 尺寸(background-size)
- 語法
- background-size:100% 100%
- background-size: 寬度 高度
- 關鍵字
- auto
- px
- 絕對單位
- 圖片與容器寬高比例不同，不會等比例
- 圖片尺寸設定超過100%或超過容器尺寸時，則會出現裁切
- 不會隨容器變化尺寸
- pt
- 絕對單位
- 圖片與容器寬高比例不同，不會等比例
- 圖片尺寸設定超過100%或超過容器尺寸時，則會出現裁切
- 不會隨容器變化尺寸
- em
- 相對單位
- 圖片與容器寬高比例不同，不會等比例
- 圖片尺寸設定超過100%或超過容器尺寸時，則會出現裁切
- 不會隨容器變化尺寸
- ex
- 相對單位
- 圖片與容器寬高比例不同，不會等比例
- 圖片尺寸設定超過100%或超過容器尺寸時，則會出現裁切
- 不會隨容器變化尺寸
- %
- 相對單位
- 圖片與容器寬高比例不同，不會等比例
- 圖片尺寸設定超過100%或超過容器尺寸時，則會出現裁切
- 會隨容器變換尺寸
- cover
- 等比例
- 圖片會裁切
- 會隨容器變換尺寸
- contain
- 等比例
- 圖片不會裁切
- 會隨容器變換尺寸
- initial
- inherit
- background-orgin
- content-box
- CSS屬性width 與 height 所指定出來的範圍
- 沒有指定w與h的話就是padding內的空間(不含padding)
- padding-box
- CSS屬性border內(不含border範圍)所指定出來的空間範圍
- border-box
- css屬性border內含border範圍
### 背景固定方式(background-attachment)
- 語法background-attachment : scroll ;
- 關鍵字
- scroll (捲動)
- fixed (固定)
- local(區域)
### background-簡寫
- 關鍵字順序
- background-color
- background-image
- background-attachment
- background-repeat
- background-position
- background-size
- 必須與background-position同時撰寫
- 寫法
- background: color image attachment repeat position/size
- 舉例
- background: gray url("amos.png") scroll no-repeat 50% 50%/50% 50%
- background: gray url("amos.png") scroll no-repeat center center/50% 50%
- 不寫positon的狀況
- background: gray url("amos.png") scroll no-repeat /50% 50%
## Display、Flex
### display屬性
- 常見的值
- none、inline、block、inline-block、table、table-caption、table-row、table-cell、inline-flex、grid、inline-grid
- block
- 佔掉一整列的空間
- h1、p、li(其實是list-item，但只是比block多了點點)、article
- 多數情況
- 會用block去包inline
- 如果是block
- 就可以設定margin-auto 來水平置中
- inline
- 以內容物決定寬度
- 高度是不起作用的
- span(區段而非區塊)、p、image、超連結、div
- inline可以包inline
- 同時想要粗體及斜體
```htmlembedded=
- <strong><em> lorem </em></srrong>
```
```htmlembedded=
<span class="price">
<span class="icon">$</span>
9
<span class="">.99</span>
</span>
```
- 解決inline物件是對齊基線(而非底線)的解決方式
- img{display: block;}
- 因為block沒有inline的vertical-align特性
- 因為inline會有vertical-align特性
- 基線與抵線還有一底點距離
- 如果沒有解決這個問題
- 圖片跟底線中間會有空白
- 當list被設為inline特性時
- list會被內容寬度影響
- 我們通常會縮排跟換行就會出現空格
- 所以li與li中間就會出現空格
- 解決問題
- 先在ul {font-size: 0px}
- 然後在li{font-size:22px}
- 因為在li會繼承ul 所以要在li調回來
- display:block;
- 因為block沒有空白字緣的問題
- margin:auto 會失效
- 不會置中
- 因為沒有剩餘空間
- 如果要加padding
- 要display: inline-b;ock
- 比較
- **inline**
- width&hight: X
- padding 上下:X
- padding左右: O
- margin上下: X
- margin左右: O
- 預設排列方向: 橫
- Vertical-align 支援: O
- 空白字元的問題: O
- **block**
- width&hight: O
- padding 上下:O
- padding左右: O
- margin上下: O
- margin左右: O
- 預設排列方向:直
- Vertical-align 支援: X
- 空白字元的問題: X
- **inline-block**
- width&hight: O
- padding 上下:O
- padding左右: O
- margin上下: O
- margin左右: O
- 預設排列方向:橫
- Vertical-align 支援: O
- 空白字元的問題: O
- **flex**
- width&hight: O
- padding 上下:O
- padding左右: O
- margin上下: O
- margin左右: O
- 預設排列方向:直
- Vertical-align 支援: x
- 空白字元的問題: x
- 做了什麼
- 改變物件的特性
- inline物件無法設定寬度
- display : inline-block;
- 可讓寬度設定產生效果
- 為何要改變特性
- div 這個標籤預設屬性是block
- 不加諸其他設定之前，預設是無法與其他物件橫排在一起的
### 彈性排版(flex)
- display: 元素變成flex
- 設定在flex元素身上的屬性
- display
- 轉變物件特性為flex物件特性
- flex-direction
- 設定flex的主軸方向
- flex-wrap
- 控制flex子元素的換列/換欄
- justify-content
- flex子物件在主軸的對齊與分佈方式
- align-content
- flex的彈性列/彈性欄於交叉軸方向的對齊與分佈
- align-items
- flex子元素於彈性列/欄空間中，交叉軸的對齊控制
- gap
- (row-gap、column-gap二者合一的簡寫)
- place-content
- (align-content與justify-content二者合一簡寫)
- flex-flow
- flex-direction 與 flex-wrap 二者合一的簡寫
- 設定在flex子元素的屬性
- align-self
- 控制單一flex子元素在彈性列/彈性欄中交叉軸的位置
- flex-grow
- flex子物件在主軸上的伸展值
- 主軸長度是 row : x軸
- width值
- 主軸長度是column : y軸
- height值
- 預設值
- 預設值: flex-grow: 0;
- 僅接受正數數值
- 作法
- 有三個item
- 若要對 item1分紅
- item1 {flex-grow: 1;}
- flex-shrink
- flex子物件在主軸上的伸縮值
- 預設值
- 預設值: flex-shrink: 1;
- 如果不寫，也可以看到子物件受影響
- 若不想要收縮效果，特別設定成0就行
- 僅接受正數數值
- flex-basis
- flex子物件在主軸上的基本長度
- 沒有經過 grow shrink min-width max-width 調整過的長度
- 主軸是row ，長度就是width
- 主軸是column, 長度就是height
- 值
- auto
- 若
- 父層布設定換列
- flex子物件不設定寬
- flex子物件不設定收縮
- fit-content
- 內容文字太少會自動符合內容資料寬度
- 內容文字過多需要折行時，寬度會
- 父層空間-自身margin、padding、border
- min-content
- 以最小字做為物件寬度
- max-content
- 少少幾個字
- 會以那幾個字為寬度
- 很多字
- 永遠不讓你拆行
- order
- flex子物件在主軸上的排序
- 預設是都是0
- 若對物件1就會往最後一個移動
- 若對物件-1就會往第一個移動
- 用法
- 若第一列圖與文 左邊及右邊
第二列 圖與文 右邊及左邊
- .item:nth.child img{ order:1}
- 讓偶數欄位圖片往最後一個移動
- html 架構要符合語意
- 架構:
```htmlembedded=
<div.pic>
img
</div>
<div.txt>
h1
p(分類)
p(段落)
</div>
```
- 若想要的排版是
- 架構:
```htmlembedded=
<div.pic>
img
</div>
<div.txt>
p(分類)
h1
p(段落)
</div>
```
- 對p分類做 order: -1 ;
- 讓他在div.txt這個區塊置頂
- 特性
- 採用數值大小來決定flex子物件在主軸上的排列順序
- 數值由小到大的規則，主軸方向的起始端列到主軸的末端
- 預設為0
- 可接受負值
- flex
- flex-grow、flex-shrink、flex-basis 三者合一的簡寫
- 快速縮寫的屬性
- place-content
- (align-content與justify-content二者合一簡寫)
- flex-flow
- flex-direction 與 flex-wrap 二者合一的簡寫
- flex
- flex-grow、flex-shrink、flex-basis 三者合一的簡寫
- display :flex 後產生的特性變化
- 元素將轉換成類似block屬性的排版特性
- 自身寬度將自動變成父層容器的寬度
- 父層content-box
- span原本是inline物件
- 寬度是由內容決定
- display:flex
- 他的寬度就會變成一整行
- 不管元素第一層子物件的排版(display)屬性是什麼，將會自動轉換成block的排版特性
- 且block還帶有flex的特有的特性
- 等高、彈性收縮
- 元素的第一層子物件
- 預設成為橫向(row)排列
- 預設不換列(nowrap)
- 將以內容做為預設寬度
- 總寬度超過父層flex物件寬度時，預設將會自動縮減
- 並符合flex元素的寬度
- 預設高度將自動符合flex元素的高度
- flex元素所產生的特性變化，僅針對
- 自己(被設定對象
- 以及下一層元素
- 下下層則不受影響
- flex軸
- 兩軸及軸向
- 書寫方向: ltr 為前提
- row(橫向)
- 由左至右
- row-reverse(橫向反向
- 由右至左
- column (直向)
- 由上至下
- column-reverse (直向反向)
- 由下至上
- flex-direction控制主軸方向
- 值
- row(橫列)
- row-reverse(橫列反向)
- column(直欄)
- column-reverse(直欄反向)
- 依據書寫的方向
- dtl:"rtl"
- row這個屬性就會
- 由右至左
- justify-content主軸對齊分布
- 先設定 display: flex
- 先設定主軸方向-->flex-direction
- 再考慮主軸方向的空間分佈: justify-content
- 對齊功能
- flex-start(對齊軸的起點)
- 搭配flex-direction:reverse 的情況下
- 由於reverse會改變起始點，所以如果row是由左至右，reverse就是由右至左，
- 所以flex-start就是從右邊開始
- center(對齊軸的中間)
- flex-end(對齊軸的終點)
- 分佈功能
- space-between (均分軸的剩餘空間至flex 子物件與子物件之間)
- 不管第一個及最後一個到底的margin，把他設為0又把他分出去
- space-around (均分軸剩餘空間至每個子物件的軸的兩側
- 每個子物件的主軸兩側(margin)
- 每份margin均等
- space-evenly(均分軸的剩餘空間至每個子物件之間與軸兩端邊緣)
- 就連第一個及最後一個到邊緣距離都跟物件及物件之間的距離都相同
- 換列或換行時無法對齊上一個
- flex-wrap換列/換欄
- 先設定 display: flex
- 先設定主軸方向-->flex-direction
- flex-wrap: 值;
- 控制交叉軸的方向而不是換列
- 交叉軸就是與flex-direction 垂直的方向
- 換列或換行時會對齊上一個
- 當flex-direction: row;
- row: 由左至右
- wrap: 由上至下
- wrap-reverse 由下至上
- row-reverse: 由右至左
- wrap: 由上至下
- wrap-reverse 由下至上
- 彈性列/欄
- align-content
- 可設定的值
- stretch
- 前提
- flex主軸為row
- flex子物件不設定高度
- flex-start
- center
- flex-end
- space-around
- 將交叉軸剩餘空間分配到"每個彈性列交叉軸兩側"，結果就會變成"彈性列之間的距離，會是最外側空間的兩倍
- space-between
- 將交叉軸剩餘空間分配到"每個彈性列"之間，所以第一列外側和最後一列外側不會分配到剩餘空間
- 若只有兩個彈性列
- 第一列會置頂
- 最後一列會靠最下面
- space-evenly
- 將交叉軸剩餘空間均分到彈性列之間及交叉軸彈性列最外側兩端
- 每個空間的距離全部相等
- start
- end
- **沒有換行
就沒有彈性列
!!!!!!!!**
- 所以沒有wrap，align-content彈性列的高度就是
- 父層的高度
- 所以如果align-content:center;
- 他還是會靠上!!
- 控制彈性列而非子物件
- 彈性列的高度為最高的子物件
- 是在父層角度下去控制子物件
- 垂直置中
- flex-wrap: wrap;
- align-content: center;
- flex子物件於交叉軸對齊
- align-item
- 元素
- 控制對象
- 子物件
- 軸向
- 交叉軸
- 用gap控制間距
- 原理
- 在物件的盒模型之間添加距離
- gap空間不會與margin重疊再一起
- 搭配justifty-content一起使用
- justify-content 除了控制剩餘空間還有對齊可以設定
- justify-content: center ;
gap: 20px;
- 水平置中還有gap可以設定
- 快速縮寫flex流向
- flex-flow: row wrap;
- 快速縮寫flex空間控制
- place-content: flex-start center;
- 排序flex子物件
- 用align-self跳脫align-item掌控
- flex彈性排版精隨
- 伸展
- 收縮
- 基本長
### 網格排版(Grid)
- grid相關的css屬性及作用簡述
- 設定在grid元素身上的屬性(套用 display:grid的元素)
- display (設定物件為grid物件)
- grid-template-rows(在橫式排列狀態，建立往格橫列數量及高度)
- grid-template-columns(在橫式排列狀態，建立網格直欄數量及寬度)
- grid-template (grid-template-rows 與grid-template-columns簡寫)
- grid-gap(在橫式排列狀態下，建立欄與列的間矽)
- gap (取代grid-gap)
- row-gap (橫式排列，建立橫列間矽)
- column-gap (橫式排列，建立直欄的間矽)
- 建立格線
- 概念
- 資料排入網路的各種狀況
- 網路資料排序
- 網路資料的對齊與分布
- 使用網路線編號與跨區方式排版
- 網路重疊排版
- 使用網路區域方式排版
## 定位
### 定位position
### 上右下左距離設定(top、right、bottom、left)
### 前後層級控制(z-index)
## 其他
### 變形(transform)
- 2D軸像概念
- 函式撰寫順序與結果差異
- 變形不影響原始佔據空間
### 濾鏡效果(fliter)
### 不透明度(opacity)
- 不透明度與html層級關係
- 不透明度vs不透明度
- opacity會造成z-index的提升
### 益位(overflow)
- 顯示與隱藏(visible & hidden)
- scroll & auto 使用卷軸顯示超出資料
- 橫向與直向益出控制
- overflow應用
### 陰影
- 陰影偏移、模糊、色彩
- 擴展值
- 內部陰影值
- 多重陰影
### 圓角(border-radius)
- 圓角可以設定的值
- 圓攪半徑誤超過直徑
- 百分比與其他單位大不同
- 絕對單位圓角以短邊直徑為計算依據
### 動畫
- 漸層/過度動畫(transition)
- 動畫屬性、撥放時間、延遲時間
- 動畫速度曲線
- 關鍵影格動畫(animation)
- 執行關鍵影格動畫屬性
### 處理圖片符合容器
- 再無法確認圖片的是橫圖和長圖時
- object-fit: cover
- 一樣等寬長
- 超出的部分會裁切掉
- object-position
- center center
- 只秀中間
- 可以確認圖片的樣式(長寬比)
- 可以確認圖片是橫圖
- width: 100%
- overflow: hidden;
- 可以確認圖片是長圖
- height:100%
- overflow:hidden;
## 選取器
Sign in with Wallet
Connect another wallet