一、CSS3选择器
1、属性选择器 title属性：
#test[title=box1]{
background-color: blue;
}
<div id="test" title="box1">Hello world\</div>
[title~=box1]{ background-color: yellow;}，那么符合title属性值里含有box1字段的选择器，其他字段用空格隔开也会生效，例如：
title="box1 abc"同理类推：
1、[attribute|=value]：value值开头(必须只有value为开头的整个单词或者后面接连字符)
2、[attribute^=value]：value值开头的所有元素
3、[attribute*=value]：包含value的所有元素
4、[attribute$=value]：以value为结尾的所有元素
2、伪类选择器
1、
p:nth-child(n) p:nth-child(2)
选择属于其父元素的第二个子元素的每个 <p> 元素。 适用于给父类名使用2、
:nth-last-child(n) p:nth-last-child(2)
同上，从最后一个子元素开始计数。3、
:nth-of-type(n) p:nth-of-type(2)
选择属于其父元素第二个 <p> 元素的每个 <p> 元素。4、
:nth-last-of-type(n) p:nth-last-of-type(2)
同上，但是从最后一个子元素开始计数。
二、盒模型
1、盒模型种类
content-box： 内容+padding+边框padding-box： 内容+paddingborder-box： 只有内容
2、弹性盒子（Flex Box）
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局，即使是行内元素。
.box{
display: inline-flex;
}
PS：flex布局会使子元素的float、clear、vertical-align失效。
当容器写上box-orient: horizontal 水平方向（不写的时候此为默认值），其子元素排序为水平方向排序。此外flex布局还有6个常用属性。
- flex-direction 容器内容排列方向
- flex-wrap 一行排满后，项目换行方式
- flex-flow 这是上面两个的缩写
- justify-content 水平排列方式
- align-items 垂直排列方式
- align-content 垂直排列（仅对多行有效）
三、动画特效
- transform transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
- transition transition 属性是一个简写属性，用于设置四个过渡属性
- animation animation 属性是一个简写属性，用于设置六个动画属性
- @keyframes 通过 @keyframes 规则，您能够创建动画。
1、transform
transform: none|transform-functions
transition: property duration timing-function delay;
animation: name duration timing-function delay iteration-count direction;
搭配animation使用:
#box1{
anmition: mymove 2s infinite;
}
@keyframes mymove{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
四、边框border
border-radius用于创建圆角box-shadow用于创建阴影border-image用图片当边框 (较少用)
1、border-radius
#div{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 10px;
background:#dddddd;
width:120px;
border-radius:20px;
}
2、box-shadow
box-shadow:10px 10px 5px #888888;
五、字体
- @font-face 设计师可以通过此任意使用自己喜欢的字体
