基础知识
1. html:超文本标记语言
2. 网页组成: html + css + js
3. W3C: 万维网联盟，中立的公益性阻止，主要负责指定WEB的标准
4. 命名规则: ① 名字由数字、字母、下划线构成、不能以数字开头；②由对应内容的英文组成，语义化； ③驼峰命名
5. HTNL语法：<开始标签>内容</结束标签>；例：`<b>...</b>`
6. 带属性的标签语法：<标签 属性='属性值'>...</结束标签>; 例`<font color = 'red'>...</font>`
常用标签
1.常用标签<h1></h1>到<h6></h6>;特点：文字大小依次变小，默认加粗，强调程度依次降低
2.段落：<p></p>
3.换行<br>
4.水平线<hr>
文本标签
1.加粗<b></b>,<strong></strong>
2.倾斜<em></em>,<i></i>
3.变大<big></big>
4.变小<small></small>
注意：浏览器最小字体12px，不能比这个小
5.上标<sup></sup>
6.下标<sub></sub>
7.特殊符号：大空格  小空格 版权© 商标®
列表
1.有序列表
<ol>
<li></li>
</ol>
2.无序列表
<ul>
<li></li>
</ul>
3.自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
注意：1.li外面必须被ul和ol包裹 2.ol和ul里面只能有li 3.li里面可以有任何元素
图片
<img src='图片地址' alt='替代文本' width='宽度' height='高'>
路径
- 绝对路径：从盘符或者协议出发得到的路径，路径是唯一的
- 相对路径：相当于当前文件得到的路径
- 同级：./ 或 直呼其名
- 上级：../
- /谁
超链接
定义：从一个位置跳转到另一个位置
<a href = '跳转地址' target = '_blank / _self'><>
_blank:新窗口打开；_self:当前窗口打开(默认值)
布局标签
页面排版中使用到的标签 <div></div> ; 一行内容中有特殊样式就用<span></span>
表格
<table border = '边框的粗细' cellspacing = '0' cellpaddding = '内容和边框的距离'>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格合并的规则：rowspan 合并行 ； colspan 合并列
1.实现一个基本表格
2.判断跨行还是跨列，给最左上的单元个对应的属性，属性值为占据的单元格数量。
3.保存看错误，然后给对应多余的单元格删除，从后往前删。
表单
在页面中负责数据采集功能的部分
<form action = '数据提交的地址' method = 'get / post'>
表单域
表单按钮
</form>
表单域
<input type = 'text / password / radio / checkbox' name = '' placeholder = '提示文字'>
text:文本输入框
password:密码输入框
radio:单选，同一组单选的name属性值要一样
checkbox:多选
表单按钮
<button type = 'submit / reset / button'></button>
submit:提交
reset:重置
button:普通按钮
CSS：层叠样式表
CSS语法
选择器{
属性:属性值;
属性:属性值;
}
CSS的三种引入方式
1.内联式：<div style = '属性:属性值;'><> (强烈不推荐使用，代码繁杂，不利用后期维护)
2.内部式：在head标签里添加style标签，在style标签里写样式
<head>
<style>
选择器{
属性:属性值;
属性:属性值;
}
</style>
</head>
3.外链式：①新建一个以.css为后缀的css文件；②在head标签里添加一个link标签，在href属性里引入css文件的路径
CSS选择器
1.通配符-选中所有的标签 *{}
2.标签选择器 - 选中所有对应的标签。 标签名{}
3.类选择器 - 选中所有对应类名的标签 .类名{}
4.ID选择器 - 选中所有对应ID名的标签 #id名{}
注意：ID名是唯一的，不可重复；；类名可以是多个；一般给网页的大盒子设置id名
5.后代选择器：e > f 选中e的儿子
e f 选中e的后代f
6.伪类选择器
e:hover{} 鼠标悬停在e身上，给e设置样式
e:hover f{} 鼠标悬停在e身上，给后代f设置样式
优先级的判断规则(面试题)
权重：!important > 行内样式 > id > 类 > 标签 > * > 继承 > 默认
权重值：行内样式 - 1000； id - 100； 类 - 10； 标签 - 1；
计算选择器的权重之和，和越大越优先，如果权重一样，后者覆盖前者
继承(面试题)
概念：具有上下级关系的元素之间，上级元素的样式被下级元素拥有，就是继承
只有文本和列表相关的属性可以被继承
盒子模型(面试题)
概念：是一种思维模式，主要用于布局
组成：尺寸 + 边框 + 内边距 + 外边距
尺寸：宽，高 ； 行级元素不能设置宽高：sapn，a
边框：设置四边的边框 border：*px 线形 颜色;
设置指定方向的边框 border-方向:*px 线形 颜色;
线形：solid 实线 dashed 虚线
方向：top botton left right
内边距:盒子边框和他里面的内容之间的间隔
设置指定方向的内边距 padding-方向:*px;(值不能为负数)
padding:*px; 表示四个方向的内边距一样
padding:*px *px; 表示上下和左右
padding:*px *px *px; 表示上 左右 下
padding:*px *px *px *px;表示上下左右
padding会撑大盒子，在设置的时候注意减掉设置的宽高
外边距：盒子边框和盒子之外的元素、内容之间的间隔
margin-方向:*px;
(同padding)
细节说明
元素在不同的浏览器默认会有不一样的内外边距，所以需要清除内外边距的差异
*{
padding:0;
margin:0;
}
盒子水平居中
margin:0 auto;
浮动
是一种布局属性，主要用于实现一行多列效果和图文环绕效果
语法: float:left / right / none;
a的默认样式优先级高于继承下来的样式
margin的bug
1.父随子动(粘连问题)--只存在垂直方向
解决方案：1.用内边距是实现(记得修改高度)
2.给父元素添加边框
3.给父元素设置overflow:hidden;
2.塌陷问题
解决方案：在一个兄弟元素身上设置足够的间隔
文本属性
1.文本颜色 color: 颜色单词 / 16进制 / raga(R,G,B,0-1)
2.文字大小 font-size:*px / *em / *rem;
em是相当于父元素的文字大小的倍数
rem是相当于根元素(html)的文字大小的倍数
3.字体类型 font-family:'字体类型1','字体类型2';
4.文字粗细 font-weight:bold / 700 / normal / 400;
bold、700 是加粗
normal、400 是正常
5.文字样式 font-style: italic (倾斜)/ oblique(倾斜) / normal;
6.文本修饰线 text-decoration:none / overline / underline / line-thorugh
overline:上划线
underline:下划线
line-thorugh:删除线
7.行高 line-height: *px;
单行文本：垂直居中于指定大小的盒子
多行文本调整行间距
8.文本水平对齐方式 text-align: left / right / center / justify (两端对齐，多行才有用);
注意：行级元素不能使用该属性 span ， a
9.文本缩进 text-indent：*px / 2em;
注意：行级元素不能使用该属性
列表相关的属性
去掉列表前面的黑点 list-style: none;
背景相关的属性
背景颜色 background-color: 颜色;
背景图片 background-image: url(图片路径);
背景平铺 background-repeat: no-repeat;
背景图起点 background-position: x y; (单位px,也可以是方向值)
背景图固定 background-attachment: fixed;
复合属性
background: 颜色,图片路径,平铺,起点; (属性值不分先后)
常用命名盒子的名字
首页 index 导航 nav 轮播 banner 页头 header 页脚 footer 版心 container
单行文本溢出显示省略号(面试题)
1.设置宽度
2.强制不换行 white-space: nowrap;
3.超出隐藏 overflow: hidden;
4.溢出标识为省略号 text-overflow: ellipsis;
换行设置
white-space: nowrap / pre;
pre 会保留空格和换行
nowrap 强制不换行
超出设置
overflow: visible(可见的-默认值) / hidden(隐藏) / auto(自动显示滚动条);
溢出的标识
text-overflow: ellipsis(省略号) / clip(裁剪);
垂直对齐
vertical-align: top / middle / bottom / baseline(基线); => 只有行内块元素可以使用
应用场景:
1.图片3px问题
2.表单元素垂直对齐(给input设置)
3.表格内容垂直对齐
元素的分类(面试题)
1.块级元素：独占一行，是一个完整的盒子，可以设置宽高等
2.行级元素：有多宽占据多宽，不是一个完整的盒子，不可以设置宽高，垂直方向的内外边距
3.行内块元素：同时拥有块级元素和行级元素的特点
4.可变元素
非常规分类
置换元素：浏览器要解析标签和属性才能决定显示什么内容。如：inupt img button
非置换元素
元素嵌套规则
1.块级元素里面可以有任何元素，行级元素里只能由行级元素
2.a标签里可以有块级元素
3.ul/ol 里面只能有li，li外面只能有ul/ol
4.p标签里只能有行级元素
元素类型的转换
display: inline(行内元素) / block(块) / inline-block(行内块) / none(隐藏);
图片格式
gif 动图
svg 矢量图
png 带透明格式的图
jpg 可以提高或者降低缩放级别的图，会填充透明为白色
定位
将元素放在指定的位置上，特指position
语法：position: 定位方式;
left: *px; 或 right: *px;
top: *px; 或 bottom: *px;
定位方式
1.static 静态定位：元素默认自带的定位方式
2.fixed 固定定位：基于浏览器当前屏进行定位，不会随着内容滚动而滚动
3.relative 相对定位：基于元素本身的位置，会占据原来的位置
4.absolute 绝对定位：基于最近的被设置非静态定位的上级元素进行定位，如果都没有的就基于浏览器第一屏进行定位。(会随着内容滚动而滚动)
常用场景：子绝父相
盒子完全居中(面试题)
第一种：
position: fixed;
left:50%;
margin-left:负的宽度的一半;
top:50%;
margin-top:负的高度的一半;
第二种：
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
元素在z轴的堆叠层次
z-index:数字;
说明：元素默认的值为0，值越大越靠上，可正可负，该属性要生效，元素必须有设置非静态定位。
锚点连接
<div id = 'id名'></div>
<a href = '#要跳转区域的id名'></a>
透明度
opacity: 0-1;
filter: alpha(opacity = 0-100); => 针对低版本的浏览器
宽高自适应
宽高自适应：能根据屏幕大小、设备类型、分辨率等，自动调整元素，以适应得到一个比较正常的效果
宽度自适应：1.不设置宽度；2.设置百分比；3.设置最大最小宽度：min-width:*px; max-width:*px;
pc端所有整屏盒子都应该有一个min-width,属性值为版心盒子的宽度
高度自适应：1.不设置高度：如果子元素浮动，会脱离文档流，导致元素高度塌陷
2.设置百分比
注意：如果需要实现一屏页面，需要设置
html,body{
height:100%;
}
3.设置最大最小宽度
min-height: *px;
max-height: *px;
清除浮动带来的影响--解决高度塌陷(面试题)
方案1：给浮动的父元素设置overflow: hidden;
方案2：给浮动元素最后面添加一个兄弟div，取类名clear，设置样式 .clear{clear:both;}
注意：该元素身上不能有任何其他的样式
方案3(推荐使用)：1.给浮动元素的父亲添加类名clearfix
2.设置样式
.clearfix:after{
display: block;
content: '';
clear: both;
height: 0;
}
伪元素
e:after{content:"..."}在e元素的内容之后插入
e:before{content:"..."}在e元素的内容之前插入
伪元素和伪类的区别(面试题)
概念上：伪类是一种临时状态，只有状态触发的时候生效。伪元素是一个假的元素，虚拟的dom节点
表示上：伪类使用单冒号；伪元素使用双冒号
:after ::after 都是伪元素，版本不同而已
多种显示与隐藏的区别
visibility: hidden / visible;占据原来的位置，不可以触摸点击
display: none / block; 不占据原来的位置
opacity:0-1;占据原位置，可以触摸点击
表格的标签和属性
属性：1.双线边框之间的间隔 border-spacing: *px;
2.表格细边框 border-collapse:collapse; 如果要实现真正的细边框，需要给td设置边框
3.表格单元格均分宽度：table-layout:fixed; 必须给表格设置宽度才可以生效
标签
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
注意table和tr不是父子关系
表单
<fieldset> => 表单字段集
<legend></legend> => 字段集标题
</fieldset>
label标签--改善用户鼠标体验
<input id = 'id名'>
①<label for = '对应选项的id名'></label>
②<label><input> 关联的内容</label>
下拉框
<select>
<option value = ''></option>
</select>
默认提交value的值，没有就提交内容
option身上的属性 selected
BFC
BFC：是一个独立的区域，区域与区域之间不会互相影响----格式化上下文
触发/创建BFC的情况
1.浮动
2.定位值为absolute和fixed
3.overflow属性不为visible的时候
4.display的值为inline-block / flex / inline-flex
应用场景：
1.margin的粘连问题
2.清除浮动
3.两列的自适应布局
左边固定，右边自适应：左边设置宽度，左浮动；右边不设置宽度，设置overflow:hidden;
兼容性
兼容性：同一个页面在不同的浏览器或者版本中效果不一致
处理兼容性问题的方式：CSS3添加私有前缀(面试题)
代表性浏览器 浏览器内核 前缀
欧朋 presto -o-
IE trident -ms-
火狐 gecko -moz-
谷歌、safari webkit -webkit-
常见的兼容性问题
1.图片3px问题
- 给图片设置vertical-align:top;
- 给图片设置dispaly:block;
2.图片与图片在水平方向上有间隔
- 给图片设置浮动
- 让图片与图片的代码之间没有任何空白，换行
3.图片外面有连接，低版本浏览器会有边框
- 给图片设置 border: none;
4.图片png24格式，在IE6里面不透明
- 保存为png8 / gif 格式
5.表单元素垂直方向上没有对齐(一般是input和button)
- 给元素设置 vertical-align:top
- 给元素设置浮动
6.鼠标形状为手型的时候，高版本不认识hand
- cursor: hand; 低版本
- cursor: pointer; 高版本
7.margin的问题
- 粘连问题
- 塌陷问题
精灵图：雪碧图 - sprites
步骤：1.设置一个指定大小的盒子
2.将精灵图设置为盒子的背景图
3.通过background-position调整背景图的起始位置
优点：1.减少请求，提高性能
2.减少文件数量，降低命名难度
3.减少内层占用
缺点：步骤繁琐，增删图标麻烦
盒子模型的模式--标准模式和怪异模式(面试题)
概念：默认情况下有文档声明就是标准模式，没有在低版本浏览器就是怪异模式
语法：box-sizing:border-box(怪异模式) / content-box(标准模式);
区别：元素实际占据的宽高计算方式不一样
- 标准模式：实际占据的宽度 = width + border + padding + margin
- 怪异模式：实际占据的宽度 = width + margin
H5新增的标签
标签语义化：标签有含义，有意义，见名知意，提倡用正确的标签描述内容
优点：方便SEO ，代码具有可读性，方便更新和维护
结构化标签
页头 header
页脚 footer
主题 main
侧栏 aside
文章 article
独立的区域 section
导航 nav
其他标签
1.图文组
<figure>
<figcaption>标题</figcaption>
</figure>
2.高亮 <mark></mark>
3.标题组 <hgroup></hgroup>
4.对话框 <dialog open></dialog>
5.画布 <canvas></canvas>
音频
<audio src = '音频的路径' controls auntrols loop></audio>
controls 控件
auntrols 自动播放
loop 循环
视频
<video src = '视频路径' controls poster = '海报路径' width = '' height = ''>
<sourse src = '视频路径'>
</video>
注意：如果有sourse标签，video身上就不需要src属性
媒体文件的引入标签
<embed src = '图片、视频、音频的路径'>
HTML5新增的属性和标签
1.<form novalidate autocomplete = 'on / off'></form>
novalidate 设置表单不验证
autocomplete 设置是否打开自动补全功能，默认打开
2.<input autofocus required maxlength = '数值' minlength = '数值' mutiple disable readonly checked>
- autofocus 自动获取焦点
- required 必填
- maxlength 最大长度
- minlength 最小长度
- mutiple 设置可以多选
- disable 按钮禁用
- readonly 只读--用于做权限
- checked 默认选中该选项
软件开发思想
渐进增强：先针对低版本浏览器完成页面，以保证基本的功能实现。然后针对高版本浏览器添加更多酷炫的效果和功能。向后看
优雅降级：先针对高版本浏览器完成所有功能，然后针对低版本浏览器降低需求，保证基本功能能够实现。向以前看
CSS3新增的属性和选择器
属性
1.文字阴影：
text-shadow:x方向的偏移 y方向的偏移 模糊程度 阴影的颜色;
例：text-shadow:10px 10px 10px red;
注意：模糊程度*px，不能为负数
2.盒子阴影：
box-shadow:x方向的偏移 y方向的偏移 模糊程度 阴影的颜色 inset;
例：box-shadow:10px 10px 10px red;
没有inset就是外阴影，有就是内阴影
3.圆角半径：
border-radius:*px / *%;
注意：如果要实现正圆，必须宽高一致
4.背景的大小：
background-size:宽度 高度;
自定义字体
@font-size{
font-famliy:'自定义字体的名字';
src:url(字体文件ttf的路径);
}
使用的时候，给对应的元素设置 font-famliy:'自定义字体的名字';
选择器
属性选择器
e[f] 选中有f属性的元素e
e[f='v'] 选中f属性的属性值为v的元素e
e[f^='v'] 选中f属性的属性值为以v开头的元素e
e[f$='v'] 选中f属性的属性值为以v结尾的元素e
结构伪类选择器
1.选中第一个元素e e:first-child
2.选中最后一个元素e e:last-child
3.选中第n个元素e e:nth-child(n)
4.选中倒数第n个元素e e:nth-last-child(n)
5.选中唯一的元素e e:only-child
注意：小括号中的n是乘法因子，可以是数字、英文、数字表达式
注意：child系列强调的是该元素在父元素的所有儿子中的排序！
:nth-child(n) 权重为10
UI状态伪类选择器
1.被选中的元素e e:checked
2.可用的元素e e:enabled
3.不可用的元素e e:disabled
否定伪类选择器
e:not(f) 选中e元素中，不满足条件的f的剩余元素
目标伪类选择器
e:target 当e是目标的时候，实现的样式
渐变过渡动画
渐变
背景渐变
1.线性渐变
设置普通的线性渐变 background:linear-gradient(颜色1,颜色2);
设置渐变方向 background:linear-gradient(to 方向,颜色1,颜色2);
设置对角渐变 background:linear-gradient(to 方向1 方向2,颜色1,颜色2);
设置渐变的角度 background:linear-gradient(*deg,颜色1,颜色2);
设置渐变的比例 background:linear-gradient(颜色1 *%,颜色2 *%);
[如果两个颜色间没有过度变化，将比例设置成一样即可]
2.径向渐变
设置普通径向渐变 background:radial-gradient(颜色1,颜色2);
设置渐变比例 background:radial-gradient(颜色1 *%,颜色2 *%);
设置渐变形状 background:radial-gradient(circle / ellipse 颜色1,颜色2);
圆 椭圆
3.重复渐变
设置线性渐变的重复 background:repeating-linear-gradient(颜色1 *%,颜色2 *%);
设置径向渐变的重复 background:repeating-radial-gradient(颜色1 *%,颜色2 *%);
过渡
过度：让变化慢慢进行--必须是可以数值化的东西
语法：transition:属性名1 变化时间 延迟时间 变化曲线,属性名2 变化时间 延迟时间 变化曲线;
例：transition:width 2s 2s linear,height 3s 2s linear;
变化曲线：linear是匀速变化
动画
1.定义动画
@keyframes 动画名{
0%{
开始状态的样式
}
*%{
各个中间状态的样式
}
100%{
结束状态的样式
}
}
2.执行动画
给想要有对应动画的选择器里面写：
animation:动画名 动画执行时间 延迟的时间 执行的次数 执行的方向 变化曲线;
例：animation:run 3s 3s infinite alternate linear;
执行的次数：数字 或者 infinite - 无限循环
执行方向：alternate - 来回移动
变化曲线：linear 匀速变化
动画执行动态
animation-play-state:running 执行 / paused 暂停;
弹性盒子
概念：是一种新的布局方式，让元素有能力控制子元素的排列方式。
语法：将元素设置成弹性盒子
display:flex / inline-flex;
设置成弹性盒子以后，该元素被叫做容器，该元素的子元素叫做项目
容器身上的属性
1.设置主轴的方向
flex-direction:row / column / row-reverse / column-reverse;
row:一行排列（默认值）
column：竖着排列
reverse:反向(极少用)
2.设置项目在主轴方向的排列方式
justify-content:flex-start / center / flex-end / space-between / space-evenly / space-around;
space-between:间隔在之间
space-evenly:均分间隔
space-around:间隔在周围
3.设置项目是否换行
flex-wrap:nowrap 不换行 / wrap 换行 / wrap-reverse;
4.设置主轴方向和是否换行【复合属性-意义不大】
flex-flow:flex-direction的值 flex-wrap的值；
5.设置项目在侧轴上的对齐方式
align-items:stretch / flex-start / center / flex-end / baseline;
stretch（默认值）- 拉伸铺满
6.设置多根轴线的排列方式【单根轴线无效】
align-content:stretch / flex-start / center / flex-end / space-between / space-evenly / space-around;
注意：必须要有换行才可以生效
项目身上的属性
1.设置项目是否缩小
flex-shrink:数字;
默认为1，会缩小
设置为0，不缩小
其他数字代表缩小的份数
2.设置项目是否放大
flex-grow:数字;
默认为0，不放大
设置为1，会放大
3.项目放缩尺寸复合属性
flex:flex-grow flex-shrink flex-basis;【默认是：0 1 auto】
设置flex:1;的意思是 1 1 auto；
设置flex:1;可以让该项目实现自适应
4.设置项目单独的对齐方式
align-self:flex-start / flex-end / center;
设置项目的基准尺寸【了解 = width】
设置项目的排序【了解】
order:数字;
默认为0，可以为负数
grid网格布局
概念：是一种新的布局方式，让元素有能力控制子元素的排列方式。
语法：将元素设置成网格布局 display:gird / inline-gird;
设置成网格布局以后，该元素被叫做容器，该元素的子元素叫做项目
容器身上的属性
/*1固定值*/
grid-template-rows: 200px 200px 200px ; // 设置几行 属性值有几个就代表有几行
grid-template-columns: 200px 200px 200px; // 设置几列 属性值有几个就代表有几列
/*2百分比*/
grid-template-rows: 33.3% 33.3% 33.4% ;
grid-template-columns: 33 .3% 33.3% 33.4% ;
/* 3 repeat */
grid-template-rows: repeat(3,33.33%); // repeat(几行,33.33%)
grid-template-coLumns: repeat(3,33.33%);
/* 4. repeate autofill */
grid-tempLate-rows: repeat(auto-fill,33.33%);
grid-template-columns: repeat (auto-fill,33.33%);
grid-template-rows: 100px 200px auto;
grid-template-coLumns: 100px 200px autq;
控制间距
gird-row-gap:20px; // 行间距
gird-column-gap:20px; // 列间距
gird-gap:20px 20px; // 复合写法
新版可以去掉 gird ，写成下面这种
row-gap:20px;
column- gap:20px;
gap:20px 20px;
前提是项目比容器小才能生效
justify-content: center; // 水平居中
al ign- content: center; // 垂直居中
合并
grid-template-areas : 'a e e'
'd e e'
'g h i'
项目身上的属性
grid-area:e; 就可以实现合并 要配合grid-template-areas 才能实现合并
实现合并：
grid- coLumn:2/4;
grid-row:1/3;
移动端开发
移动端基础
- 移动端开发环境：手机浏览器
- 调试移动网页代码：谷歌浏览器手机模式
视口
概念：就是浏览器显示页面内容的屏幕区域，视口可以分布局视口、视觉视口和理想视口
布局视口：兼容早期PC端
视觉视口
理想视口：保证PC端和移动端等比列放缩
** 语法：<meta name="viewport" content="width=device-width, initial-scale=1.0"> **
注意：移动端开发网页时，一定要添加
高倍屏
像素
分辨率
物理像素/设备像素
逻辑像素/css像素
物理像素比 = 物理像素 / 逻辑像素
移动端开发技术方案
- pc端一套代码 www.jd.com
移动端一套代码 m.jd.com
- 响应式
开发一套代码，能运行在pc端，也能兼容运行在移动端
响应式常用的3种布局
小：600px以下。大部分手机适用。
语法：@media screen and (max-width:600px){}
大：大于1200px。大部分PC适用。
@media screen and (min-width:1200px){}
中：除去小和大就是中间的
移动端开发适配
在不同的手机上，显示效果一样（字体、宽高不变）
当屏幕改变时，改变根元素html字体大小，rem作为单位的元素值随之变化
如何让根元素html值变化
- 用javascript代码监听屏幕改变
如果改变，根据当前屏幕大小设置html元素字体fontsize值
移动端开发适配的步骤
1. 按照正常设计稿尺寸开发 单位px
2. 引入根据屏幕尺寸改变根元素字体大小的js文件 rem.js
3. 安装vscode插件 插件名为: px to rem
作用: 将px值转为rem单位值
使用: 3.1 设置 rem与px比值
默认值: 1rem = 16px
1rem = 100px
alt + s
3.2 改变css中px单位rem单位
alt + z
2D&3D转换
2D
移动 transform：translate(*px); 默认X轴移动
transform：translate(*px,*px);
旋转 transform:rotate(*deg); 默认Z轴旋转 顺时针方向
transform:rotateX(*deg);定义X轴方向旋转
transform:rotateY(*deg);定义Y轴方向旋转
注意：可以为负数，逆时针方向
缩放 transform:scale(*); 默认X轴，Y轴同时缩放
transform:scaleX(*); X轴缩放
transform:scaleY(*); Y轴缩放
transform:scale(*,*); 定义X轴，Y轴缩放
3D
移动：transform:translateZ(*px); 定义Z轴的移动
transform:translate3d(10px,20px,30px); 定义3D平移移动
透视：perspective:*px; 值越小，图像越大
注意：必须添加父元素身上
旋转：transform:rotate(*deg); 默认Z轴旋转 顺时针方向
transform:rotateX(*deg);定义X轴方向旋转
transform:rotateY(*deg);定义Y轴方向旋转
改变旋转的基点
transform-origin:X Y Z;
x、y的值可以为数值，也可以是方向
z只能是数值
3D呈现 transform-style:flat \ preservr-3d;
flat:默认值 ，子元素不开启3d呈现
preservr-3d ：开启
注意：也是给父元素添加
