# 选择器

选择类型	符号
标签选择器（元素选择器）	无符号，直接使用HTML的标签名称
id选择器	#
类选择器	.
通用选择器	单单一个*
分组选择器	使用,分隔各个组
后代选择器	使用空格分隔
子代选择器	>
相邻兄弟选择器	+

# background

background: [ background-color ] [ background-image ] [ background-repeat ] [ background-attachment ] [ background-position ]

# background-color

颜色

# background-image

图片 url(path)

# background-repeat

重复

repeat-x x轴重复
repeat-y y轴重复
repeat y-x都重复
no-repeat 不重复

# background-attachment

固定还是滚动

fix 固定
scroll 滚动

# background-position

位置

.div {
    background: red url(xxx.jpg) repeat-x fiex right top;
}

# border

边框 border: [ border-width ], [ border-style ], [ border-color ]

# border-width

边框大小(px)

# border-style

边框样式

# border-color

颜色

四个边框都有颜色

.div {
    border: 1px solid red;
}

只有下边框有颜色

.div {
    border-bottom: 1px solid brown;
}

# border-radius

圆角

圆角边框

.div {
    border-radius: 5px;
}

# 文本

用于设置文本

# text-align

设置水平对齐方式

left 左对齐
right 右对齐
center 居中对齐

# text-decoration

设置文本装饰

none 无
overline 顶上一个横
line-through 删除线
underline 下划线

# line-height

行高(px)

# text-shadow

文本阴影

文字阴影

<h1 style="text-shadow: 5px 5px 5px red">文字阴影</h1>

# display

展示方式

block 块元素
inline 内联，但取消块属性
inline-block 内联块
none 不显示

# position

定位

static 默认位置
relative 相对于原来的位置
fixed 固定位置
absolute 绝对定位，这个绝对定位是相对于非static的父元素

# overflow

控制元素溢出时如何展示

visiable 默认溢出展示
hidden 溢出部分隐藏
scroll 添加滚动条

你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例你好,这是一个案例

.div {
    overflow: scroll;
}

# transform

缩放/旋转

值	效果
scale(X,Y)	缩放
rotate(xx)	顺时针旋转

# flexBox

# flex-direction

设置弹性盒子的方向

column
column-reverse
row
row-reverse

# flex-wrap

设置换行方式

wrap换行
nowrap不换行
wrap-reverse反向换行

# justify-content

设置子元素容器排列方向上的对齐方式

flex-start顶对齐
flex-end底对齐
center中心对齐

# align-item

设置与排列轴垂直的方向上对齐方式

flex-start顶对齐
flex-end底对齐
center中心对齐

# 子项目

# order

排列的位置

# flex-grow

增长比例

# flex-shrink

缩小比例

# flex-basis

元素的基础大小

# flex

flex: [ flex-grow ] [ flex-shrink ] [ flex-basis ]

# transition

过渡

# transition-property

指定该过渡应用于哪个css属性

# transition-duration

指定过渡使用的时间

# transition-timing-function

值	效果
linear	匀速
ease	慢速开始，快速结束
ease-in	慢速开始
ease-out	慢速结束
ease-in-out	慢速开始\结束
cubic-bezier(n,n,n,n)	自定义速度

# animation

动画 animatioin [ name ] [ duration ] [ timing ] [ delay ] [ count ] [ direction ]

# @keyframes

设置动画

@keyframes animationName {
    0%{ *** }
    100%{****}
}

# animation-name

指定动画名

# animation-duration

指定动画方向

# animation-delay

延迟

# animation-iteration-count

动画运行多少次 infinite循环播放

# animation-direction

值	效果
norml	正常播放
reverse	方向播放
alternate	先向前，再向后
alternate-reverse	先向后，再向前

# animation-timing-function

指定速度曲线

值	效果
linear	匀速
ease	慢速开始，快速结束
ease-in	慢速开始
ease-out	慢速结束
ease-in-out	慢速开始\结束
cubic-bezier(n,n,n,n)	自定义速度

# animation-fill-mode

动画播放结束后是否影响元素

值	效果
none	默认值，不影响
forwards	由最后一个影响
backwards	由第一个影响
both	由第一个和最后一个影响