相关的一些不是很了解的内容:
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 动画名称
另外 关于前端动画的调试功能,动画调试栏打开方式