1，属性选择器
其特点是通过属性来选择元素，具体有以下5种形式：
E[attr] 表示存在attr属性即可 ： div[class]
E[attr=val] 表示属性值完全等于val； div[class=mydemo]
E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置； div[class*=mydemo]
E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置； div[class^=mydemo]
E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置； div[class$=demos]
2，伪类选择器
:link、:visited、:hover、:focus、:active
以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。
E:first-child 第一个子元素
E:last-child 最后一个子元素
E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素；
n: 0,1,2,3,4。。。
偶数： 2n even
奇数：2n-1 odd
前5个： -n+5
E：nth-last-child(3): 从后向前选择， 选中倒数第3个
E：empty 表示元素为空的状态
E:target: 表示元素被激活的状态 要配合锚点使用
3，伪元素选择器
伪元素：通过css模拟出html效果
E::before
E::after 必须有content 属性
伪元素选择器：
E::first-letter 选中第一个字母
E::first-line选中第一行
E::selection: 表示选择的区域 通过设置 color background
":" 与 "::" 区别在于区分伪类和伪元素
关于before和after
CSS2
中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念
CSS3
中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者 E:after伪类;
4，颜色
RGBA: red green blue (0-255) alpha: 透明度 （0-1）
HSLA:
H:色调 0-360
S:饱和度 0%-100%
L:亮度 0%-100%
A：alpha 透明度 0-1
tip:在给父盒子设置了透明度之后，子盒子的透明度是不管用的
5，文本阴影
text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。
1、水平偏移量正值向右负值向左；
2、垂直偏移量正值向下负值向上；
3、模糊度是不能为负值；
6，盒模型
box-sizing 有两个值:content-box border-box
content-box:对象的实际宽度等于设置的width值和border、padding之和
border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
box-sizing: border-box 盒模型
7， 浏览器私有化前缀：
-webkit-: 谷歌 苹果
-moz-:火狐
-ms-：ie
-o-：欧朋
8，边框圆角
border-radius:30px;
border-radius:30px 40px 50px 60px;
赋值规律： 从左上开始，顺时针赋值，如果这个角没有值 ，去对角；
border-radius: 40px/60px;
椭圆设置
9， 边框阴影：
box-shadow: 水平位移 垂直位移 模糊程度 阴影大小 阴影颜色 外/内阴影(inset)
水平偏移量正值向右负值向左；
垂直偏移量正值向下负值向上；
模糊度是不能为负值；
inset可以设置内阴影；
设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感。
10，边框图片
border-image: url("images/border.png") 27/20px round
border-image//设置边框的背景图片.
border-image-source:url(“”)//设置边框图片的地址.
border-image-slice:27,27,27,27 //裁剪图片，如何去裁切图片，浏览器会自动去裁剪图片.
border-image-width:20px;//指定边框的宽度.
border-image-repeat:stretch;//边框平铺的样式 stretch拉升
round 会自动调整缩放比例
repeat(重复)
12，渐变
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果
Background:linear-gradient(
To right 表示方向 (left,top,right,left ,也可以使用度数)
Yellow, 渐变起始颜色
Green 渐变终止颜色
)
13，过渡
倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
14，动画
必要元素：
a、通过@keyframes指定动画序列；
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素；
关键属性
a、animation-name设置动画序列名称
b、animation-duration动画持续时间
c、animation-delay动画延时时间
d、animation-timing-function动画执行速度，linear、ease等
e、animation-play-state动画播放状态，running、paused等
f、animation-direction动画逆播，alternate等
g、animation-fill-mode动画执行完毕后状态，forwards、backwards等
h、animation-iteration-count动画执行次数，inifinate等
i、steps(60) 表示动画分成60步完成
15，伸缩布局
必要元素：
a、指定一个盒子为伸缩盒子display: flex
b、设置属性来调整此盒的子元素的布局方式例如flex-direction
c、明确主侧轴及方向
d、可互换主侧轴，也可改变方向
各属性详解
a、flex-direction调整主轴方向（默认为水平方向）
b、justify-content调整主轴对齐
c、align-items调整侧轴对齐
d、flex-wrap控制是否换行
e、align-content堆栈（由flex-wrap产生的独立行）对齐
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
h、order控制子项目的排列顺序，正序方式排序，从小到大
16，多列布局
/* 分几列*/ -webkit-column-count:3;
/* 分割线*/ -webkit-column-rule:1px dashed red;
/*设置列间距*/ -webkit-column-gap:60px;
/* 列宽度*/ /*-webkit-column-width: 400px;*/
17，web字体
