前端学习笔记（二）：前端高级用法与移动web开发

前端学习笔记（二）：前端高级用法与移动web开发

1. 字体图标

1. 使用字体图标技巧实现网页中简洁的图标效果,可以灵活的修改样式1，体积小，兼容性高，字体图标库：Iconfont：https://www.iconfont.cn/
2. 使用方法：（1）首先打开网站，选择素材库，选择想用的图标点击购物车，选择添加项目，然后在项目下点击下载本地，更改字体图标的css样式的时候记得把css里面的路径也进行修改
   （2）head标签里添加下属代码，href为刚刚下载的压缩包中iconfont.css路径：
   
   （3）在行内标签中调用两个类名即可：
   
   第二个类名在下载的压缩包下的demo_index.html 里面：
   
   
3. 若要修改iconfont属性，最好在.iconfont类型，或者级别比其高的类下.
4. 上传自己的icon图标的步骤，首先得到设计师里的svg格式图标，然后：
   （1）上传 → 上传SVG图标
   （2）浏览本地图标 → 去除颜色提交
   （3）加入购物车 →添加至项目 → 下载使用
   
5. 也可以引入css的样式之后，直接在demo.html中调用上面的类名即可：
   

2. 平面转换

2.1 位移

1. 位移:使用translate实现元素位移效果,transform: translate(水平移动距离, 垂直移动距离),取值及注意事项如下：技巧2的XY是大写。
   
2. 位移通常配合着过渡的属性，过渡属性写道该移动的盒子里面，过渡后的transform的变化写在属性上.如：father:hover .son{transform: translateY(100px); }（鼠标移到父盒子上时使自盒子产生移动）
3. 浮动宽度不够会被挤下来，这个时候你要看清的是父盒子的大小，不是浏览器窗口的大小。
4. 鼠标移入的时候给盒子的前伪元素添加移动，可以连着写，如：.box:hover::before

2.2 旋转与缩放

5. 旋转必须配合着过渡使用，旋转的写法：transform: rotate(角度);注意单位是deg（角度），取值为正, 则顺时针旋转，取值为负, 则逆时针旋转。
6. 改变旋转的中心点，改变谁的中心点就给谁加，transform-origin: 原点水平位置 原点垂直位置;，取值如下：
   
7. 如果即设计旋转有涉及位移，那么使用transfrom的复合属性，注意必须使用复合属性，不然会产生覆盖的问题**，旋转会改变网页元素的坐标轴向（即右正下正），因此，必须先写位移，再写旋转。**
   
8. 缩放：如果只是更改宽高，没办法实现从中心点开始方法，要实现从中心点开始放大缩小，需要使用缩放，transform: scale(x轴缩放倍数, y轴缩放倍数);
   
9. 一定要注意transform的层叠性，尤其是想同时使用多个效果的时候不要分开写，而且，如果转换前后都有transform也要注意转换前后的覆盖问题。
10. 图片设置宽度百分之百，就是要设置成和包含其的盒子一样宽。

3.渐变

1. 渐变是多个颜色逐渐变化的视觉效果，写法如下：
   
2. 一般企业中常用的渐变通常是从半透明黑色的写法，写法如下:
   
3. 行内标签（常指链接a）放一个有宽高的div盒子，或者其它块级元素，也能撑大，会显示出来

4. 空间（3D）转换（不常用）

1. z轴的正值指向自己，空间位移，书写方法如下：
   
2. 透视效果要想实现z轴的转换效果，必须要配合着透视去做，近大远小，具体如下：注意，是给想要转换盒子的父级添加透视效果。单位px透视不改变盒子的的大小，就是视觉上变大变小。
   
3. 空间旋转，z即围绕着图片的中心点旋转具体写法如下，值的单位为deg，注意一个旋转，一个位移，两个的单位是不一样的：
   
   4.判断旋转的是正值还是负值，使用物理上左手法则，手指沿着旋转的方向，大拇指指向即旋转的正负。如下，x和z轴的旋转也要配合着透视属性使用：
   
4. 使用transform-style: preserve-3d呈现立体图形，注意是给元素的父盒子添加transform-style: preserve-3d；基本实现：首先定位将两个盒子定位到一起，然后调用translateZ位移设置盒子的远近效果，最后调用 rotate设置旋转效果即可。
5. 加入一个盒子旋转为平面，那么想将这个平面向上移动，注意是在translateZ轴进行变化，因为我们要实现正对着这个平面的正面，其就像是向前了，后者就按照旋转前的样子去考虑。
6. rotateZ的效果和平面中rotate的作用相同
7. 空间缩放写法，了解即可，不会很常用：
   

5. 动画

1. 过渡通常用在现2个状态间的变化过程，而动画可以实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停），动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面，构成动画的最小单元：帧或动画帧。
2. 使用，（1）首先定义动画：左边两个状态，右边多个状态（百分比指的是时间占比的关系）：
   
   （2）然后使用动画，谁想用动画就给谁加下面的属性代码，可以看出，动画可以不配合hover使用，比过渡简单：重读次数如果为infinite代表是无限循环，执行完毕时的状态默认值是backwards（动画停留在最初 的状态），常用的是forwards（动画停留在结束状态），动画方向常用alternate，代表双向的都有动画效果。
   
3. animation也可以分开属性来写，总结如下：
   
4. 多个动画效果时候，不同的动画之间用逗号隔开。动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码
5. 子盒子的宽度可以超过父盒子的宽度，方便背景设计，后面再overflow：hidden一下1就行了。
6. 注意区分好要做的是无缝动画还是逐帧动画，不要随意使用steps
7. 注意背景no-repeat如果想要和url一起写是放在backgroud复合属性里面的，不要放在backgroud-image单个属性里面。
8. 如果想要背景图覆盖整个body，除了body设置height：100%，注意给html也要设置高度100%，因为网页中html的高度默认是不跟浏览器一样大的。
9. 定位后的图片设置margin是相对于定位后的位置进行变化动着的动画设置属性进行多考虑位移的属性。

6. 移动端特点

1. PC屏幕大，网页固定版心，手机移动屏幕小， 网页宽度多数为100%。
2. 手机屏幕尺寸指的是屏幕对角线的长度，一般用英寸来度量
3. 分辨率分类（1）物理分辨率是生产屏幕时就固定的，它是不可被改变的（2）逻辑分辨率是由软件（驱动）决定的，写代码按照逻辑分辨率来写
4. 常用的移动端开发的分辨率为iPhone6/7/8：
   
5. PC端不用去考虑分辨率的事情，但是移动端通常要把网页宽度和设备宽度(分辨率)相同。这个时候需要meta标签，再生成html骨架的时候就自动生成了，只需要检查一下，这样可以制作适配不同设备宽度的移动端网页：
   
6. 在实际工作中，设计师为了使图片更清晰，通常按照屏幕尺寸（物理尺寸）出设计稿，即iPhone6/7/8的750*1334，成为二倍图，但是我按照逻辑尺寸开发，因为需要再测量尺寸的时候把设计稿转为二倍图后进行测量。
7. 百分比布局， 也叫流式布局，宽度自适应，高度固定，老旧的写法，现在都是宽高都是自适应的了

7. Flex 布局

1. Flex布局/弹性布局：是一种浏览器提倡的布局模型、布局网页更简单、灵活、避免浮动脱标的问题，在移动网页的开发中可以大胆的使用，但是在PC端的网页的开发中要注意兼容性的问题，查兼容性的网站为：https://caniuse.com/，因此要提前和项目经理沟通好需求。

2. flex布局需要给父级（必须是亲爹）添加display: flex;设置完之后可以给盒子设置宽高会生效。
   视觉效果: 子级一行排列/水平排列，默认主轴在水平, 弹性盒子都是沿着主轴排列
   布局的构成如下图所示：
   

3. 使用justify-content调节元素在主轴（主轴不一定是水平，只是默认值是水平）的对齐方式，**也是加给父级元素上（广义父级）的，**其取值如下，常用的是后四个，注意：（1）justify-content: space-evenly;所有的间距都相等，（2）justify-content: space-around;视觉效果: 子级之间的距离是父级两头距离的2倍（3）justify-content: space-between;间距在弹性盒子(子级)之间
   

4. 使用align-items调节元素在侧轴的对齐方式
   （1）align-items（添加到弹性容器）
   （2）align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到该弹性盒子的属性上）
   具体属性及只如下：stretch拉伸,默认值(现有状态,测试的时候去掉子级的高度，否则无效)
   

5. 不给子集高度，则拉伸属性拉的和父级一样高， 如果没有拉伸也没给高度就是内容的高度，宽度类似

6. 如果flex作为属性则表示占用父盒子剩余尺寸的份数，取值为数值(整数)，给自己添加

7. 使用flex-direction改变元素排列方向，（修改后要立马确定主轴的方向）Flex布局模型中，弹性盒子默认沿着水平方向排列，取值如下：如果修改主轴为column，那么侧轴就自动变为水平方向。
   

8. flex布局默认显示一行，如果父级盒子宽度不够，会压缩子盒子的宽度，要想保持宽度不变，使用换行，给父盒子增加 **flex-wrap: wrap;**属性，换行后高度不够，会溢出来

9. 换行后，调节行的对齐方式用align-content，取值和justify-content相同，只是一个控制列与列之间的，一个是控制行与行的

项目练习

1. 开发项目时候lib文件夹可以用来存放如iconfont文件
2. line-height如果设置错了可能会影响盒子的位置。注意看清父盒子的高度，不要过大或者过小。
3. 已经设置了上下居中就不要在设置padding-top
4. 给元素设置justify-content: space-between;使得盒子能两边对齐后，仍然可以设置margin-left和margin-right实现左右微调。
5. 设置了flex=1即把剩下的都给该元素，此时如果布局好，没必要在写主轴对齐方式
6. 后续可能会进行更改的数值，最好单独加上标签，便于后续代码进行调整。
7. 如果是PC端的设计稿宽度给了3000多，则就要思考是不是给的也是二部图，这个时候就考虑把图片转为二部图。
8. 外面的大盒子可以不加高度，用子盒子撑开高度，平时也最好用撑开盒子，这样方便后续动态开发此时可以设置min-height属性设置盒子没有内容时候的最小高度。
9. css属性并集写的时候记得中间加空格！！！，不然选择器出问题
10. 设置了display：flex，弹性盒子加宽加高是可以生效的。
11. 标题不够省略，给父盒子设置 flex: 1; width: 0;，然后给h标签设置h5 {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

8. 移动适配（rem）

8.1 rem

1. 移动适配：屏幕宽度不同，网页元素尺寸不同（等比缩放）px单位是绝对单位
   百分比布局特点宽度自适应，高度固定，这两个都不能完成移动适配
2. 方法一：使用rem单位设置网页元素的尺寸
   （1）相对单位
   （2）rem单位是相对于HTML标签的字号计算结果
   （3）1rem = 1HTML字号大小（HTML标签又称为网页的根标签）
3. 要想rem实现移动适配，配合媒体查询使用，（注意这里的宽度就是视口的大小，就是逻辑分辨率）具体用法如下（要想测试把电脑显示百分比改为100%，不然不是整数不生效）：
   
4. 在工作中，目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
5. 根据设计稿图片尺寸，查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度），rem单位的尺寸 = px单位数值 / 基准根字号
6. 在实际的工作中，**直接在body标签结束前使用flexible.js配合rem实现在不同宽度的设备中的移动适配，**不用写其它，就是单位要用rem（实现效果就是根据5来的，十分之一），网页元素尺寸等比缩放效果,此时电脑显示百分比的影响都没有了，对于网页开发不同的浏览器视口宽度也能适用。

8.2 less

1. Less是一个CSS预处理器, Less文件后缀是.less，扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。同时需要配合Easy Less这个vscode插件使用。
2. 注释 // 注释内容 （单行注释，只能在less文件中用，转为css的时候不存在） /* 注释内容 */
3. 加、减、乘直接书写计算表达式，除法需要添加 小括号 或 . （less现存高版本的规定，低版本无） 表达式存在多个单位以第一个单位为准
4. 后代选择器的less写法如下所示：&符号也可以用来书写并集选择器。
   
5. 可以使用变量同一快捷的更改属性，如下定义变量：@变量名: 值; 使用变量：CSS属性：@变量名;
   
6. 导入文件使用导入: @import “文件路径”; 注意中间加空格，而且要以分号结尾，如果引入的是less文件，则可以省略.less后缀。
7. 设置less文件的导出路径：
   
8. 想要单个控制导出的代码，在第一行使用下述的代码：开头必须双引斜杠，无分号
   
   假如别的less文件引入了该less文件，则这个less文件没必要导出，代码为在less文件第一行添加: // out: false

项目练习

1. 补，注意，设计浏览器窗口的小图标用下述代码，href为图标路径。
   
2. 改字体图标的大小用font-size！！！不要去设置宽高
3. 两个选择器 中间没有空格，代表交集选择器，即必须同时具备两个类名才生效。可用于大部相同个别属性不同标签的切换。
4. 移动端没必要写鼠标划过（：hover）的代码
5. 给字体图标设置样式，直接用其规定好的类名iconfont，不要去用其他的，免得产生权重问题不生效。
6. 如果想要使用插件的时候，点击对应插件的扩展设置，然后去设置里面的root Font Size为十分之一的视口宽度，如下，设置完之后记得重启vscode：
   
7. 盒子水平居中最好侧轴居中，盒子里面的文字水平居中可以设置行高。
8. 字体图标在书写的时候最好用 i 标签，不用担心样式问题，在基础样式中都以进行的清除处理
9. 子绝父相的时候注意要给父盒子添加高度，不然就以屏幕为基准了
10. z-index这个属性不仅可以给css样式加，也可以给盒子加，让其显示在最前面。
11. display：flex后如果一行放不下可能会将盒子进行压缩，解决办法：使用flex布局的换行显示，或者其中一个固定宽度，另一个flex：1类似于这样的做法。

9. 移动适配（vw / vh)

1. vw和vh 相对单位，相对视口的尺寸（即逻辑尺寸）计算结果vw：viewport width ； 1vw = 1/100视口宽度 ； vh：viewport height； 1vh = 1/100视口高度。rem是相对于视口宽度的十分之一（这样说的前提是按照工作中的规范来写，具体见第八小节）。
2. vh和vw注意，宽和高都能用，不是说只能宽用vw，高用vh
3. vw vh最好不要混着用，因为如果某两个手机宽一样，高不一样，这样会导致最后生成的盒子比例会发生变化。

10. 响应式布局

1. 响应式布局，能够根据设备宽度的变化，设置差异化样式，常用写法如下：min-width，即大于等于该尺寸生效 max-width即小于等于改尺寸生效
   
2. 不同的分支情况可以考虑代码的重叠性，因此min-width（从小到大写）
   max-width（从大到小写）
3. 媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。总结如下：
   
4. 可以使用link配合媒体查询，使得不同的状态下不同的样式表生效，举例如下，注意media里面的小括号不能漏了：
   
5. 现有的电商网站响应式布局通常会进行隐藏，使用媒体查询，设置display：none

11. BootStrap

1. BootStrap提供一个响应式布局的解决框架，里面封装了js和css，字体图标等，中文官网: https://www.bootcss.com/
2. 先下载，在官网，选择生产环境下的下载如下：
   
3. BootStrap3默认将网页分成12等份，各个尺寸划分如下，其中*号代表所占的列数：
   
4. container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中，但是 container类自带内间距15px，所以里面的内容不会贴着盒子，要想贴着盒子，再加一个div 的row类自带间距-15px，或者重写container里面的属性，使其能够覆盖。
5. .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
6. 使用bootstrap添加属性时候，一般都要有个基本属性，如规定表格的样式的时候要先有一个table的类名。
7. bootstrap字体图标使用步骤：其它和正常字体图标一样。
   
8. bootstrap插件使用的时候要先引入js的样式如下，注意，必须先写jquery.js,因为下面的会用到上面的，一般引入min的js，引入不是min的也没有影响。
   
9. 项目中，引入了bootstrap的样式文件后就不需要再引入基本初始化的样式文件了，因为里面包含了，其次，引入css的时候习惯先引入bootstrap的css文件，在引入自己的css文件。
10. img里面的height：auto代表高度随宽度等比例缩放。
11. 修改框架里面的css标签，如果是再网页检查元素那里，就从外面一个一个地向里面检查。
12. ！！！复制类名的时候不要加 . 点 ！！！
13. 对于部分控件效果不满意，可以选择定制去修改其默认的样式。
14. 对于栅格布局的盒子，如果想要中间加距离，不能设置margin什么的，因为bootstrap是按照width的百分比布局，要想实现间隔效果，之间在div里加入所需内容宽高即可，因为其有默认的padding会实现撑开的效果。
15. 企业站或者内容较少的网站适合全部都改为响应式。电商站通常是pc和移动端两个网站开发。
16. bootstrap.css 和 boostrap.min.css 的区别就是：前者是未压缩的，后者是压缩过的。boostrap.min.css也是完整的库，只不过通过工具压缩，令相同的代码所占空间更小，从而提升web性能，减少宽带的压力，然而这是以文件的可读性为代价的。