摘要： 视口 ：viewport，就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS、 Android基本都将这个视口分辨率设置为 阅读全文

摘要： 浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。 1. 私有前缀  moz ：代表 firefox 浏览器私有属性  ms ：代表 ie 浏览器私有属性  webkit ：代表 safari、chrome 私有属性  o ：代表 Opera 私有属性 2. 提倡的写法 mo 阅读全文

摘要： 1. 呈现 1. ☆☆☆☆☆ 控制子元素是否开启三维立体环境 代表子元素不开启 立体空间，默认的 子元素开启立体空间 代码写给父级，但是影响的是子盒子 2. 代码演示 阅读全文

摘要： 旋转 3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转 1. 语法 沿着 x 轴正方向旋转 45 度 沿着 y 轴正方向旋转 45 度 沿着 z 轴正方向旋转 45 度 沿着自定义轴旋转 45 deg 为角度 2. 代码案例 3. 左手准则 左手的手拇指指向 x 阅读全文

摘要： 【经试验，Z轴的位移距离大于或等于perspective时，元素不显示。】 1. 知识点讲解 如果想要网页产生 效果，需要 透视 (理解成 物体投影在 平面上) 实际上模仿人类的视觉位置，可视为安排一直眼睛去看 透视，也称为 视距 ，所谓的视距，就是人的眼睛到屏幕的距离 【 透视越小，物体看的越大， 阅读全文

摘要： 一、 认识 转换 1. 的特点 近大远小 物体后面遮挡不可见 2. 三维坐标系 x 轴：水平向右 注意：x 轴右边是正值，左边是负值 y 轴：垂直向下 注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 注意：往外边的是正值，往里面的是负值 二、 转换 1. 转换知识要点 位移： 【transla 阅读全文

该文被密码保护。 阅读全文

摘要： 转换综合写法以及顺序问题 1. 知识要点 同时使用多个转换，其格式为 顺序会影响到转换的效果(先旋转会改变坐标轴方向) 但我们同时有位置或者其他属性的时候，要将 位移放到最前面 2. 代码演示 阅读全文

摘要： 1. 的作用 用来控制元素的放大与缩小 2. 语法 3. 知识要点 注意，x 与 y 之间使用逗号进行分隔 : 宽高都放大一倍，相当于没有放大 : 宽和高都放大了二倍 : 如果只写了一个参数，第二个参数就和第一个参数一致 : 缩小 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且 不影响其 阅读全文

摘要： transform-origin 基础语法 transform-origin: x y; 重要知识点 注意后面的参数 x 和 y 用空格隔开 x、 y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center 还可以给 x y 设置像素，或者方位名词(top、bottom 阅读全文

摘要： 1. rotate 旋转 旋转指的是让元素在二维平面内顺时针或者逆时针旋转 2. 语法、使用步骤： （1）给元素添加转换属性 （2）属性值为 ， 如 顺时针方向旋转 30度 3. 重点知识点 里面跟度数，单位是 角度为正时，顺时针，角度为负时，逆时针 默认旋转的中心点是元素的中心点 4. 代码演示 阅读全文

摘要： ```html Document 123 哈哈哈 ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191223154057942.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3BvbH 阅读全文

摘要： / 移动盒子的位置： 定位、盒子的外边距、2d转换移动 / 1. 转换 转换是改变标签在二维平面上的位置和形状 移动： 【位移】 旋转： 缩放： 2. 语法 x 就是 x 轴上水平移动 y 就是 y 轴上水平移动 3. 重点知识点 的移动主要是指 水平、垂直方向上的移动 最大的优点就是 不影响其他元 阅读全文

摘要： 1. 伪元素选择器 【伪元素：不是真正的元素，但是具有元素的一些特性。】 【 伪类：不是真正的类，但是具有元素的一些特性。】 【类数组：不是真正的数组，但是具有数组的一些特性。】 ::before 在 元素内部的前面 插入内容。 【一个冒号:，也可以，但是两个冒号是最正式的写法。】 ::after 阅读全文

摘要： 如果页面中有两个这样的div结构，则两个第一个<span>我是span</span>，都是pink <div> <p>我是一个p标签</p> <span>我是span</span> <br> <span>我是span</span> <br> <span>我是span</span> <br> </di 阅读全文

摘要： 1. 什么是 在 的基础上拓展、新增的样式 2. 发展现状 移动端支持优于 端 目前还草案，在不断改进中 相对 ，应用非常广泛 3. 属性选择器列表 4.属性选择器代码演示 阅读全文

摘要： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191222173530426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3BvbHVuemk=,size_16,color_FFFFFF,t... 阅读全文

摘要： 移动端的截图： 阅读全文

摘要： 多媒体视频标签 1. video 视频标签 目前支持三种格式 2. 语法格式 3. video 参数 muted：静静的 poster：招贴画; 海报 4. video 代码演示 5. 多媒体标签总结 音频标签与视频标签使用基本一致 多媒体标签在不同浏览器下情况不同，存在兼容性问题 谷歌浏览器把音频 阅读全文

摘要： 多媒体音频标签audio 1. 多媒体标签有两个，分别是 音频 视频 2. 标签说明 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放， 但是：播放格式是有限的 3. audio 支持的音频格式 audio 目前支持三种格式 4. audio 的参数 5、audio 代码演示 阅读全文