css属性 知识总结
动画（Animation）：
1.animation.简写属性，即在这个属性中设置子属性的值。例如：
animation:mymove 5s infinite;
2.@keyframes 选择器，定义每一个时刻的状态和位置。例如：
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
} 3.animation-name 选择合适的@keyframes。
4.animation-duration:2s; 定义动画一个周期的时间。
5.animation-timing-function 不同的调速函数来调整变换的节奏。
6.animation-delay 几秒后开始动画，可以是负数，表示跳过几秒。
7.animation-iteration-count 动画重复的次数。
8.animation-direction 播放完一个周期后是否逆着播放回来。
9.animation-play-state 是否暂停，利用javascript可以控制是否播放。
10.animation-fill-mode 选择动画停留在哪一个状态。
背景（Background）：
1.background 简写属性。
2.background-attachment 控制背景的图片是否随着滚动而滚动。
3.background-color 元素内的背景颜色。
4.background-image 设置背景图片
5.background-size 背景的尺寸。
6.background-repeat 是否及如何重复图片，默认水平和竖直方向都会重复。
7.background-clip 背景的绘制区域，内边距内，内容部分or边框内。
8.background-origin 相对于什么部分定位，内边距框，内容框还是边框。
9.background-position 图片初始位置。
边框（border,outline):
1.border 简写属性
2. border-bottom 简写下边框属性。
3.border-bottom-color 下边框颜色。
4.border-bottom-style 下边框样式，比如点，实线等。
5.border-bottom-width 下边框的宽度。
6.border-left border-right border-top
7.border-color -style -width
8.outline-color -style -width 轮廓指的是边框外面的那一圈。
9.border-radius 设置圆角边框的角的弧度。
还可以具体设置方向：bottom-left bottom-right top-left top-right
10.border-image 简写属性 由图片（图形）构成的边框。
11.border-image-repeat 设置图片重复还是拉伸等操作。只作用于四个边的图形。
12.border-image-source 图片的地址。
13.border-image-slice 剪切图片作为边框，比如九宫格，内容是中间一个，一个正方形图片33%切出来就是标准九宫格。
14.border-image-width 相当于border-width。
15.border-image-outset 边框向外延伸的量，边框距离不变，只是向外拓展一圈。
16.box-shadow 立体阴影，可以选择 位置，模糊宽度，颜色等。
BOX
1.overflow-x 左右 overflow-y 上下 关于内容溢出框的处理办法，可以设置滚动等方式。
2.opacity 设置元素的不透明程度，0为全透，即消失。
尺寸（dimension）
height width max- min-
字体（font）
1.font：简写属性。
2.font-family 字体。
3.font-size 字体大小。
4.font-style 字体样式，比如斜体等。
5.font-variant 设置小型大写字，即比大写字母小一号的大写字母。
6.font-weight 字体粗细
内容生成
1.content 配合 before和after选择器 设置插入的内容。
2.counter-increment 配合选择器进行计数递增或递减操作。
3.counter-reset 重置或生成一个计数器。
4.quotes 设置引用嵌套，设置在某些情况下自动添加引号。
列表（List）
1.list-style 简写属性
2.list-style-image 使用图像替换项目标记。
3.list-style-position 项目标记的位置，在行内还是独立在外。
4.list-style-type 项目标记的常用选项。数字，字母，圆点等。
Margin Padding
margin padding -top -right -bottom -left
multi-column 多列属性
1.columns 简写宽和列。
2.column-count 分隔开的列数
3.column-width 列的宽度
4.column-rule 简写列之间的宽度 颜色等样式。
5.column-rule-width 列之间样式的宽度
6.column-rule-color 列之间的颜色
7.column-rule-style 列之间的样式
8.column-gap 列之间的距离
Positioning
1.bottom top right left 相对其边界的距离。
2.clear 哪一边不允许出现浮动，作用于自身。
3.clip:rect(0px 100px 100px 0px) 裁剪，所有尺寸均是以左上角为相对位置。
4.cursor 设置光标停置在此元素上时的形状。
5.display 元素的显示方式。
6.float 是否浮动
7.position 定位方式。
8.vertical-align 垂直对齐方式。
9.visibility 元素是否可见，所占空间不消失，若要达到消失的效果需要使用display。
10.z-index 设置堆叠顺序 越大优先级越高，允许有负数。
表格属性（Table）
1.border-collapse 合并一些多余的边框。
2.border-spacing 定义单元格间的距离，水平和竖直。
3.caption-side 标题的位置 表格上还是表格下。
4.empty-cells 设置空单元格是否显示。若已设置合并单元格则忽略本属性。
5.table-layout 表格是固定格式还是根据表格内容调整，影响打开速度。
文本属性（Text）
1.color 设置元素的颜色。
2.direction 文本的方向。
3.letter-spacing 字母间的间距。
4.line-height 行高 基线间的距离。
分清顶线 中线 基线 底线的概念。
5.text-align 水平对齐方式。
6.text-decoration 下划线等装饰。
7.text-indent 文本块的首行缩进。
8.text-transform 大小写转换
9.white-space 如何处理空白，包括换行符等。
10.word-spcing 单词间距
11.text-overflow 如何处理溢出的文本。
12.text-shadow 文本的阴影效果，和box-shadow不相同。
13.word-break 设置如何换行，比如是否拆分一个单词进行换行。默认采用浏览器默认的换行规则。
14.word-wrap 是否 允许 长单词或链接内换行。
区别：word-break直接把长单词分成很多断点，需要就断了。
word-wrap强调“允许”即首先碰到长单词会整个放在下一行，如果还是太长，则断一下，如果我们对空间有特别大的要求，就可以用word-break。
选择困难症：用word-wrap：break-word； 因为通常不会有那么长的单词，如果有那也常常是链接，用word-wrap换行会更美观，毕竟多了一个庞然大物。
2D 3D转换
内容比较繁杂，需要动画效果时查阅相关手册。
1.transform transform-origin transform-style
2.backface-visibility。
过渡属性（Transition）
1.transition 简写属性。
2.transition-property 设置应用过渡效果的属性名称。
3.transition-duration 过渡效果作用的时间。
4.transition-timing-function 作用效果的时间曲线。比如先快后慢等。
5.transition-delay 设置几秒后动画开始。
用户界面属性（User-interface）
1.outline-offset:10px 设置了边框10px外的轮廓。
2.box-sizing 以三种特殊的方式量化，为了方便排版，设置相应的width。
content-box 默认值，边框和内边距渲染在盒子外，即设置的宽高外。
border-box 边框和内边距渲染在盒子内，即宽高包括了内边距和边框。