个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！
文章目录
- ✍CSS3 动画
- 💎1 什么是帧动画
- 💎2 定义关键帧
- 💎3 animation
- 🌹3.1 animation-name
- 🌹3.2 animation-duration
- 🌹3.3 animation-timing-function
- 🌹3.4 animation-delay
- 🌹3.5 animation-direction
- 🌹3.6 animation-iteration-count
- 🌹3.7 animation-play-state
- 🌹3.8 animation-fill-mode
- 💎4 动画库
- ✍HTML、CSS规范
- 💎1 命名规范
- 💎2 CSS 书写
- 🌹2.1 空格规范
- 🌹2.2 选择器规范
- 🌹2.3 属性规范
- 🌹2.4 大小写规定
- 🌹2.5 CSS3 兼容前缀
- 🌹2.6 CSS书写顺序
- 🌹2.7 链接伪类顺序
- 🌹2.8 CSS复合写法与单例写法
- 🌹2.9 布局方式选择
- 🌹2.10 定位z-index取值范围
✍CSS3 动画
💎1 什么是帧动画
在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。
animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的。
💎2 定义关键帧
通过 @keyframes 设置自定义名称的动画关键帧，在动画关键节点设置数值：
- AnimationName：动画名称，开发人员自己命名
- percentage：为百分比值，可以添加多个百分比值
- properties：样式声明，例如：
color、left、width等等
@keyframes animationName {
from {
properties: value;
}
percentage {
properties: value;
}
to {
properties: value;
}
}
/* or */
@keyframes animationName {
0% {
properties: value;
}
percentage {
properties: value;
}
100% {
properties: value;
}
}
💎3 animation
语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
name：指定要绑定到选择器的关键帧的名称duration：动画指定需要多少秒或毫秒完成timing-function：设置动画将如何完成一个周期delay：设置动画在启动前的延迟间隔iteration-count：定义动画的播放次数direction：指定是否应该轮流反向播放动画fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式play-state：指定动画是否正在运行或已暂停
🌹3.1 animation-name
它是用来设置动画的名称，可以同时赋值多个动画名称，用,隔开：
animation-name: none | IDENT[, none | IDENT] *;
animation-name: mymove;
默认值：none， 指定有没有动画
🌹3.2 animation-duration
它是用来设置动画的持续时间，单位为s，默认值为0：
animation-duration: <time>[, <time>] *;
animation-duration: 2s;
🌹3.3 animation-timing-function
animation-timing-function 指定动画将如何完成一个周期：
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) | step-start | step-end;
ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) 和 transition-timing-function 类似：
- ease：动画缓慢开始，接着加速，最后减慢，默认值
- linear：动画从头到尾的速度是相同的
- ease-in：以低速开始
- ease-out：以低速结束
- ease-in-out：动画以低速开始和结束
🌹3.4 animation-delay
它是来设置动画的开始时间，单位是s或者ms，默认值为 0：
animation-delay: <time>[, <time>] *;
animation-delay: 2s;
🌹3.5 animation-direction
它是来设置动画播放的方向，默认值为normal表示向前播放，alternate代表动画播放在第偶数次向前播放，第奇数次向反方向播放：
animation-direction: normal|reverse|alternate|alternate-reverse;
取值：
| 值 | 描述 |
|---|---|
| normal | 默认值。动画按正常播放。 |
| reverse | 动画反向播放。 |
| alternate | 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。 |
| alternate-reverse | 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。 |
🌹3.6 animation-iteration-count
它是来设置动画循环的次数，默认为1，infinite为无限次数的循环：
animation-iteration-count: 3;
animation-iteration-count: infinite;
🌹3.7 animation-play-state
它主要是来控制动画的播放状态：running代表播放，而paused代表停止播放，running为默认值：
animation-play-state: paused|running;
取值：
| 值 | 描述 |
|---|---|
| paused | 指定暂停动画 |
| running | 指定正在运行的动画 |
这个属性一般是单独使用。
🌹3.8 animation-fill-mode
作用：
- forwards：大白话：保留动画的最终效果(to)
- backwards：大白话：采用第一帧（from）作为盒子的效果。如果设置方向为reverse，那么采用最后一帧（to）作为盒子的效果。
- both：大白话：既采用第一帧（from）作为盒子的效果，保留动画的最终效果(to)
animation-fill-mode: none|forwards|backwards|both;
取值：
| 值 | 描述 |
|---|---|
| none | 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 |
| forwards | 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 |
| backwards | 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。 |
| both | 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 |
💎4 动画库
动画库链接：animate.css
了解：
- 基础用法，很多时候会结合JS来实现动态效果
- 阅读源码
个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！
文章目录
- ✍CSS3 动画
- 💎1 什么是帧动画
- 💎2 定义关键帧
- 💎3 animation
- 🌹3.1 animation-name
- 🌹3.2 animation-duration
- 🌹3.3 animation-timing-function
- 🌹3.4 animation-delay
- 🌹3.5 animation-direction
- 🌹3.6 animation-iteration-count
- 🌹3.7 animation-play-state
- 🌹3.8 animation-fill-mode
- 💎4 动画库
- ✍HTML、CSS规范
- 💎1 命名规范
- 💎2 CSS 书写
- 🌹2.1 空格规范
- 🌹2.2 选择器规范
- 🌹2.3 属性规范
- 🌹2.4 大小写规定
- 🌹2.5 CSS3 兼容前缀
- 🌹2.6 CSS书写顺序
- 🌹2.7 链接伪类顺序
- 🌹2.8 CSS复合写法与单例写法
- 🌹2.9 布局方式选择
- 🌹2.10 定位z-index取值范围
✍HTML、CSS规范
规范是更好编写代码，规范不是强制要求，而是一种建议，初学的时候应该尽可能采用这些建议。如果特别熟练了，那么就根据自己的习惯来编写即可。
💎1 命名规范
1、命名需要是具备语义性的单词，不能用数字、拼音，或者使用数字开头：
正确示范 ： wrap description title content
错误示范 : aaaa a1 $we 4tdds
2、命名需要多个单词连接的情况下，标记语言中可以使用 _ - 进行连接 不能直接单词拼接。
注意：书写风格必须统一，不容许出现 _ - 一起使用的情况。更推荐使用 - 这样更清晰。
正确示范 : header-nav content-left slide-bar
错误示范 : headernav slideBar ContentLeft
3、命名需要进行适当的缩写，单词连接层级不要超过4层
正确示范 : head-tit-ico
错误示范 : header-title-left-logo-icon
4、不容许通过1、2、3等序号进行命名
正确示范: content-product
错误示范: content1、content2
5、避免class与ID重名
6、id用于识别模块或一级结构区域且必须唯一。定义了ID名称，尽量不要改动
常用命名
| 头 | header | 内容 | content | 尾 | footer | 导航 | nav |
|---|---|---|---|---|---|---|---|
| 子导航 | subnav | 栏目 | column | 主体 | main | 新闻 | news |
| 版权 | copyright | 文章列表 | list | 加入 | joinus | 合作伙伴 | partner |
| 标志 | logo | 侧栏 | sidebar | 横幅 | banner | 状态 | status |
| 菜单 | menu | 子菜单 | submenu | 滚劢 | scroll | 搜索 | search |
| 标签页 | tab | 提示信息 | msg | 小技巧 | tips | 标题 | title |
| 指南 | guild | 服务 | service | 热点 | hot | 下载 | download |
| 注册 | regsiter | 登录条 | loginbar | 按钮 | btn | 投票 | vote |
| 注释 | note | 友情链接 | friend-link | 外套 | wrap | 面包屑 | bread-crumb |
| 当前的 | current | 购物车 | shop | 图标 | icon | 文本 | txt |
| 容器 | container | wrap |
💎2 CSS 书写
🌹2.1 空格规范
【强制】 选择器 与 { 之间必须包含空格。
示例： .selector { }
【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
示例：color: red;
🌹2.2 选择器规范
【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
/* 规范 */
#username input {}
.comment .avatar {}
/* 不规范 */
.page .header .login #username input {}
.comment div * {}
🌹2.3 属性规范
【强制】 属性定义必须另起一行。
/* 规范 */
.selector {
margin: 0;
padding: 0;
}
/* 不规范 */
.selector { margin: 0; padding: 0; }
【强制】 属性定义后必须以分号结尾。
/* 规范 */
.selector {
margin: 0;
}
/* 不规范 */
.selector {
margin: 0
}
🌹2.4 大小写规定
css虽然不区分大小写 按照惯例和规定 : 所有css文件中的代码都小写,
/* 规范 */
#username input {
text-align: center;
}
/* 不规范 */
#username input {
TEXT-ALIGN: center;
}
🌹2.5 CSS3 兼容前缀
如果使用 CSS3 的属性，如果有必要加入浏览器前缀，则按照
-webkit- / -moz- / -ms- / -o-的顺序进行添加，标准属性写在最后，并且属性名称要对齐，例如：
div.animation-demo {
-webkit-animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite;
-o-animation: mymove 5s infinite;
animation: mymove 5s infinite;
}
🌹2.6 CSS书写顺序
良好的CSS书写顺序是前端工程师需要遵守并维护的重要规范
1. 位置属性 display position float overflow z-index list-style clear等可以决定元素渲染位置或层级 以及能够影响其他元素渲染位置或层级的属性
2. 自身属性 width height margin padding border background line-height 等可以影响盒子自身展示的属性
3. 文本属性 color font- text- word- 等作用于文本的样式属性
4. 其他与新增属性 cursor zoom transform box-shadow 等新增属性
原理：
- 浏览器解读HTML是从上之下单行解析, 如果没有良好的书写顺序, 例如先解析了 width height 那预渲染的时候 就会从默认位置 (当前文档流左上角) 进行渲染
- 如果后续解析到了 位置属性 浏览器需要擦除之前 渲染好的模型 重新根据 渲染基准点(左上角)位置 和层级 进行重绘, 这样导致浏览器会重复解析同一个元素 造成不必要的重绘
- 良好的书写顺序是 BAT等一线互联网企业都遵守的CSS书写规范 他可以帮助团队成员协作的时候 迅速排查和后期维护
/*正确示范*/
.selector {
float: left;
width: 150px;
font-size: 12px;
}
/*错误示范*/
.selector {
font-size: 12px;
width: 150px;
float: left;
}
🌹2.7 链接伪类顺序
链接的样式请严格按照：a:link-> a:visited-> a:hover-> a:active（LV包hao）的顺序添加
🌹2.8 CSS复合写法与单例写法
如果对目标样式的子属性需求小于3时，进行单例写法，避免复合写法造成的computed浪费
当子属性需求大于等于3时，进行复合式写法，避免单例写法过于冗余和字节浪费
/*正确示范*/
div {
background-color: red;
margin: 20px;
}
/*错误示范*/
.selector {
background: red;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
🌹2.9 布局方式选择
文档流 > 盒子模型距离调整(margin+padding) > 浮动 > 定位
定位元素会脱标并且独立新开文档流层级，高度依赖定位会导致浏览器压力大，并且在后期维护中因为定位元素并不能跟随文档流进行流动，所以维护成本高。
实际开发中 能用文档流+盒子模型处理的布局 轻易不使用浮动 能用浮动处理的布局 不要使用定位 。 只有在最关键的时刻才使用定位进行布局调整。
🌹2.10 定位z-index取值范围
合理规划z-index的取值范围 避免和他人组件层级冲突，需要组内协商
| 公共头部导航 | 1999 - 2100 |
|---|---|
| banner与二维码等弹出层 | 999 - 1900 |
| 页面公共底部 | 1999 - 2100 |
| 页面公共组件 | -1 - 999 |
