css动画和调试

相关的一些不是很了解的内容：

 font-family ： 后面可以声明多个字体 防止浏览器字体不存在，之间使用“ ， ” 间隔

line-height:行距
letter-spacing: 字间距
word-spacing : 单词间距
word-break ： 自动换行

css 的样式表

内部样式表
外部样式表
行内样式表
// 单纯的是书写的位置的区别

块级别的元素

h1 - h6, div , p , ul, ol , li 可以具有宽度高度对齐等属性
默认是column 布局方式 每一个块级别的元素独自占有一行
可以容纳其他块级别的元素和其他的元素
文字类的块级别的元素不能容纳块级别的元素： p h1- h6

行内元素

a strong b em i del ins u span 
最典型的是 span 
// 宽度和高度无效 宽度和高度就是自己的本身的宽度和高度 
// 只能容纳其他的行内元素 不能容纳其他的块级别的元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RWOQKjRR-1571212098417)(./13.png)]

行内块元素

inline-block : img input td 既有块级元素的特点又有行内元素的特点

块级别的元素和行级别的元素之间的转换

display: block;
display: inline;
display: inline-block;

background 相关参数设置

background-img;
background-repeat: no-repeat/ repeat-x / repeat-y;
background-position : positon( 参数： top left right bottom)

// 没有使用过的一个属性
background-attachment: 表示背景是不是滚动，默认是会滚动的 fiexd 固定的 scroll 滚动的

float 最初是用来做文字环绕，后来成为网页布局

text-overflow

使用的时候必须是强制一行内显示： white-space: nowarp;
然后和 text-overflow 搭配使用 ellipsis 表示省略号显示

translateX translateY 移动效果

translateZ 需要配合透视使用
translate3d 做出的缓动效果应用很广泛

css 其他动画类的参数的设置

自定义的几个鼠标动画的相关样式的设置：

之前最常使用的动画：hover , 之外的类似的动画除了鼠标悬停的之外还有点击

css 自定义动画的使用

---

自定义动画效果并且实现绑定: 动画traslation

相关的参数和描述：

例子：

//自定义动画的几个形式

part1: 解决兼容性的问题

@keyframes myfirst
{
```
}
@-moz-keyframes myfirst /* Firefox */
{
```
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
```
}
@-o-keyframes myfirst /* Opera */
{
```
}

// 自定义动画
@keyframe 动画名称  

另外 关于前端动画的调试功能，动画调试栏打开方式