Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS - Coggle Diagram
CSS
flex -用在父層display:flex
預設不換行
走向--
flex-direction:row橫向row-reverse
column直向column-reverse直向反向
資料流的對齊-主軸對齊方式
justify-content:flex-start靠前面（例如左前）
justify-content:center對齊主軸中間
justify-content:flex-end靠尾端對齊
資料流的間距-主軸空間分配
justify-content:
space-around空間分給每個左右
space-between空間分給子項目之間
交叉軸（次軸）的對齊align-items
--項目裡的單行--
針對每一個項目作設定單行
flex-start靠齊上方
center
flex-end
space-around空間分給每個左右
space-between
（align-items:stretch每個項目等高）
flex-wrap:wrap
換行
align-content-
多行
次軸（子項目）的對齊
控制交叉軸裡面彈性列的對齊與分布
目標對象：彈性列空間
軸：交叉軸
作用：對齊與分布
子項目
order:1
文字
文字大小 font-size
文字顏色 color
文字行高 line-height
文字粗細 font-weight
文字間距 letter-spacing
文字對齊方式 text-align
文字大小寫 text-transform:uppercase
區塊
寬度 width
box-sizing指定寬度的屬性值
box-sizing:border-box指寬度為border左到右的距離
box-sizing:content-box指寬度為內容多寬
等高
讓row裡面的div區塊等高
容器不能有清除浮動的ＣＳＳ
因為在safari
會造成第一個字級排列第二個往下排
框線 border-radius
內距 padding
高度 height
外距 margin
背景
背景顏色 background-color
背景圖片 background-image: url(
固定方式 background-attachment
動畫
延遲 transition
ul li
list-style-type:none
overflow
定位 position:absolute/relative
鼠標顯示 cursor
object-fit:cover
點擊之後滑至頁面css
html
scroll-behavior: smooth;
滑到最上方的方式
上方設定<a id="top">
物件設定<a class="btn-back" href="#top">
屬性選擇器
ex選擇[target]寫css
次序選擇
選取器