Html5+CSS+Less

• 以上是html文件最基本的内容

• 用代码编辑器打开或者txt后缀文件打开

• 将后缀改为html，双击即可运行

• 注释代码如下，用包裹， 页面那里都可以填写

---

• 超文本标记头

• html标签：用来包裹全部文件元素

• head标签：用来包裹描述网页信息

• body标签：用来包裹页面内容

以上为一个html必须拥有的标签

• meta标签：用来描述页面信息，必须写在head标签里面

  https://juejin.cn/post/6844903543766253575

  1. 定义文档字符编码
  2. 编写页面作者，关键字，描述，版权
  3. 定义索引向导(搜索引擎爬虫)，渲染内核
  4. 移动端浏览器刘海，移动端适配
  5. 浏览器缓存
  6. 页面定时刷新

• title标签：浏览器tab内容

• link标签：外联资源，网页之外的加载资源
  1. 引入css资源
  2. 修改页签图标
  3. 预加载图片，视频资源

1、基础标签

1. 概念一

   块元素：拥有宽度，高度，无法于其他元素同行存在

   _{文字块元素(p,h1)不能包含块元素，否则会出现bug}

   行内元素：没有宽度，高度，如现在的字体，可以一行存在

   _{行内元素不能包含块元素，否则行内元素会变成块元素}

   行内快元素：有宽度，有高度，还能和其他元素一行存在

2. 概念二

   正常块元素盒(标准盒模型)

   拥有自身宽高，边框宽度，对边框外面其他元素的距离(margin)，对边框内部内容的距离(padding)

   内外边距

3. 元素标签

2、列表标签

有序列表ol：例如

1. 有序列表1…
2. 有序列表2…

无序列表ol：例如

• 无序列表1…
• 无序列表2…

级别列表dl, dt, dd

3、表格

4、表单

5、边框文字

6、输入框

7、下拉框

8、文本框

9、video和audio

备注：

js获取video元素后控制：如 元素.play()

• 控制播放：play();
• 控制暂停：pause();
• 控制音量变量：
• 控制进度变量：
• 播放速度变量：
• 播放器全屏/退出全屏：
  1. webkit:
  2. Firefox:
  3. W3C:

10、track

11、滚动

• behavior:alternate(晃动)&scroll(滚动)&slide(到边停)
• direction:四个方向
• height
• width
• 设置水平边距。
• 以像素或百分比值设置垂直边距。
• loop=‘数’（次数）
• （滚动长度，默认6）
• （滚动间隔，单位毫秒）

12、iframe

• 插入其他页面
• 跨域

13、样式标签

14、新标签

• ：定义页面独立的内容区域。

• ：定义页面的侧边栏内容。

• :规定独立的流内容（图像、图表、照片、代码等等）。

• :定义

  元素的标题

• :定义页脚，就是

• :定义页头，就是

• :高亮

• :进度条

• :定义导航，就是

• :任务进度条

• ：拼音注释

• :就是一个

---

标签写完了，给标签添加样式

1. 内敛写法

2. 在style标签里单独写

3. 写在.css后缀文件里面，用link标签引入使用

此时就会出现问题，多个div怎么分辨，就需要打上标记，用过滤器筛选处理

1. *通配符选择器：：匹配所有元素

2. 元素选择器：：选中所有div元素，其他元素也一样

3. 交集选择器：：选择 类名位one的p元素

4. 群组(并集)选择器： 多个过滤器一起使用，用逗号隔开

5. 后代选择器：：选中h1下面全部的em

6. *父子选择器：：选择ul下面的li，，可以准确筛选

7. 兄弟选择器：：选择E元素后面的第一个相邻的F元素

8. 兄弟们选择器：：选择E元素后面的所有相邻的F元素

9. *id选择器：：一个元素只能设置一个id，且id名不能重复

10. *class选择器：

11. *多个相同标签且相邻选择器—同一个父元素

14. 正向查询

15. 逆向查询

    案例：

16. *多个相同标签不相邻选择器—同一个父元素

    将child换成of-type即可，of-type完全可替代child

17. *伪类选择器

    1、：选择前

    2、：选择后

    3、：鼠标悬浮

    4、：通过父元素的hover效果控制子元素

    4、：鼠标点击

    5、：div为默认点击的效果

    6、{}：被激活的选择器

    7、：它或者它子节点获取焦点后选择器

    8、{}：除自己外的所有元素

    注：这是所有元素都能使用，不仅是a标签。

18. 锚点选中标签：

19. 伪类选择器

    1. ：可选中的input
    2. ：不可选中的input
    3. ：选则被点击的
    4. ：选择被选中的option或者文字
    5. ：选择第一个文字
    6. ：选择第一行文字

20. 属性选择器

    • 判断是否含有属性：
    • 判断属性是固定值：
    • 判断属性以固定值开头：
    • 判断属性以固定值结尾：
    • 判断属性包含固定值：

21. 权重，就是那个过滤器更厉害

    内联>style>外联

    内联>id选择器>class选择器>标签选择器>通配符选择器。

    1000>0100>0010>0001>0000

---

• 大小： (一般默认16px)

• 字形：

  外部引入字形

• 倾斜： (italic/oblique为倾斜，normal为默认正常)

• 加粗： (bold为加粗，normal为正常，或100到900整百调整)

• 大写字母小型：

• 复合：

• 颜色： (或 或 )

• 行间距：

• 间距：中文： 英文：

• 防止选取：；跟随浏览器|不可选取|可选取|单击选取

• unicode字体：

  字体名称英文名称uniCode编码宋体SimSun5B8B4F53微软雅黑Micosoft YaHel5FAE8F6F96C59ED1

• 居中对齐： (center为居中，left为左对齐，right为右对齐，justify为两端对齐)

• 垂直居中：

• 大小写： (uppercase为大写，lowercase为小写，capitalize为首大写，none为正常)

• 下划线： (underline为下划线，为上划线，line-line-through为删除线，none为正常)

• 缩进： (缩进，单位：1em = 1个字符，数值为负时隐藏)

• 省略：

  clip为不显示省略号,仅溢出隐藏；ellipsis为溢出且显示省略

• 文本阴影：

  水平 垂直 模糊度 阴影颜色

  多阴影设置：凹凸文字

white-space

• 默认值：
• 不换行(对换行符无效)：
• 保留代码换行空格，代码每行内容不换行：
• 保留空格换行：
• 文字前的空白合并：
• 继承父元素：

word-break

1. 粗暴换行：

   直接按顺序排列内容，超出部分直接换行

2. 智能换行：

   先尝试把内容放下一行，放不下时才换行

单行省略号

多行省略号

• 图片比字体高：图片设置浮动

• 线上文字(线上元素同理)：

• 形状： (disc默认，circle空心圆，square方)
• 图片形状：
• 形状位置： (outside在li外，inside在里)
• 清空样式：

• 合并边框为单边框：
• 间距：; (单值: 格间距，列间距 行间距)
• 无内容格隐藏： （隐藏/显示/继承）
• 格宽度分配： (自动/固定)

• 外边距：margin;
• 内边距：padding;
• 元素实际宽度 = width + padding + width
• 元素实际高度 = width + padding + height
• ; (只设置左margin，其他top, right, bottom, left)
• 上下左右都设置margin 为1px
• 上下设置1px, 左右设置2px
• 上1px 左右2px 下3px
• 上1px 右2px 下3px 左4px
• : 同maring
• : 上下0px，左右自动，实现水平居中(浮动元素无效)
• 行内元素尽量不要设置上下内外边距

• 宽度设置： (单位：px, %, 其他)

  1. 填充父元素宽度：

     行内块元素宽度填充元素，又能使用垂直居中

  2. 根据内容宽度变化：

     宽元素宽度由内容宽度撑开，但不浮动

• 高度设置： (单位：px, %, 其他)

• 边宽设置：

• 边框颜色：

• 边框样式： (值：solid(实线)，dashed(虚线)，dotted(点线)，double(双线))

• 取消边框：

• 边框复合设置： (宽度 样式 颜色)

• 单个设置： (其他：top, rigth, bottom, left)

• 单个复合设置：

• 单个取消：

• 边框弧度设置： (单位：px, %)

• 弧度多个设置：

  1个值是4个角， 2个值: 第一(左上)(右下), 第二(右上)(左下)

  3个值: 1(坐上), 2(右上)(左下), 3(右下), 4个值：四个角

• 单个边设置：

• 单个角设置：

• 相贴的两条边合并：

  表格table可以通过这个合并边框

• ：略

占据maring的位置，不会影响元素的布局位置

• 轮廓颜色：

• 轮廓样式：

  值描述none默认。定义无轮廓。dotted定义点状的轮廓。dashed定义虚线轮廓。solid定义实线轮廓。double定义双线轮廓。双线的宽度等同于 outline-width 的值。groove定义 3D 凹槽轮廓。此效果取决于 outline-color 值。ridge定义 3D 凸槽轮廓。此效果取决于 outline-color 值。inset定义 3D 凹边轮廓。此效果取决于 outline-color 值。outset定义 3D 凸边轮廓。此效果取决于 outline-color 值。inherit规定应该从父元素继承轮廓样式的设置。

• 轮廓宽度：

• 占位宽度：div实际渲染宽度，在页面渲染使用宽度
• width/height：设置的是盒子内容的宽/高
• 设置盒宽度：盒占位宽度 = margin + border + padding + 设置width
• 未设置宽度：盒占位宽度 = margin + border + padding + 内容宽度
• 高度同理

浮动由来：为了让图片或其他行内块元素和文字实现文字环绕效果

• 设置： （left为左浮动，right为右浮动）

• 效果1：没有设置宽度的元素: 宽度=内容宽+padding+border

• 效果2：会覆盖未浮动和绝对定位元素上面

• 效果3：浮动元素父元素未设高：父元素高=未浮动元素高累加，高度塌陷

• 解决3：高度塌陷解决：父元素设置：

• 清除浮动： (值：left/rigth/both)

  父元素的浮动子元素后面添加一个空元素，空元素css设置

• 解决图片和文字行高问题：图片设置：

• 颜色：

• 背景图片：

• 背景图片渲染：

• 背景图片位置：

  值1水平，值2垂直。单位：px, %。还可以为单词：

• 背景固定：

  值:

• 背景图片大小：

  一个值： 设置图片最长边宽度，等比例缩放，可以是100px；也可以是50% 收缩未图片本身的50%

  两个值：

  一个关键词：

  1. 图片等比例放大到填充满全部背景，放大多余的部分被裁剪掉。
  2. 图片等比例放大到填充背景，图片保持完整的在背景部分。

• 直接使用：

• 背景裁剪：，可以设置不包含padding的背景

  border-box，padding-box, content-box

• 复合使用：

• 多背景设置

  注：背景颜色必须在最后一个设置

• 运用：特殊技巧

• 其他：还有其他的背景属性设置，略

• 仅背景：
• 背景及内容： 值范围：[0, 1]
• 设置值 border颜色透明
• 设置 效果和 一样，占位隐藏。

box-shadow 的原理是：元素添加新的层（layer），这一层位于元素本身下，并且仅有阴影（没有内容）。它是一个半透明的，且可以调整大小及颜色的影子

• 效果：

  水平 垂直 模糊度 阴影大小 阴影颜色 内外阴影

• 多个配置：

  多个配置和其他多个配置顺序一样。

• 月牙特性：

• loading动画

  参考《html基础知识、核心技术与前沿案例》9.2.4章节

• 默认：
• 超出隐藏：
• 显示滚动条：
• 仅超出显示滚动条：
• 仅水平超出显示滚动：
• 仅垂直超出显示滚动：

1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度高度背景颜色啥的
2. ::-webkit-scrollbar-button 滚动条两端的按钮样式
3. ::-webkit-scrollbar-track 外层轨道
4. ::-webkit-scrollbar-track-piece 内层滚动槽
5. ::-webkit-scrollbar-thumb 滚动的滑块
6. ::-webkit-scrollbar-corner 边角
7. ::-webkit-resizer 定义右下角拖动块的样式

链接文档

链接文档2

• 相对定位：; (占位)

• 绝对定位： (不占位，类浮动)

• 固定定位： (不占位)

• 粘性定位：

• 取消定位：

• 定位元素层级：

  默认为1, 图层级别大于其他元素。可为负数

• 定位位置：

  通过设置上下左右位置调整定位位置

• 问题：父元素不设置定位，子元素设置绝对定位的参考系= 从父元素向上寻找，直到body元素。由元素设置定位，则以此定位元素为参考系，没有找到则以body元素为参考系。

• 建议在网上观看视频教程理解

• 水平垂直居中：

• 设置宽度

• inset简写

  inset可以简写上下左右。

  单值：表示设置四个值。双值：第一个上下，第二个左右。其他和margin一样

• 特别注意

  当给一个元素加上transform属性的时候，这个元素就会具有relative的特性,所以若一个元素的父元素拥有tranform属性，那么子元素在使用定位属性的时候要注意。

• 其他形状链接：
• 默认：
• 十字光标：
• 手指：
• 移动光标：
• 文字光标(input框)：
• loading等待：
• 帮助help：
• 不可选择：

• 分列数：

• 列之间距离：

• 列之间的线：

• 每列高度是否一杨：

  值：balance(默认不一样)，auto(一样)

• 列宽度：

  列宽度会与列数发生冲突

• 解释：就是或替他元素前后添加一个内容或者样式

• 值：before(盒前面)，after(盒后面)

• 使用案例(after同理)

• 使用场景：

  1. 需要文字左边加自定义图案，符号等等
  2. 需要加一定长度的边框
  3. 文字右边加图案，符号等等

• 标准盒：盒宽 = margin + border-width + padding + 盒内容width

• 标准盒块元素：

• 标准盒行内元素：

• 标准盒行内块元素：

• 怪异盒：盒内容width会将padding和margin和border包含在内

  设置：

  恢复标准盒：

1、设置

• 设置为弹性盒：
• 父元素设置弹性盒，子元素就称为灵活元素。

2、弹性盒样式

• 灵活元素主排列方向：

  值：row(左到右, 默认); row-reverse(右到左);

  值：columns(上到下); columns-reverse(下到上)

  影响: 灵活元素副排序方向不设置长度, 则默认填充100%

• 主排序方式：

  值：flex-start(从头开始, 默认); flex-end(从尾开始)

  值：center(居中); space-between(两端对齐); space-around(自动分配); space-evenly(均匀分布)

• 副排序方式：

  值：flex-start(从头开始, 默认); flex-end(从尾开始)

  值：center(居中); space-between(两端对齐); space-around(自动分配)

• 主轴换行：

  值：nowrap(不换行, 默认); wrap(自动换行);

  值：wrap-reverse(换行, 换行后反序)

  注意：灵活元素副排序方向需要设置长度

• 换行后副排序方式：

  值：flex-start(从头开始,); flex-end(从尾开始)

  值：center(居中) ; stretch(拉神填充, 默认); baseline(中心线对齐)

• 复合设置：;

  例：

3、灵活元素设置

• 某一项灵活元素单独主排序方式设置：

  值：auto(自动); flex-start(从头开始,); flex-end(从尾开始)

  值：center(居中) ; stretch(拉神填充, 默认); baseline(中心线对齐)

• 填充：

• 排序：

  设置灵活元素排列顺序，值为数字

4、弹性盒应用

• 在移动端大量应用，以配合移动端适配

• 宽度或高度填充

• 坑：填充元素内部再写子元素高100%，则无法让子元素滚动

  滚动需要给子元素固定高

像表格一样的，把页面进行布局。简化flex/栅格布局 计算。可以随意合并行和列

1、设置为网格布局

• 通过 设置为网格布局
• 此时当前元素的所以子元素就变成了网格元素

2、设置固定列宽，行高

已经知道，grid其实就是表格，所以表格的每列的宽度，每行的高度都是可以设置的

• 通过 设置列数，列宽。

  设置几个就是有几列的宽度被设置了，其他列宽度自动平分。

  如：设置3列宽度

• 通过设置行数，行高。

  同上

• 特殊值：

  1fr为一个比例占位

  混合使用：

• 副作用：

  固定的列宽和行高，超出不会自动换行

3、排列方式

• 通过 设置排序是行(左 > 右)/列(上 > 下)，默认column
• 排列方式为行时，
  1. 设置列宽有几列，就会有几列。不会超出设置列数
  2. 设置行高有几行，只要设置的那几行有指定行高，其他的会平均分配行高
• 排列方式为列时，同理

4、自适应列宽，行高

• 通过 设置列宽，可以设置多个值，但会自动排除超出的列
• 通过 设置行高，可以设置多个值，但会自动排除超出的行

5、最小最大值

• 可以通过设置最小最大

  此时行高最小为100px, 最大200px

6、子元素占位设置

• 通过定义子元素从那条列边开始

• 通过定义子元素从那条列边结束

  此时就可以得到一个占位2列的子元素

• 通过定义子元素从那条列边开始

• 通过定义子元素从那条列边结束

  原理同上

7、层级

• 重复的网格覆盖在一起了，就需要设置那个网格在上面。
• 通过设置每个网关的层级

8、间隔

• 通过：设置列间隔

• 通过：设置行间隔

• 通过设置间隔

  和margin、padding一样，设置多个值。规则也一样

9、复合：

可以通过直接复合设置，教程跳转连接

10、了解：

• 根据定义名称排序
• 已经不知道咋形容了

• 宽度自适应

  两边设宽度，中间设, 父设弹性盒

• 悬挂

  第一个灵活元素加效果如定位，但比定位好。

• 流式布局：略。

• 解释：查询设备屏幕大小，进行页面文字大小适配

• 设置：

• 示例：

• 其他：search(平板或电脑)，print(打印机)

max-width: 指的是设备的最大宽度

max-device-width：指的是浏览器的最大宽度

• 解释：更加动态的适应不同屏幕的大小下文字的大小

• 概念：设计像素 / 物理像素 = dpr

  1. 设计像素的dpr=3
  2. 设计像素的dpr=2
  3. 设计像素的dpr=2

• 和：相对于当前窗口的百分比 100vw为窗口的宽

• ：em是相对于父元素的一个文字大小，rem是相对于html

• 使用示例：如果当前为750px；（设计像素）

  1. 750的dpr = 2

  2. 750px / 2 = 375px (实际物理像素)

     也就是我们开发是，设计稿是750px的宽，我们设置是设置为375px

  3. 所以也得到 100vw = 375px

  4. 所以设置 html的font-size 为100px所占用的对应vw

     即 font-size = 26.67vw

  5. 此时就优化的算法

  6. 假如有个全屏750px的设计稿元素，设置的时候就可以设置 width = 3.75rem；

     整除100 * dpr就是我们设置的实际宽度了。

  7. 配合媒体查询，就完成了不同设备适配。

1、描述：

块级格式化上下文

2、作用：

• 形成独立的渲染区域
• 内部元素的渲染不会影响外界
• 如：子元素的margin-top会传递给父元素，影响外界。父元素添加overflow变成bfc，就消除了子元素margin-top的影响

1、bfc的触发规则

1.浮动的元素，浮动元素的父元素没有设置高度时，高度为0，需要清除浮动或添加overflow

2.绝对定位元素, position 是 absolute 或 fixed, 父元素没有相对定位，定位元素就会以其他元素定位

6.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

2、触发条件：

1.float的值不为none

2.overflow的值不为visible（副作用最小）

3.display的值为table-cell、tabble-caption和inline-block之一

4.position的值不为static或则releative中的任何一个

5.根元素：html

3、资料

圣杯

1. 圣杯简单总结
   • 首先是浮动，先设置浮动。
   • 给左右的浮动元素设置margit负数，左边左偏负100%，右边右偏负自己宽度
   • 然后父元素设置左右padding，所有子元素设置相对定位
   • 左右元素设置定位偏移负数，左边左偏负自己宽度，右边右偏负自己宽度

双飞燕

瀑布流布局：利用多列属性实现

4、作用效果：

• 浮动元素无法撑起父元素
• 不会浮动元素
• bfc解决高度塌陷

1. 从阿里icon图标库下载icon

2. 或将icon添加到项目

   • 将选中的icon添加到项目
   • 点击资源管理 => 我的项目 => 选中自己的项目
   • 点击下载到本地，解压下载文件
   • 把获取到的全部文件放在自己项目里面。自己找个文件夹重命名
   • 将其中的iconfont.css引入到项目

3. 注意的是，每个class名称前需要添加类目，否则不生效

这样就可以只设置父组件，子组件直接继承样式，减少代码量

• 可用样式：

• 不可用样式：

• 必填样式：

• 选填样式：

• 验证不通过样式：

• 验证通过样式：

• 混合使用：

• 文本框拖拽：

  值：none(禁止拖拽)，both(可以拖拽修改宽高)，

  值：horizontal(仅修改宽)， vertical(仅修改高)

---

用于获取标签属性值，如获取a标签的

用于设置宽度，如比100%少一，用函数进行计算控制

支持加减乘除算法

重复设置值

设置贝塞尔曲线用于控制动画

动态选取网站：https://cubic-bezier.com/#.08,.64,.97,.05

实现背景颜色渐变，css3渐变

实用网站：http://tools.jb51.net/code/css_generator

实现背景颜色渐变，css3渐变

实用网站：http://tools.jb51.net/code/css_generator

实用网站：http://tools.jb51.net/code/css3path

画面裁剪

作用一：绘制斜线

案例：重大日期，全屏添加灰色滤镜

• 默认值：

• 模糊度：

  默认1px，数值越大越模糊

• 亮暗：

  默认100，数值越小越暗，越大越亮

• 蒙层：

  默认100，数值越小蒙层越暗，越大越亮

• 灰度：

  默认0，数值越大，灰度颜色越灰

• 应用色相旋转：

  默认0，不是旋转页面，是颜色

• 反转输入：

  默认0

• 透明度：

  默认100%

• 饱和度：

  默认100%

• 换为深褐色：

  默认0%

• 多个属性设置，用空格隔开：

---

• 动画过度：

• 值1：all(全部属性)，width(如宽度单一属性)

• 值2：动画时间，从原状态 =》变化到 =》指定状态 ==需要的时间

• 值3：延迟时间，延迟变化的时间

• 值4：变化的速度：ease(渐慢), ease-in(加速), ease-out(减速),

  ease-in-out(先加后减)，linear(匀速)，贝塞尔曲线

• 常见使用案例： 设置2s动画

• 多个动画

1、线性渐变

通过css3函数实现

2、径向渐变

通过 css3函数实现

center：渐变中心（top left),或（15px 30px）

shape：circle 圆，ellipse 椭圆 ，

size:

closest-side;最近边；

closest-corner：最近角；

fathest-corner：最远角；

fathest-corner；最远边；

shape和size只能存在一个。

3、重复渐变

1、重复型线型渐变

兼容的和线型一样。

2、重复型径向渐变

3、两种不同背景颜色

4、特殊技巧

+ 实现边框花纹等。

参考：https://blog.csdn.net/weixin_33919950/article/details/88584263

参考示例：

特别注意

当给一个元素加上transform属性的时候，这个元素就会具有relative的特性,所以若一个元素的父元素拥有tranform属性，那么子元素在使用定位属性的时候要注意。

1、transform

translate(水平，垂直)；移动，根据自己原来的位置移动

%为单位时是自己的宽度%，可配合定位的中心放大使用；

translate-X（水平）；

translate-Y（垂直）；

scale（水平，垂直） 自身倍数缩放（默认中心放大）0是隐藏,没有了

scale-X（）

scale-Y（）

rotate(0deg) 旋转，单位度（deg）

默认中心旋转

rotate-X（）中心x轴旋转

rotate-Y（）中心y轴旋转

skew（x轴deg，y轴deg）倾斜（长方形变平行四边形）

transform-origin：（左右，上下）设置(旋转的)中心点

可设置单词也可设置数值

旋转后背面是否显示，是否占位：

2、transform的复合

3、div的变形

1、div变箭头

设置左边框和上边框，用transform：rotate（45deg），变成箭头

2、div变三角（transparent透明属性）

不设宽高，用边框宽度将div撑起来，给需要的方向的变上色，其他边设置透明属性：transparent；

4、动画使用

ie9以上才兼容

1、关键词

创建动画：

触发动画：

2、创建动画@keyframes

name必须写，用于调用

3、调用动画animation

animation-

，必写

动画的执行时间 ，必写

timing-function: linear; 过度速度 值同transition

延迟时间

执行次数：数字或infinite（无限循环）

direction：运动的规律

normal;正常

alterbnate；交替运行

alterbnate-reverse；反交替

fill-mode：动画完成后效果

none；默认

both/forword；动画完成后，保留最后在最后一帧画面。

backwords；动画完成后，回到起点

play-state：动画时的状态，与hover配合使用。

runing;运动

paused；暂停

4、复合使用

动画名称，动画时间，动画速度，动画延迟，动画次数，动画规律，动画完成后

5、步进动画

指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：

• start：表示直接开始。
• end：默认值，表示戛然而止。
• steps用于替换动画时间

动画分解为4步，直接从第一步开始。

5、注意事项

• animation动画是根据元素的宽高进行计算绘制，行内元素没有宽度和高度，无法执行动画

例：

1、景深（近大远小）perspective

与3D一起使用才能出效果

1、父元素设

2、子元素设

2、景深中心点

perspective-origin

默认为50%；

3、3D空间定义

必须写，不写不出效果

4、3d位移

只改z轴，其他同理

改变三个轴。

5、3d旋转

（x， y， z）为旋转中心点，a为旋转的角度。

6、放缩

使用插件。这就是一个css文集，可以下载下来使用。

文档网站

文件链接：https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

1. 可以打开链接，然后复制代码到自己创建的。然后引入使用
2. 也可以直接通过link标签的src属性，直接链接这个文件。

使用方式：

• animate_animated必须添加，和使用icon一样。
• 第二个class是文档上的
• 两个都写好后，这个元素每次创建的时候就可以看到动画效果
• 动态绑定css，就可以完成动画

---

环境：需要安装nodejs

安装命令：，进行全局(您随意)安装

使用：

此时就可以将less文件转换位css文件进行使用

• 和一样语法使用
• 不同，子元素可以写在父元素内部，如

&：表示父元素

---

elementUi：https://element.eleme.cn/#/zh-CN
iview：https://www.iviewui.com/docs/introduce
antDesignUi：https://ant-design.gitee.io/index-cn
taroUi：https://taro-ui.jd.com/#/
NutUI：https://nutui.jd.com/#/
uni-ui：https://hellouniapp.dcloud.net.cn/pages/component/view/view
vuetify：https://vuetifyjs.com/zh-Hans/

---

使用nginx进行简单部署

1. 下载nginx：http://nginx.org/en/download.html

2. 选择的版本下载

3. 解压下载文件，将文件夹放在纯英文路径下

4. 进入解压的文件

5. 将静态资源文件夹，(包含，html，css，less，js，图片等等)，放入当前文件夹

6. vscode打开

7. 找到配置，模板如下

8. 可以多个配置，注意端口号不要被占用

---

腾讯大厂的样式初始化，尽量使不同浏览器显示样式大体一致

建议根据：https://guide.aotu.io/index.html 指定初始化样式

---

老版本浏览器会出现底部缝隙，主要是行内块元素，所有图片会有底部缝隙

1. 图片转块元素
2. 图片基线对齐：或

1. 设置属性

2. 同时还有给包裹文字的块元素里面添加一个行内块原素

3. 行内块原素还需要添加paddingleft设置100%

效果一:

效果二：

• 产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的
• 解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete=“off”
• 解决方案2：input:-webkit-autofill { background-color: transparent; }

• 原因：行内块元素之间 换行或空格分割的情况下 会出现
• 非行内块元素，设置inline-block也会有水平间隙
• 可以借助消除垂直间隙
• 可以在父级元素加子元素设置字体大小消除间隙

perspectivevisible