Color
HSL
hue色相， saturation飽和度铸敏， lightness亮度
- 色相： 0 和360 都是紅色， 180是綠色
- 飽和度： 0% 全灰色 ～ 100% 純色
- 亮度： 0%全黑 ～ 100% 全白
https://color.adobe.com/create/color-wheel/
字體屬性
color: #fff;
font-family: Arial;
font-style: italic | oblique | normal;
font-weight: bold | normal;
line-height: 200%;
text-shadow: -4px 4px 4px #999;
text-transform: uppercase | lowercase | capitalize | none;
letter-spacing: 1px; //字母間距
word-spacing: -1px; //單詞間距
text-align: left | center | right | justify;
text-decoration: underline | overline | line-through | blink | none;
text-indent: 3em;
font-variant: small-caps | normal; //全字母大寫(xiě)校镐，首字母比其他的大
vertical-align: baseline | sub | super | top | text-top | middle; // 可以設(shè)置百分比垦细，基于line-height的值
white-space: nowrap | pre | normal;
列表屬性
list-style: [list-style-type] [list-style-image] [list-style-position];
list-style-position: outside | inside;
list-style-type: disc | circle | square | decimal | decimal-leading-zero | upper-alpha | lower-alpha | upper-roman | lower-roman | lower-greek | none;
背景屬性
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
background-attachment: scroll | fixed;
background-clip: border-box | padding-box | content-box; // 限制背景圖片的顯示區(qū)域, default: border-box
background-origin: border-box | padding-box | content-box; //根據(jù)border如蚜， padding內(nèi)容放置背景圖片压恒， default： border-box；
background-position: [horizontal] [vertical];
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
background-size: contain | cover | [pixel | em | %]; //background-size: 200px 400px;
排版屬性
clear: left | right | both | none;
clip: rect(5px, 110px, 40px , 10px);
overflow: visible | hidden | scroll | auto;
z-index: 2; //只適用于定位屬性為absolute/relative/fixed的元素
https://css-tricks.com/almanac/properties/z/z-index/
http://www.duidea.com/2013/0330/1761.html
堆棧上下文的根元素
定位元素（和他們的子元素）帶著負(fù)數(shù)的z-index值（高的值被堆疊在低值的前面错邦；相同值的元素按照在HTML中出現(xiàn)的順序堆疊）
非定位元素（按照在HTML中出現(xiàn)的順序排序）
定位元素（和他們的子元素）帶著auto的z-index值（按照在HTML中出現(xiàn)的順序排序）
定位元素（和他們的子元素）帶著正z-index值（高的值被堆疊在低值的前面探赫；相同值的元素按照在HTML中出現(xiàn)的順序堆疊）
注 解：定位元素帶有負(fù)的z-index值被在一個(gè)堆棧上下文中先排序，這意味著他們出現(xiàn)在所有其他元素的后面撬呢。正因如此伦吠，它使一個(gè)元素出現(xiàn)在自己父元素之后 成為可能，這以前通常是不可能的事。當(dāng)然毛仪，這局限于它的父元素與它在同一個(gè)堆棧上下文搁嗓，并且不是那個(gè)堆棧上下文的根元素。一個(gè)偉大的例子如Nicolas Gallagher的CSS不用圖像降低陰影箱靴。
Paste_Image.png
動(dòng)畫(huà)
@keyframe
@keyframe myAnimation {
from {
width: 10px;
}
to {
width: 100px;
}
}
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-iteration-count] [animation-direction] [animation-delay] [animation-fill-mode];
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out;
animation-iteration-count: 3 | infinite;
animation-direction: normal | alternate; // 一般瀏覽器會(huì)從它的初始起點(diǎn)重播腺逛。設(shè)置alternate之后，可以讓它反向衡怀，類(lèi)似從白到黑棍矛，再?gòu)暮诘桨?animation-fill-mode： backwards | forwards | backwards forwards; //定義動(dòng)畫(huà)結(jié)束時(shí)的樣式
animation-play-state: paused | running;
transform: rotate() | translate() | skew() | scale();
transform-origin: [horizontal] [vertical]; // same as background-position;
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]
表格屬性
border-collapse: collapse | separate; // 設(shè)置單元格的邊框線時(shí)隔開(kāi)還是重疊的；
border-spacing: [horizontal] [vertical]; //設(shè)置單元格之間的空格量
caption-side: top | bottom; //標(biāo)題顯示在頂部還是底部
empty-cells： show | hide: // 決定瀏覽器如何顯示完全為空的表格單元抛杨。hide可以完全隱藏够委，只顯示一個(gè)空的占位符，邊框線背景色和背景圖片都不會(huì)顯示怖现。
table-layout: auto | fixed; //當(dāng)為fixed時(shí)茁帽，所有列的寬度與第一行的寬度相同
其他屬性
- content
http://www.westciv.com/style_master/academy/css_tutorial/advanced/generated_content.html
https://www.w3.org/TR/CSS21/generate.html
content: normal | open-quote | close-quote | no-open-quote | no-close-quote;
content: "";
a:after {
content: " (" attr(href) ") ";
}
cursor: auto | default | crosshair | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | url('../xxx.png')
打印相關(guān)
page-break-after: auto | always | avoid | left | right; // left 和right 會(huì)直接當(dāng)做always處理
page-break-before: auto | always | avoid | left | right; // left 和right 會(huì)直接當(dāng)做always處理
