flex布局

CSS3中提出的布局方案，在开发移动端项目时，基本上都是flex布局。 目的：让块级元素可以并排显示 和浮动的作用差不多。

概念：

容器：如果给一个盒子加上了display:flex; 那么这个盒子就是一个容器项目：容器的直接子元素就是项目主轴：项目默认在容器中是水平排列的，这个排列方向就是主轴 主轴开始点：项目排列默认就是从轴的开始点开始排列 主轴的结束点：交叉轴：和主轴垂直的方向，就是交叉轴

容器相关的属性(6个)：

flex-direction: 设置主轴的方向 用的比较多

row 默认值 水平向右 row-reverse 水平向左 column 垂直向下 column-reverse 垂直向上

flex-wrap: 当项目足够多（前提）时，项目是否换行

nowrap 默认值 不换行 wrap 换行

flex-flow: 是上面两个属性的复合属性

flex-flow:flex-direction flex-wrap flex-flow:column wrap;

justify-content（主轴）: 处理主轴的富余空间（当项目的宽度没有容器的宽度大时）

flex-start: 默认值 富余空间在主轴的结束点 flex-end: 富余空间在主轴的起点 center: 富余空间在主轴的两侧 space-between: 富余空间在项目和项目之间 space-around: 富余空间环绕在项目两侧

align-items: 处理交叉轴的富余空间（处理在交叉轴的摆放位置）

flex-start: 默认值 富余空间在交叉轴的结束点 flex-end: 富余空间在交叉轴的起点 center: 富余空间在交叉轴的两侧

align-content: 当有多根主轴，设置多根主轴的位置关系，当有多根主轴时，处理交叉轴上的富余空间

flex-start: 不是默认值 有多根主轴，富余空间在交叉轴的结束点 flex-end: 有多根主轴，富余空间在交叉轴的起点 center: 有多根主轴，富余空间在交叉轴的两侧 space-between: 有多根主轴，富余空间在多根主轴多间 space-around: 有多根主轴，富余空间环绕在多根主轴之间

项目相关的属性(6个)：

order: 设置项目在主轴的排列的顺序，属性值是一个数字，数字越小，在主轴上越靠前

默认值是：0

flex-grow: grow 生长的意思 用的不多

如果有富余空间，可以让项目生长，说白了，就是让项目伸展。 设置生长的比例，属性值是一个数字，如下： .son1{ flex-grow: 1; } .son2{ flex-grow: 2; } .son3{ flex-grow: 4; } 表示把富余空间分成7份，老大占1份，老二占2份，老三占4份

flex-shrink: shrink 压缩的意思 了解

如果项目总宽度大于容器的宽度，设置每一个项目的压缩比例

flex-basis: 设置项目在主轴上占据的大小 如果也设置了宽度，那么会心flex-basis为准

flex:是上面三个属性的复合属性 用的也比较多

flex:flex-grow flex-shrink flex-basis 默认值： flex: 0 1 auto auto表示：设置了宽度，auto是设置的宽度； 没设置宽度，auto就是内容的宽度 flex：最后两个属性值可以不写 最常见的写法：flex:1; 等价于：flex-grow:1;富裕空间均分。

align-self:单独设置某一个项目在交叉轴上的位置

flex-start flex-end center

移动端页面： flex布局+百分比布局 rem适配

使用新的盒子模型：box-sizing: border-box; 意味着，在移动端写的width代表在页面上占据的宽度，不是内容的宽度。

less使用

less简介

使用传统的CSS写样式问题：

嵌套层次太深 选择器太长 分块不清晰对于一些常用的CSS属性，需要重复的手写

为了解决上面的问题，有人提出了更加优雅写CSS的方案，目标：

样式可以分块写 更加清晰样式可以抽离出变量样式可以定义函数

这样做的目的：大大提升我们写样式的速度，提高开发效率，降低维护成本。 也就是说，像写JS一样，写CSS。 浏览器只认识CSS，我们可以按照我们的想法写好样式，编译成传统的CSS，让浏览器认识。

开发者按照一种规范，编写样式，然后进行编译，生成传统的CSS让浏览器解析。主流的三个规范：

lesssassstyle

less使用

官网：http://lesscss.cn/

使用less方式一： 基本上没人用

<style type="text/less"> .box1{ width: 250px; height: 250px; border: 1px solid red; } </style> <script src="./js/less.js"></script>

使用less方式二： less也是CSS，需要单独写到一个文件中 注意：走http协议

<link rel="stylesheet/less" type="text/css" href="index.less"> <script src="./js/less.js"></script>

使用less方式三： 下载一个叫考拉的工具 这个工具，可以实时把less编译成css，这个工具，会把你的less代码编译成css，在页面中引入的还是css，不是Less。

使用less方式四：常用 vscode中有一个插件，可以把less编译成css 插件叫：easy less。有时需要手动保存，会将less文件生成css文件

less语法

// 注释： 单行注释 不在生成的css文件中显示/* 多行注释 */ 在生成的css中显示

less文件生成的css文件会自动去掉空白行

可以把属性值设置一个变量 也可以把属性名设置成一个变量 用的时候：@{bc}: 还可以把选择器设置成一个变量

@hoverColor:skyblue; 属性值`在这里插入代码片` @bc:background-color; 属性名 @b:.box1; p{ color: red; &:hover{ &表示p color: @hoverColor; } } @{bc}: green; @{b}{ }

混合：mixins

最基本的混合

.cricle{ text-align: center; border: 2px solid red; border-radius: 50%; } 使用： /* circle1的样式 */ .circle1{ width: 200px; height: 200px; line-height: 200px; .cricle; // 最基本的混合 &:hover{ color: @hoverColor; } }

带参数的混合：

.cricle(@radius){ text-align: center; border: 2px solid red; border-radius: @radius; } 使用： /* circle1的样式 */ .circle1{ width: 200px; height: 200px; line-height: 200px; .cricle(20%); // 最基本的混合 &:hover{ color: @hoverColor; } } /* circle2的样式 */ .circle2{ width: 100px; height: 100px; line-height: 100px; .cricle(50%); // 最基本的混合 &:hover{ color: @hoverColor; } }

带参数的混合（给参数设置默认值）：

.cricle(@radius:50%){ text-align: center; border: 2px solid red; border-radius: @radius; } .cricle(@bw:10px, @radius:50%) .cricle(5px,20%); 传递参数 .cricle; 使用默认值

@arguments 定义混合 ：将共同的部分抽离出去定义成函数

.boxBorder(@widht,@style,@color){ // border:@widht @style @color; border:@arguments; } // border: 1px solid red; .boxBorder(5px,solid,red);

App

软件类型：

b/s b:brower s:server 项目必须借助浏览器才可以运行。web前端工程师 c/s c:client(客户端) s:server 客户端：手机上安装的软件，电脑上安装的软件都是客户端 项目写完后，就是一个软件

移动app app: application 应用 手机端

webapp web应用nativeapp: 原生应用hybridapp: webapp和nativeapp混合

视口

像素：

物理像素：说白了就是电脑或手机上的发光点，也叫分辩率逻辑像素：在写CSS代码时，100px px是像素 这里的100px和物理屏幕是没有关系的 也就是说，在写CSS代码，我们并不关注电脑的屏幕的物理像素。

在电脑端，一个逻辑像素等于一个物理像素 **设备独立像素：**设备独立像素是人为规定死

记住：写移动端网页需要加设置视口的代码

<meta name="viewport" content="width = device-width">

device-width 手机的设备独立像素 标准设置视口的代码：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

把一个电脑端的网页放到手机里面分两步： 1、把一个网页放到一个虚拟容器中 这个虚拟容器宽度也是定死的 大多数设备它的虚拟容器宽度是980px，如果一个网页宽度是980px 放到这个虚拟容器中正好放下，如果一个网页宽度大于980px 那么放到这个虚拟容器中会出现水平的滚动条，如果一个网页宽度小于980px 肯定会放到 肯定不会出现水平的滚动条 2、把这个虚拟容器放到手机里面 以iphone6为例 把你980px放到375px中，它会把这个虚拟容器进行压缩（虚拟容器是压缩后放到手机里面）

如果不想压缩，你需要修改这个虚拟容器的宽度，这个虚拟容器有一个专业的名字，叫视口。

新的盒子模型： box-sizing:border-box; 改变了width的意义： 这个width就代表了盒子在页面上占据宽度，不是指盒子内容的宽度了

适配

使用px+媒体查询 媒体查询是用来判断你是大屏还是小屏 20px 18px 不推荐。 使用px做单位，通过放大缩小浏览器，会让px变形。

@media only screen and (width: 320px){ div{ font-size: 32px; } } @media only screen and (width: 375px){ div{ font-size: 37.5px; } } @media only screen and (width: 414px){ div{ font-size: 41.4px; } }

em: 表示一个汉字的宽度 2em 表示两个汉字的宽度 使用em没有参考点，参考点只能是父元素的fontsize，参考点不唯一 rem: root 根 html标签 rem就是一个新的单位 html标签就一样，就是想对于html的fontsize来说的，也就是说参考点唯一了。

在写移动端网页时，单位尽量使用rem，不要使用em

1em = 父元素中的font-size的大小（多少px）。 1rem = 根元素的font-size的大小（多少px）。 这个根元素是html标签

使用rem+媒体查询来适配 目标：把750的设计图还原成网页。

第一步：从美工手中拿到设计稿。假设是750px宽 当然进公司后，它的设计搞的宽度可能不是750px。第二步：严格按设计稿中的尺寸 把谷歌浏览器的调成responsive 宽度设置成和设计稿一样的宽度。手机宽度也是750px。第三步：像素大厨打开这个设计稿，使用像素大厨量出来的是px。以px为单位，一般把html的fontsize设置成100px,这样，你量出来的px，只需要除以100就是rem单位。 把页面还原出来。其实html的fontsize写多少无所谓，vscode中有一个插件，直接可以把px转rem。 插件叫cssrem，可以设置中搜索rootFontSize通过媒体查询从750的屏迁移到其它尺寸的屏 最适配的最关键一步 本质：设置不同的屏的html的fontsize。 在750的屏中：html的font-size:100px; 在375的屏中：html的font-size:50px; 那么也就是说，只需要知道你一个屏的设备独立像素，就能计算出这个屏的html的fontsize

也就是说，只要知道手机的设备独立像素，就可以适配，我们可以通过JS来获取一个手机的设备独立像素。可以通过JS把750屏的页面，迁移到其它屏上面。

<script> window.onload = function(){ let fs = document.documentElement.clientWidth * 100 / 750; document.querySelector("html").style.fontSize = fs+"px"; } </script>

相关概念

DPR

物理像素：分辩率 发光点 逻辑像素：css中的像素单位 设备独立像素：手机出厂 直接规定死 DPR：物理分辩率 / 设备独立像素

以iphone6为例： 物理像素：750 * 1334 设备独立像素：375 DPR：这个比值是2，大于等于2，高清屏 如果CSS中 1px1px 的盒子 需要 2px2px的 发光点 来表示

设置视口的原因：

把一个电脑端的网页放到手机端，分两步，第一步，会把这个网页放到虚拟容器中，这个虚拟容器，叫视口，这个视口的默认宽度是980px。如果你的网页是980px，好么正好放到这个视口中，第二步，需要把这个视口通过缩放后放到手机中，手机默认有设备独立像素是比较小的，视口就会被压缩，导致页面中内容都会被压缩，如果不想压缩，不能让视口那么大，需要设置成和手机的设备独立像素一样，这样就不会压缩了，所以我们通常在写手机端页面时，都要设置这个视口。

整理重点

npm view swiper versions 查看一个依赖的所有版本

vue create maizuo 创建vue项目 mode: ‘hash’, hash路由兼容性更好一点，默认使用hash路由，hash路由更简单，使用history路由需要后端的配合

轮播图插件：swiper 安装： npm i swiper 引入： import swiper from “swiper” import “swiper/dist/css/swiper.css” 插槽在轮播图组件中使用，因为每个轮播图使用的图片不一样 < slot > < /slot> 其他组件使用轮播图组件时，< Swiper >这里面放插槽用到的图片img</ Swiper > 配置样式的话在轮播图组件中配置，因为插槽里面有img了

发送axios请求需要引入一个包： import axios from “axios” 安装：npm i axios

window.onscroll =function() 滚动时触发这个事件

ref用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $ refs 对象上。 <子组件 ref=“ange”> （同页）父组件可以 this.$refs.ange 得到子组件

选中content中的item子元素 #content > .item:nth-child(1) #content > .item:nth-child(2)

#content > .item:first-child #content > .item:last-child

如果设置了box-sizing是border-box，那么width就不是内容的宽度了，是在页面上占据的宽度