全局属性
initial，取浏览器默认值 --- ie-no
尺寸
运算：calc(100% - 20px) --- +-*/() --- 遇到+-时左右必须有空格，并且右边必须带单位（任何单位均可）
单位：em/rem、vw/vh/vmax/vmin
边框
圆角
border-radius: 10px;
border-radius: 100% 0;
border-radius: 1em 1em 0;
border-radius: 1rem 0 0 0;
border-top-xxx-radius
border-bottom-xxx-radius
阴影（多层）
box-shadow: -X -Y [模糊] [-扩展] [颜色] [inset]，-2F，-3F ...
inset可写在后或前
边框背景 --- ie11+
border-image: url(xxx.jpg) 70 repeat
4线切片：10 || 10 20 || 10 20 30 || 10% 20 30 40
延伸：空|stretch || repeat || round
渐变 ie10+
线性渐变（首尾平铺）
background-image: linear-gradient( [180deg|to bottom], #ff0 [-10px], #f00 [40%], ... #000 [150%] )
方向：+-180deg 、 to bottom || to bottom left | to left bottom ...
颜色点位置：默认是0%~100%的平均分配，呈递增方式 --- #ff0 -10px, #f00 150%
径向渐变（首尾平铺）
background-image: radial-gradient( [100px 50% at 100px 50%], #ff0 [-10px], #f00, ... #000 [130%] )
大小与位置：渐变大小xy at 中心点坐标xy
颜色点位置：默认是0%~100%的平均分配，呈递增方式 --- #ff0 -10px, #f00 50%, #000 130%
重复渐变（首尾重复）
重复线性：repeating-linear-gradient
重复径向：repeating-radial-gradient
可利用rgba制作透明渐变
文本/字体
文本溢出省略标记
单行文本：
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
多行文本（-webkit-专有）：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
长单词折断
word-wrap: break-word; --- 单词长度超过容器宽度时才会发生（建议）
word-break: bread-all; --- 允许单词内换行（不建议）
嵌入字体
@font-face { font-family: "iconfont"; src: url("../img/iconfont.woff"), format(woff); }
文本阴影（多层）
text-shadow: -X -Y [模糊] [颜色]，-2F，-3F ...
文本选中 ie10+
-webkit-user-select：none | text
background
基础
background-origin: padding-box || border-box || content-box
background-clip: border-box || padding-box || content-box
background-size: auto || 100px(取宽等比) || 100px 100% || cover(满屏) || contain(尽量满屏)
background-attachment: scroll || fixed(慎用)
多重背景（多层）
background: #ccc url("../img/xxx.png") no-repeat center center / contain content-box content-box，-2F，-3F ...
分离写法可读性更好
background-color只能设置一个
属性选择器
[data-name]
[data-name="xxx"]
[data-name^="xxx"]
[data-name*="xxx"]
[data-name$="xxx"]
伪类选择器
:root，代表html
:not(selector)，去掉-否定的
:empty，拿出-内容为空的
:target，拿出-id等于hash值的
:first-child，拿出-同辈里排第一的
:first-of-type，拿出-同辈&&同tag中的第一个
:last-child，拿出-同辈里排最后的
:last-of-type，拿出-同辈&&同tag中的最后一个
:nth-child(n)，拿出-同辈里的特定索引（正序）
:nth-of-type(n)，拿出-同辈&&同tag中的特定索引（正序）
第一个：1
前m个：-n+m
第m个及以上：n+m
奇数：2n+1 || odd
偶数：2n || even
......
:nth-last-child(n)，拿出-同辈里的特定索引（倒序）
:nth-last-of-type(n)，拿出-同辈&&同tag中的特定索引（倒序）
:only-child，拿出-无同辈
:only-of-type，拿出-同辈里无同tag
实时的attr --- disabled（文本框、选框，变灰）
:disabled，禁用状态
:enabled，激活状态
实时的attr --- readOnly（文本框）
:read-only，只读状态
:read-write，可写状态
无attr（只用于初始化） --- checked（选框）
:checked，表单选中状态
::selection，伪元素，被选中的文本
::before，伪元素
::after，伪元素
content: string | attr(href) | url(xxx.jpg) | counter(name);
//计数器
counter-reset: a 0 b 0; --- 创建/重置一个或多个计数器
counter-increment: a 1 b 1; --- 增量
content: counter(a) '-' counter(b) ' '; --- 调用（注意渲染顺序影响统计结果）
transform 变换（2D）
transform: rotate(-45deg)：旋转
transform: skew(-10deg)：倾斜
skew(10deg, 20deg) || skew(10deg)/skewX(10deg) || skewY(20deg)
transform: scale()：比例（缩放）
scale(1.1) || scale(1.1, 1.2) || scaleX(1.1) || scaleY(1.2)
transform: translate(-50%)：平移
translate(50%, 100px) || translate(50%)/translateX(50%) || translateY(100px)
transform: matrix()：矩阵
transform-origin 原点
类似background-position
可能值：top bottom left right center 100px 50%
GPU加速
will-change: auto | scroll-position, contents, opacity, transform, left, top, height ...
http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/
z-index的影响
http://blog.csdn.net/xiebaochun/article/details/50274963
https://www.uis.cc/2015/12/11/Chrome-Rendering/
transform 变换（3D）--- ie10+
transform: translate3d(x, y, z)
x相当于2d的translateX
y相当于2d的translateY
......
transition 过渡动画 --- ie10+
transition: property duration [timing-function] [delay], 第二组，第三组 ...
transition-property: all | width | width, height
transition-duration: .5s
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
transition-delay: 0 | .2s
animation keyframes动画 --- ie10+
keyframes：
@keyframes name {
0% | from {}
50% {}
100% | to {}
}
animation: name duration [timing-function] [delay] [iteration-count] [direction] [play-state] [fill-mode]
animation-name: name
animation-duration: .5s
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
animation-delay: 0 | .2s
animation-iteration-count: 1 | infinite
animation-direction: normal | reverse || alternate | alternate-reverse
animation-play-state: running | paused
animation-fill-mode: //填充模式
none
forwards：动画结束后应用最后帧
backwards：在animation-delay前应用初始帧
both：同时具有forwards和backwards效果
布局相关
多列：
columns: 200px 2; width优先
column-width: 200px;
column-count: 2;
column-gap: normal(1em) | 20px;
column-rule: 10px solid #000;
column-span: none | all; 跨列（块级有效）
盒子模型：
box-sizing: content-box | border-box
object-fit/object-position：--- 只针对img等替换元素
height: 100%;
width: 100%;
object-fit：cover | contain;
object-position: center center;
弹性盒子(ie11+)：
参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
.container
display: flex | inline-flex;
flex-flow: flex-direction flex-wrap; 复合
flex-direction: row | row-reverse | column | column-reverse; 方向
flex-wrap: nowrap | wrap | wrap-reverse; 不折行/折行
align-items: stretch | flex-start | flex-end | center | baseline; 垂直对齐方式（单行时）
align-content: stretch | flex-start | flex-end | center | space-between | space-around; 垂直对齐方式（多行时）
justify-content: flex-start | flex-end | center | space-between | space-around; 水平对齐方式
.items（float、clear和vertical-align将失效）
align-self: auto | stretch | flex-start | flex-end | center | baseline; 垂直对齐方式（单行时）
flex: flex-grow flex-shrink flex-basis | auto(1 1 auto) | none(0 0 auto); 复合
flex-grow: 0 | 2; 当有多余空间时，索取多余空间的比率
flex-shrink: 1 | 2; 当超出容器时，收缩爆出空间的比率
flex-basis: auto | 100px; 在分配空间之前，项目占据的主轴空间，等同于width
flex: 2 | 2 3 | 2 3 100px
order: 0 | -1; 顺序
media queries
语法：空|not|only 媒体类型 and (媒体特性) and (媒体特性) ...
<link rel="stylesheet" href="style.css" media="screen and (max-device-width:480px)" />
最小宽度min-width
@media screen and (min-width:300px) {}
最大宽度max-width
@media screen and (max-width:700px) {}
多个媒体特性
@media screen and (min-width:300px) and (max-width:700px) {}
横竖屏
@media screen and (orientation:landscape|portrait) {}
其它
resize: none | both | horizontal | vertical;
--- 需结合overflow: hidden | auto | scroll
--- 智能受限
--- ie-no
outline-offset: -5px; --- ie-no
浙公网安备 33010602011771号