frontend 思维导图模板_ProcessOn思维导图、流程图

变换、过渡动画、动画

变换

1.平移translate(x-value, y-value) // x轴和y轴平移距离

2.缩放scale(x-value, y-value) // x轴和y轴的放大倍数

3.rotate(90deg) // 旋转度数

过渡动画

transition 简写属性，用于在一个属性中设置四个过渡属性。 transition-property 规定应用过渡的 CSS 属性的名称。 transition-duration 定义过渡效果花费的时间。默认是 0。 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 transition-delay 规定过渡效果何时开始。默认是 0。

动画

@keyframes 规定动画。 animation 所有动画属性的简写属性。 animation-name 规定 @keyframes 动画的名称。  animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。  animation-timing-function 规定动画的速度曲线。默认是 "ease"。 animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 animation-delay 规定动画何时开始。默认是 0。 animation-iteration-count 规定动画被播放的次数。默认是 1。 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。

音频、视屏

子主题

DOM事件，绑定事件

获取DOM，操作DOM

常用html标签

图形标签

<img src=’”…”>   定义图像 <hr>                   水平线

表格标签

<table>…</table>   定义表格 <th>…</th>            定义表格中的表头单元格 <tr>…</tr>             定义表格中的行 <td>…</td>           定义表格中的单元

文本标签

<h1>...</h1>               标题字大小（h1~h6） ...                   粗体字 ...   粗体字(强调)  ...                      斜体字  ...              斜体字(强调) <center>…</center>   居中文本 <ul>…</ul>                 无序列表  <ol>…</ol>                 有序列表 <li>…</li>                       列表项目 <a href=”…”>…</a>    超链接                              定义文本字体尺寸、颜色、大小                                  下标                              上标                                  换行                                  段落

其它

<form>…</form>    定义供用户输入的 HTML 表单 <frame>                 定义框架集的窗口或框架  <div>...</div> ...

基本

<html>…</html>      定义 HTML 文档 <head>…</head>   文档的信息 <meta>                    HTML 文档的元信息 <title>…</title>        文档的标题 <link>                      文档与外部资源的关系 <style>…</style>    文档的样式信息 <body>…</body>   可见的页面内容                  注释

常用css选择器及其权重

第一级别：无优先条件的属性我们只要在属性后添加 !important 即可。这个属性可以覆盖此页面所有位置定义的同种元素样式。 第二级别：在元素标签内直接添加 style ，俗称内联样式。 第三级别：ID 选择器。例：#id{color:red;} 第四级别：类选择器，属性选择器或者伪类选择器。例：.one{color:blue;} 第五级别：元素选择器。例：div{color:yellow;} 第六级别：统配选择器。例：*{color:green;}

四个等级定义如下： 第一级：内联样式，例：style=""，它的权值为1000 第二级：ID选择器，例：#id，它的权值为100 第三级：class选择器，例：.one，它的权重为10 第四级：元素选择器，例：div,p,h1 ，它的权重为1

定位、浮动、flex弹性布局

定位

什么是定位

定位:将盒子定在某一个位置 ,所以定位也是在摆放盒子，按照定位的方式移动盒子

定位=定位模式+边偏移

定位模式

1、静态定位：选择器{ position: static; }

2、相对定位：选择器{ position: relative; }

3、绝对定位：选择器{ position: absolute; }

4、固定定位：选择器{ position: fixed; }

5、粘性定位：选择器{ position: sticky; }