Please enable JavaScript.
Coggle requires JavaScript to display documents.
前端 (CSS, Html, 設計概念, js) - Coggle Diagram
前端
CSS
Box Model
margin
margin collapsing
padding
border
content
各Element的margin、padding、border的預設值
清除預設
Normalize.css
Reset.css
Block元素
width / height
default is block
div、p、h1~h6、ul、ol、li、dl、dt、dd、form、table、hr、blockquote、address、menu
置中
水平
上下
在父層元素中置中
overflow
what is block element
可設定width、height、padding、margin
默認情况下，其寬度自動填满其父元素寬度，即寬度100%
區塊(block)元素都會另起一行
inline / inline-block元素
default is inline
span、em、i、b、strong、a、img、input、br、select、textarea、q、bdo、sub、sup
default is inline-block
置中
水平
垂直
文字與圖片
what is inline element
相鄰的行內元素會排列在同一行，直到排不下，才會換行，寬度隨元素的內容而變化
設定寬高(width/height)無效，只能由內容撐起來
設定上下的padding、margin無效，左右的padding、margin有效
inline元素之間有空白間隔
父容器:font-size:0px
position
static(default)
relative
fixed(block)
absolute(block)
sticky
Box Sizing
content-box
border-box
initial
inherit
Selectors
基本選擇器
ID選擇器
井字idname
通用選擇器
*
class選擇器
.classname
屬性選擇器
[attr=value]
標籤類型選擇器
elementname
狀態選擇器
a:active, avisited
複合選擇器
後代選擇器
直屬後代選擇器
A > B
後代選擇器
A B
同層選擇器
相鄰同層選擇器
A + B
通用同層選擇器
A ~ B
選擇器優先度
CSS套用方法
行內套用 > 內部載入(header) > 外部載入
選擇器類型
!Important > 行內元素 > id選擇器 > 類選擇器 > 標籤 > 萬用選擇器> 繼承 > 瀏覽器預設屬性
CSS撰寫順序
後面的敘述 > 前面的敘述
float
left
right
none
其他
::before / ::after
HTML 自訂義屬性 (data-*)
CSS取得自訂一屬性的值，attr(data-*)
使用情境
目前看到的範例，都是取得後加到::before的content當中。
opacity(0.0~1.0)
旋轉、縮放、傾斜或移動效果transform
旋轉:rotate(數字deg)
水平位移，translateY(百分比)
垂直位移，translateX(百分比)
滑鼠事件
滑過(hover)
點擊(:active)
動畫(
transition
延遲變形時間:transition-delay
目標，被修改的物件上
變形時間，transition-duration
animation
preprocessor
Sass
icon
background
Html
preprocessor
pug
各標籤語意
各標籤Style預設
data attribute
設計概念
三主色
js