<<Flexbox靈活盒子>>

參考網站

http://www.oxxostudio.tw/articles/201501/css-flexbox.html

http://www.w3.org/TR/css3-flexbox/#flex-grow-factor

http://flexboxin5.com/

布局規畫

水平尺寸與垂直尺寸 ( main size、cross size )

水平軸與垂直軸 ( main axis、cross axis )

水平的起點與終點 ( main start、main end )

垂直的起點與終點 ( cross start、cross end )

佈局設定

display: 佈局

flex

inline-flex(在後方的元素不會換行)

order:數字，排列順序

flex-direction: 排列方向

row Default 由左到右，從上到下

row-reverse 由右到左，從上到下

column 從上到下，再由左到右

column-reverse 從下到上，再由左到右

flex-wrap: 內容的元素換行

nowrap Default 單行

wrap 多行

wrap-reverse 多行，但內容元素順序反轉

flex-flow: flex-direction || flex-wrap 速記

對齊方式

justify-content:水平對齊

flex-start Default 對齊最左邊的 main start

flex-end 對齊最左邊的 main end

center 水平置中

space-between 平均分配內容元素，左右元素將會與 main start 和 main end 貼齊

space-around 平均分配內容元素，間距也是平均分配(不會貼邊)

align-items:單行垂直對齊

flex-start Default 對齊最上面的 cross start

flex-end 對齊最下面的 cross end

center 垂直置中

stretch 將內容元素全部撐開至 Flexbox 的高度 cross size

baseline 以所有內容元素的基線作為對齊標準

align-content:多行元素對齊處理

flex-start Default 對齊最上面的 cross start

flex-end 對齊最下面的 cross end

center 垂直置中

space-between 將第一行與最後一行分別對齊最上方與最下方

space-around 每行平均分配間距

stretch 內容元素全部撐開

align-self:自己元素對齊方式(根據flex-direction排列方向決定上下或左右)

auto Default 自動

stretch 延展

center 置中

flex-start flex-start

flex-end flex-end

baseline 基線(文字底部)

initial 預設值

inherit 繼承

伸縮比例

flex-grow:數字，成長比越大長越快，實際大小大於flex-basis值使用

flex-shrink:數字，縮小比越大縮越快，實際大小小於flex-basis值使用

flex-basis:數字，基準值，理想的大小

flex: flex-grow || flex-shrink || flex-basis 速記

<<動畫>>

參考網站

http://blogger.gtwang.org/2013/12/using-css3-animation.html

http://www.oxxostudio.tw/articles/201502/css-bounce.html

cubic-bezier函數工具 http://cubic-bezier.com/

http://www.flycan.com/article/css/css3-transition-1169.html

屬性設定

animation-name: 字串，動畫名稱 @keyframes at-rule

animation-duration: 數字，播放的時間長度。

animation-iteration-count: 數字或infinite，播放次數

animation-direction: 播放方向

normal 正常方向

reverse 相反方向

alternate 正反交替(兩次)

alternate-reverse 反正交替(兩次)

animation-delay 播放前的等待時間

animation-play-state 暫停或繼續動畫播放。

paused 暫停

running 播放

animation-timing-function 透過加速曲線（acceleration curves），設定動畫播放的速度。

linear 線性

ease 加速慢出

ease-in 慢入

ease-out 慢出

ease-in-out 慢入慢出

cubic-bezier(n,n,n,n) 客制

animation-fill-mode 播放前後，如何套用樣式。

none 默認值。不設置對象動畫之外的狀態

forwards 結束後保持動畫結束時的狀態

backwards 結束後返回動畫開始時的狀態

both 結束後可遵循forwards和backwards兩個規則。

animation: name duration timing-function delay iteration-count direction fill-mode play-state; 速記

設定動畫過程

@keyframes name{ /* name 為名稱 */

from {}/* 等於0% */

to {}/* 等於100% */

}

@keyframes name{

0% {}

25% {}

50% {}

100% {}

}

簡易版動畫製作

transition: property duration timing-function delay 速記

transition-property: 針對特定屬性製作動畫，於下次屬性值變化時產生。

none 沒有指定

all Default 所有

property 特定屬性(用逗點隔開)

transition-delay: 開始前的時間。

transition-duration: 效果時間。

transition-timing-function: 透過加速曲線（acceleration curves），設定動畫播放的速度。

linear 線性

ease 加速慢出

ease-in 慢入

ease-out 慢出

ease-in-out 慢入慢出

cubic-bezier(n,n,n,n) 客制

<<變形>>

參考網站

http://goo.gl/dbfO5T

http://www.senocular.com/flash/tutorials/transformmatrix/

表格、擬元素不適用

基本變形

transform: 變形設定

none 不設定變形

transform-functions 變形函數(用空白隔開)

transform-origin: 參考點設定

x-axis 預設50%

y-axis 預設50%

z-axis 3D旋轉第三軸只接受長度值

backface-visibility: 設定被旋轉元素的背面是否可見

visible 可見

hidden 不可見

perspective: 定義3D 元素距視圖的距離

perspective-origin: 定義3D 元素所基於的X 軸和Y 軸

x-axis left | center | right | length | %

y-axis 同上

變形函數

θ單位 deg(角度°)、rad(弧度) 、 grad(梯度)

rotate(θ) 以參考點為中心軸 2D 旋轉 θ 度

skewX(θ) 以參考點為中心軸沿著橫向傾斜 θ 度

skewY(θ) 以參考點為中心軸沿著縱向傾斜 θ 度

skew(θx,θy) 以參考點為中心軸沿著橫向傾斜 θx 度、縱向傾斜 θy 度

scaleX(m) 由參考點橫向縮放 m 倍

scaleY(m) 由參考點縱向縮放 m 倍

scale(mx,my) 由參考點2D 橫向縮放 mx 倍、縱向縮放 my 倍

translateX(o) 由參考點橫向移動 o 距離

translateY(o) 由參考點縱向移動 o 距離

translate(ox,oy) 由參考點 2D 橫向移動 ox 距離、縱向移動 oy 距離

matrix(a,b,c,d,e,f)由參考點依據數學變形矩陣(transformation matrix)的6個參數值產生2D變形。

<<邊框與圓腳>>

基本邊框

border: border-width border-style border-color ; 速記

border-width: 邊框寬度

medium 中等

thin 細薄

thick 粗厚

數值(單值四個框)(雙值，上下、左右 )(四值，上起順時) px

border-style: 邊框風格

特定值(單值)(雙值，上下、左右 )(四值，上起順時)

none 無邊框

hidden 隱藏

dotted 點點

dashed 虛線

solid 實線

double 雙線

groove 3D凹槽線

ridge 3D凸槽線

inset 3D凹入面

outset 3D凸出面

border-color: 邊框顏色

color顏色

border-top: border-width border-style border-color ; 速記

border-top-width: 上邊框寬度(值域同上)

border-top-style: 上邊框風格(值域同上)

border-top-color: 上邊框顏色(值域同上)

border-bottom: border-width border-style border-color ; 速記

border-bottom-color: 下邊框寬度(值域同上)

border-bottom-style: 下邊框風格(值域同上)

border-bottom-width: 下邊框顏色(值域同上)

border-left: border-width border-style border-color ; 速記

border-left-color: 左邊框寬度(值域同上)

border-left-style: 左邊框風格(值域同上)

border-left-width: 左邊框顏色(值域同上)

border-right: border-width border-style border-color ; 速記

border-right-color: 右邊框寬度(值域同上)

border-right-style: 右邊框風格(值域同上)

border-right-width: 右邊框顏色(值域同上)

影像邊框

http://www.minwt.com/css/6143.html

border-image: source slice width outset repeat;

border-image-source: 指定邊框圖片

none 不指定

image 圖片

border-image-slice: 影像的切割距離，分別從兩邊源算起 (會被切成9片，4腳4邊 1隱藏的中間)

數值(單值)(雙值水平與垂直) px %

fill 可省略，顯示隱藏的中間

border-image-outset:邊框向外偏移量

數值(單值)(雙值)(四值) px 無單位(等邊寬框度)

border-image-repeat:

stretch：延展方式填滿。

repeat：重複方式填滿。

round：重複方式填滿。當無法以整數的倍數填滿時，就會依照整數倍數來縮放圖片並填滿。

space：重複填滿。用整數倍數填滿，其它不足的部分，再縮放圖片填滿。

border-image-width:邊框寬度

數值(單值)(雙值)(四值) px

auto 圖片原有的寬度

邊框圓腳

border-radius:邊框圓腳

數值(單值)(雙值)(四值) px em %

上方數值 / 左右數值 px em %

border-top-left-radius: 左上邊框圓腳

數值(單值，均勻) (雙值，top left) px em %

border-top-right-radius: 右上邊框圓腳(值域類同上)

border-bottom-left-radius: 底左邊框圓腳(值域類同上)

border-bottom-right-radius: 底右邊框圓腳(值域類同上)

<<背景>>

background: color image position/size repeat origin clip attachment 速記

background-color: 指定顏色

background-image: 指定圖片url("a.jpg") (用逗點隔開)

background-position: 指定圖片位子

水平軸 left right center % px

垂直軸 top bottom center % px

background-size:指定圖片大小

auto default 原圖片大小

cover 原比例水平軸100%

contain 原比例垂直軸100%

雙值(水平軸垂直軸) % px

單值 % px

background-repeat:是否重複貼圖

repeat 重複

repeat-x 水平軸重複

repeat-y 垂直軸重複

no-repeat 不重複

background-origin: 指定貼圖靠齊的邊界

padding-box 內距邊界 Default

border-box 邊框邊界

content-box 內容邊界

background-clip: 指定背景可繪圖的區域

border-box 邊框邊界 Default

padding-box 內距邊界

content-box 內容邊界

background-attachment: 滾輪變化的背景定位

fixed 固定著

scroll 元素隨滾輪變化

local 元素內容隨滾輪變化

tab-size: tad字元的空間大小

無單位數值空白數目寬 Default 8

<<表格>>

border-collapse: table表格內部邊框

separate 分離

collapse 重疊

border-spacing: table表格內部元素邊框距離

雙值(水平軸垂直軸) px

單值 px

empty-cells: table表格內部空元素狀態

show顯示

hide隱藏

table-layout: table表格內部空元素寬度狀態

auto 自動

fixed 固定

caption-side: 表格敘述位子

top 上方

bottom 下方

<<文章與文字>>

文字特效

text-transform: 英文大小寫設定

none 不變化

capitalize 單字大寫

uppercase 全部大寫

lowercase 全部小寫

text-shadow: 文字陰影

水平偏移垂直偏移霧化顏色

none 不顯示

word-break: 英文單字碰壁換行方式

normal 正常系統決定

break-all 分解一律將單字斷開換行

keep-all 跳過一律不斷開

word-wrap: 過長英文單字處理

normal 正常超出視窗

break-word 將單字斷開換行

word-spacing: 英文單字間的空白長度

數字 px em cm (可負值)

normal 正常

letter-spacing: 字元間寬度

normal 正常

數值 px em cm

line-height: 行高

normal 正常

數值 px em cm %

vertical-align: 文內元素對齊基準

baseline 默認。元素放置在父元素的基線上

sub 垂直對齊文本的下標。

super 垂直對齊文本的上標

top 元素的頂端與行中最高元素的頂端對齊

bottom 元素的頂端與行中最低元素的頂端對齊

text-top 元素的頂端與父元素字體的頂端對齊

middle 元素放置在與父元素字體的中部對齊

text-bottom 元素的底端與父元素字體的底端對齊

數值從基線開始偏移 px % cm 可負值

quotes: 設定引用的上下標

string1 上標

string2 下標

string3 第二層上標

string4 第二層下標

unicode-bidi: 各字元書寫方向

normal 正常，由系統決定

embed 左到右

bidi-override 右到左

direction: 內容元素排序方向，書寫方向(字尾的"."會改變方向)

ltr 左到右 default

rtl 右到左

段落

text-align: 文章對齊

left 左邊

right 右邊

center 中間

justify 伸展

text-align-last: 文章最後一行的對齊

left 左邊

right 右邊

center 中間

justify 伸展

start

end

text-justify: 伸展方式(配合text-align:justify)，支援不足 IE ONLY

text-decoration: 裝飾線條位子

none 無

underline 文字上

overline 文字下

line-through 文字中

text-decoration-line: 裝飾線條 (值域同上，允許多值)

text-decoration-color: 裝飾線條的顏色

color

text-decoration-style: 裝飾線條的風格

solid 實線

double 雙線

dotted 點線

dashed 虛線

wavy 鋸齒線

text-indent: 文章第一行起始位子偏移

數值 px em % (可負值)

text-overflow: 文章過長溢出的顯示方式

ellipsis 使用"..."替代

clip default 照樣顯示

字型

font: font-style font-variant font-weight font-size/line-height font-family; 速記

font-style: 文字斜體

normal 正常

italic 斜體書法斜體為字型內建

oblique 傾斜體數學計算斜體法

font-variant: 英文文字變種

normal 正常

small-caps 全部大寫化，大寫小寫轉成字元大小

font-weight: 文字粗細

normal 正常 400

bold 粗 700

bolder 更粗

lighter 細

100 200 300 400 500 600 700 800 900

font-size:

xx-small x-small smaller small medium larger large x-large xx-large

數值 px %

font-family:

font 系統內建字型(用逗點隔開，後備字型)

font-size-adjust: 小x與大X之間的比率，支援不足

font-stretch:指定文字寬度，支援不足

定義新字型

@font-face{

src: URL 字型來原 (TTF OTF WOFF 格式)

font-family: 自訂文字名子

string

font-style: 斜體定義對象

normal | italic | oblique

font-weight: 粗體定義對象

normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

unicode-range: 文字範圍定義對象

font-stretch: 指定文字寬度，支援不足

}

分欄

columns: column-width column-count ;

column-width:欄道寬

auto 系統決定

數值 px

column-count:分欄數

auto Default 由其他屬性決定column-width

數值

column-gap: 欄線寬度

normal

數值

欄線

column-rule: column-rule-width column-rule-style column-rule-color;

column-rule-color: 欄線顏色

column-rule-style: 欄線風格

column-rule-width: 欄線寬度

column-span: 指定的元數可以橫跨欄數

指定值 all | 1

column-fill: 填充方式，支援不足

balance 對列進行協調

auto 按順序對列進行填充，列長度會各有不同

<<容器>>

基本設定

width: 寬

height: 高

min-width: 最小寬

min-height: 最小高

max-width: 最大寬

max-height: 最大高

left: 左邊距離

right: 右邊距離

top: 上方距離

bottom: 下方距離

opacity:半透明數值

color: 指定顏色

box-shadow: 容器陰影

none 無陰影

X軸 Y軸霧化霧化大小陰影顏色

inset 是否網內部顯示陰影

box-sizing: 容器排版空間計算方法

content-box Default 邊框+內距+指定大小(width,height)

border-box 指定大小(width,height),邊框、內距視為容器內容

white-space: 空白與換行設定

normal 連續空白字縮為一個，跳行字視為空白，長行自動跳行跳行

pre 連續空白字保留，跳行字跳行，長行自動跳行不跳行

pre-line 連續空白字縮為一個，跳行字跳行，長行自動跳行跳行

pre-wrap 連續空白字保留，跳行字跳行，長行自動跳行跳行

nowrap 連續空白字縮為一個，跳行字視為空白，長行自動跳行不跳行

visibility: 可見度

visible 可見

hidden 隱藏

collapse 表格table限定，隱藏，消除占有空間，支援不足

clip: 設定可繪圖範圍，(繪圖範圍包含內容、外線與邊框)

auto 自動

shape 唯一合法函數 rect(top, right, bottom, left)

cursor: 滑鼠游標圖案

zoom-out | ns-resize |initial | url |

resize: 使用者調整容器大小

horizontal 水平可以

vertical 垂直可以

both 都可

none 都不可

卷軸

overflow: 卷軸顯示方式、內文超出範圍

visible 顯示超出的內容、無卷軸

hidden 隱藏超出的內容、無卷軸

scroll 隱藏超出的內容、有XY卷軸

auto 隱藏超出的內容、卷軸系統決定顯示

overflow-x: 控制x卷軸顯示方式(值域同上)

overflow-y: 控制y卷軸顯示方式(值域同上)

內距

padding: 指定內距 px em %

單值指定四邊

雙值上下、左右

四值上、右、下、左

padding-bottom: 指定下部內距

padding-left: 指定左部內距

padding-right: 指定右部內距

padding-top: 指定上部內距

外距

margin: 指定外距 px em %

單值指定四邊

雙值上下、左右

四值上、右、下、左

margin-bottom: 指定下部外距

margin-left: 指定左部外距

margin-right: 指定右部外距

margin-top: 指定上部外距

外線

outline: outline-color outline-style outline-width ;

outline-color: 指定顏色

outline-style: 指定線風格特定值

outline-width: 指定邊框

outline-offset: 向外偏移量

<<表單>>

導航鍵，支援不足

nav-index 支援不足

nav-down 支援不足

nav-left 支援不足

nav-right 支援不足

nav-up 支援不足

<<排版>>

clear:清除浮動

none 無 Default

left 清除左邊

right 清除右邊

both 清除兩邊

float:浮動元素

none 無 Default

left 靠左浮動

right 靠右浮動

position: 容器排版方式

static 典型 Default

absolute 絕對位子

fixed 固定位子

relative 相對位子

z-index : 物件重疊順序

display:容器顯示方式

none 不顯示，且不占空間

inline 內文

block 版塊盒子

flex 靈活盒子

inline-block 外面包一層inline的block

inline-flex 外面包一層inline的flex

inline-table 外面包一層inline的table

list-item

run-in 取決於上下文決定block or inline

相似化顯示，表格排版法

table

table-caption

table-column-group

table-header-group

table-footer-group

table-row-group

table-cell

table-column

table-row

hanging-punctuation: 排版用，支援不足

<<擬元素>>

counter-increment: idname 增加idname編號號碼

counter-reset: idname 針對遇到的元素從新計數idname編號號碼(0)

content: 指定擬元素內容

normal 正常狀態 "none"

none 無，沒有東西

counter(idname) 指定要顯示編號，idname由counter-increment屬性設定

attr(attribute) 取得元素屬性值， attribute為屬性名

string 字串內容

open-quote 設定上引號

close-quote 設定下引號

no-open-quote 移除上引號

no-close-quote 移除下引號

url(url) 指定多媒體內容

<<列印>>

page-break-after:元素之後換頁模式

auto 默認。必要則在元素後插入分頁符。

always 在元素後插入分頁符。

avoid 避免在元素後插入分頁符。

left 在元素之後足夠的分頁符，一直到一張空白的左頁為止。

right 在元素之後足夠的分頁符，一直到一張空白的右頁為止。

page-break-before:元素之前換頁模式(值域同上)

page-break-inside:元素之中換頁模式

auto | avoid

<<裝置適應排版>>

https://zetajames.wordpress.com/tag/media-queries/

@media not|only mediatype and (media feature) {

CSS-Code;

}

Media類型

all 全部的裝置

print 用於打印機

screen 用於電腦屏幕，平板電腦，智能手機等

speech 使用屏幕閱讀器的“讀”的頁面出聲

tty 不推薦使用。用於使用固定間距字符網格媒體，如電傳打字機和終端

tv 不推薦使用。用於電視型器件

projection 不推薦使用。用於投影演示，像幻燈片

aural 不推薦使用。用於語音和聲音合成器

braille 不推薦使用。用於盲文觸覺反饋裝置

embossed 不推薦使用。用於分頁盲文打印機

handheld 不推薦使用。用於小型或手持設備

Media特點

aspect-ratio 指定了寬度和顯示區域的高度的比率

color 指定一個數字，代表輸出裝置支援的最小顏色寬度(0黑白，一般是8 bits*3(RGB))

color-index 指定一個數字，代表輸出裝置顏色查詢表中紀錄的個數(可顯示的顏色總數R*G*B)

device-aspect-ratio 指定水平像素 / 垂直像素，代表輸出裝置預期的比率，

device-height 指定一個數字，輸出裝置的高度

device-width 指定一個數字，輸出裝置的寬度

grid 指定1或0，值為1則該裝置是個grid-based (1em =grid cell 的寬度)

height 指定一個數字，顯示內容視窗的高度

width 指定一個數字，顯示內容視窗的寬度

max-color Specifies the maximum number of bits per color component for the output device

min-color Specifies the minimum number of bits per color component for the output device

max-aspect-ratio Specifies the minimum ratio between the width and the height of the display area

min-aspect-ratio Specifies the minimum ratio between the width and the height of the display area

max-color-index Specifies the maximum number of colors the device can display

min-color-index Specifies the minimum number of colors the device can display

max-device-aspect-ratio Specifies the minimum ratio between the width and the height of the device

min-device-aspect-ratio Specifies the minimum ratio between the width and the height of the device

min-device-width Specifies the minimum width of the device, such as a computer screen

max-device-width Specifies the maximum width of the device, such as a computer screen

min-device-height Specifies the minimum height of the device, such as a computer screen

max-device-height Specifies the maximum height of the device, such as a computer screen

max-height Specifies the maximum height of the display area, such as a browser window

min-height Specifies the minimum height of the display area, such as a browser window

max-monochrome Specifies the maximum number of bits per "color" on a monochrome (greyscale) device

min-monochrome Specifies the minimum number of bits per "color" on a monochrome (greyscale) device

max-resolution Specifies the maximum resolution of the device, using dpi or dpcm

min-resolution Specifies the minimum resolution of the device, using dpi or dpcm

max-width Specifies the maximum width of the display area, such as a browser window

min-width Specifies the minimum width of the display area, such as a browser window

monochrome Specifies the number of bits per "color" on a monochrome (greyscale) device

orientation Specifies the whether the display is in landscape mode or portrait mode

resolution Specifies the resolution of the device, using dpi or dpcm

scan Specifies progressive or interlaca scanning of a television

zoom??

網頁

2016年2月15日 星期一

CSS總整理

<<Flexbox靈活盒子>>

參考網站

布局規畫

佈局設定

對齊方式

伸縮比例

<<動畫>>

參考網站

屬性設定

設定動畫過程

簡易版動畫製作

<<變形>>

參考網站

基本變形

變形函數

<<邊框與圓腳>>

基本邊框

影像邊框

邊框圓腳

<<背景>>

<<表格>>

<<文章與文字>>

文字特效

段落

字型

定義新字型

分欄

欄線

目錄

<<容器>>

基本設定

卷軸

內距

外距

外線

<<表單>>

<<排版>>

<<擬元素>>

<<列印>>

<<裝置適應排版>>

Media類型

Media特點

沒有留言:

張貼留言

2016年2月15日星期一