什么是css？
css英文全称Cascading Style Sheets，中文全称层叠样式表，作用是编辑、排版、控制html的样式。
选择器（普通选择器；伪类选择器；伪元素选择器）
属性选择器：
e[att^=’val’]{}：某属性开头包含某字符串
e[att$=’val’]{}：某属性结尾包含某字符串
e[att*=’val’]{}：某属性包含某字符串
结构性伪类选择器
:root{}：根元素选择器，控制html（推荐使用）
input:not([type=’submit’]){}：否定选择器，选择除此以外的其他元素
Div:empty{}：空元素选择器，选择没有任何内容的元素，包括空格
:target{}
ul>li:first-child {color: red;}：子元素选择器，不是后代选择器
ul>li:last-child {color: red;}：子元素选择器，不是后代选择器
div > div:nth-child(2){}：选择一个或多个子元素（2,2n,odd,even）
div > div:nth-last-child(2){}：同上，但是从最后一个子元素开始计算
div > div:nth-of-type(5){}：指定某类子元素的某个或多个
div > div:nth-last-of-type(5){}：同上，但是从最后一个子元素开始计算
div > p:first-of-type {}指定某种元素的第一个
div > div:last-of-type{}：指定某类子元素的最后一个
li:only-child {}：独生子女选择器，其父元素只有它一个子元素
div p:only-of-type{}：这个div只有一个p类型的子元素，则生效
伪类选择器：伪类是很大的一类简单选择器，它是选择器能力的一种补充。在实际使用中，我还是建议你尽量通过合适的id和class来标识元素，结束伪类的使用。最好只在不得不使用伪类的场景使用伪类，这对于css代码的性能和可读性的都有好处。伪类选择器是一系列由css规定好的选择器，它们以冒号开头，伪类由普通型和函数型。
伪元素选择器：无中生有，硬生生的造出一个元素来，这对于实现一些特殊的小特效非常实用。
- 布局（浮动，定位，flex）
- 盒子模型（标准盒子，怪异盒子，margin，padding）
Margin
当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候注意margin的用法。 当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center; 2.只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了 3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
- 元素类型（块级，行内，行内块）
- 文字
- 背景（背景图片，颜色）
背景图片
background-color: red; 在没有背景图片覆盖的范围显示背景颜色 background-image: url('timg.jpg'); 设置背景图片
background-origin:背景图片的原始起始位置(边框,padding,内容)
background-clip:剪裁背景图片（边框外，内填充外，内容区域外）
background-size:背景图大小(auto,长度值,百分比,cover,contain)
一个元素多张背景图的写法
background-image:url(1.jpg),
url(2.jpg),
url(3.jpg);
background-position: left top, center top, right top;
background-repeat: no-repeat, no-repeat, no-repeat;
background-repeat: no-repeat; 设置图片不重复
background-position: right top; 图片的位置 左中右x 上中下y /*left center right /top center bottom*/
background-attachment: fixed; 在窗口中固定图片的位置，背景图不会随着鼠标滚动而滚动
background:red url("timg.jpg") no-repeat left center; 把所有的设置综合写在background中
- Css3
圆角
阴影（外阴影，内阴影，多阴影）
阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
文本阴影text-shadow； x y blur color;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
Css3动画
animation使用的是贝塞尔曲线
animation-name：动画的名称，这是一个keyframes类型的值
animation-duration：动画的时长
animation-timing-function：动画的时间曲线
animation-delay：动画开始前的延迟
animation-iteration-count：动画的播放次数
animation-direction：动画的方向
transition：（贝塞尔曲线；相对animation更加简单的一个属性）
transition-property：要变换的属性
transition-duration：变换的时长
transition-timing-function：时间曲线
transition-delay：延迟
transform：像元素定义2d或3d转换，比如旋转、缩放、倾斜等（如果元素宽高不是整数或偶数，则可能出现模糊或抖动）。