1.上外边距的溢出
在某些特殊条件下，在为子元素设置上外边距时有可能会作用在父元素上
特殊条件：（同时满足）
1.父元素不能有上边框；
2.为第一个子元素设置上外边距时
解决方案：
1、 为父元素增加上边框：会影响父元素的高度
2、 使用父元素的上内边距来取代子元素的上外边距：会影响父元素的高度
3、 在子元素上增加一个空的
元素即可2.CSS Sprites雪碧图
将若干副不经常变换的图片封装到一幅大图中
配合背景图片以及背景图片定位将想看的图片显示出来
1） 在页面中创建一个与要显示区域大小一样的元素
2） 将雪碧图作为元素的背景图
3） 改变图片在元素中的位置（左上移动）
3.背景简写属性——background
background：color url( ) repeat attachment position;
background: red;
background: url(img/mm.png) no-repeat 95% center;
4.字体属性简写方式
属性：font
取值：style variant(小型大写字母) weight size family
注意：一定要将Family写出来，否则无效
5.伪类选择器
1)目标伪类: :target
对页面中的某个target元素指定样式，该样式只对在用户点击了页面中的超链接并且跳转到target元素后起作用
2) :before或::before
作用:匹配到某元素的内容区域之前
3) :after或::after
作用:匹配到某元素内容区域之后
- 解决浮动元素父元素的高度问题 :after
- 特点：1.在父元素的内容区域之后
2.增加一个“空”元素
3.必须是块级元素
4.必须设置clear:both
6.图片和行内快的vertical-align属性
控制图片或行内块元素两边的文本，相对于他们的对齐方式
取值：
1. top
2. middle
3. bottom
4. baseline 基线对齐
a) 行内块：基线是在最后一行文本的底部
b) 图片：基线是在图片底部向下3px(不一定)位置处
img{vertical-align:bottom;}
7. 绝对定位对元素的影响
- 脱离文档流，允许压在其他元素的上方
2. 绝对定位的元素会变成块级元素
. margin可以正常使用，但是margin的左右auto值会失效
. 绝对定位的元素，将left，right，bottom，top四个值都设置为0 的情况下，margin:auto会让整个元素变得绝对居中
8.弹性布局
8.1 属性:display
取值:
1、flex：将块级元素变为弹性布局的容器
2、inline-flex：将行内元素变为弹性布局的容器
注意：
1、 容器中的项目们会自动变为块级元素，允许修改尺寸
2、 项目们的float、clear、vertical-align、全部失效
3、 容器的text-align属性也会失效
8.2 属性flex-wrap
取值:1.nowrap 2.wrap 3.wrap-reverse
8.3 justify-content
作用：指定项目在主轴上的对齐方式
取值：
- 1、 flex-start在轴的起点对齐
- 2、 flex-end 在轴的终点对齐
- 3、 center 居中对齐
- 4、 space-between 两端对齐，项目之间的间隔都是相等的
- 5、 space-around 每个项目两边的空白间距是相等的
取值:
1.位移:translate(x)/translate(x,y)/translateX(x)/translateY(y)
2.缩放:scale(value)/scale（x，y）/scaleX（x）/scaleY（y）
3.旋转:rotate(ndeg)
4.倾斜:skewX(ndeg)/skewY(ndeg)/skew(x)/skew(x,y)
9.1 转换原点
属性:transform-origin
取值:1. 两个值：表示原点在x轴和y轴的位置
2. 三个值：表示原点在x轴、y轴和z轴的位置
可以取数值/百分比/关键字，多个值用空格隔开
9.2 3D转换(模拟人眼睛到3D转换物体的距离，取值越大，表示离物体越远，表示离物体越近)
属性:perspective
取值:rotateX(xdeg) 以x轴为中心轴旋转
rotateY(ydeg) 以y轴为中心轴旋转
rotateZ(zdeg) 以z轴为中心轴旋转
rotate3D(x,y,z,ndeg)
x,y,z 取值大于0的话，则该轴参与旋转
x,y,z 取值为0的话，则该轴不参与旋转
rotate3D(1,0,0,45deg)==>rotateX(45deg)
10.过渡
- 属性:transition
- 取值:property duration timing-function delay;
11.动画
样式表中,通过@keyframes规则来声明动画
@keyframes 动画名称name{
0%{
/*动画开始时，元素的样式*/
属性：值;
属性: 值;
}
50%{
/*动画执行到一半时，元素的样式*/
}
100%{
/*动画结束时，元素的样式*/
属性: 值;
属性: 值;
}
}
11.1动画声明的浏览器兼容性
Firefox：@-moz-keyframes{ }
Chrome & Safari: @-webkit-keyframes{ }
Oprea: @-o-keyframes{ }
11.2调用动画简写属性:animation
取值:name duration timing-function delay iteration-count(播放次数) direction
11.3动画填充模式:animation-fill-mode
1.none 默认值，无任何效果
2.forwards 档动画播放完成后，元素将保持在最后一个帧的状态上
3.backwards 动画播放前，在延迟时间内，动画将保持在第一帧的状态上
4.both 动画播放前后，分别应用在第一帧和最后一个帧上
11.4动画播放状态animation-play-state
取值
- paused：动画暂停
2. running：动画播放