qq_43260366的博客

[1]html5新增的语义化标签https://blog.youkuaiyun.com/qq_43260366/article/details/115821513[2]html新增的多媒体标签多媒体标签分为 音频 audio 和视频 video 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了1)视频：video<video src="视频路经" autoplay controls muted ></video>

/ˈkæpʃ(ə)n/)标签一般是充当figure标签中的第一个或最后一个子元素来为figure元素定义标题。(/ˈkæpʃ(ə)n/)标签一般是充当figure标签中的第一个或最后一个子元素来为figure元素定义标题。主要是用来定义独立的流内容(图文混合/图表混合/图代码段混合等)；主要是用来定义独立的流内容(图文混合/图表混合/图代码段混合等)；figure(/fɪɡə®/)标签为html5新增的标签；figure(/fɪɡə®/)标签为html5新增的标签；.....................

Session是基于Cookie的一种会话机制。(1)session的使用流程。2.为什么要有cookie;3.cookie数据的产生。1.cookie是什么;删除当前存储的全部数据。

但是建立之后，在真正传输时候是不需要HTTP协议的(WebSocket通过http协议建立服务器与客户端的关系)websocket协议最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种.2.WebSocket是需要浏览器和服务器握手进行建立连接的，而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接。http协议是最常用的网络协议，既然有了http协议为什么还需要websocket协议呢？2.都是处于应用层的协议。

fillRect()方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在(x, y) ，它的宽度和高度分别由width 和 height确定，填充样式由当前的fillStyle 决定;该方法会将以(x,y)坐标为起点，width高度，height宽度，包含在画布内的矩形元素的背景色设置为透明色；定义：clearRect是 Canvas 2D API 的方法，这个方法通过把像素设置为透明以达到。定义：是 Canvas 2D API 在 canvas 中，使用当前的绘画样式，描绘一个起点在。.......

通过 label标签的for属性 和 表单控件的id属性 显示关联；如上代码：label标签与表单控件相关联，父组件绑定点击事件；当点击文本“名称：”时，会自动聚焦在input输入框中；隐士关联是直接使用label标签包裹表单控件；此时只有点击 单选框才能选中，点击文本不起作用。此时点击 男/女 就会选中其前面的单选框；修饰符阻止了label标签的默认事件·；最近发现一个比较有意思的现象。阻止元素的默认事件；...

1.盒子模型[1]css新型盒子模型 <style> * { box-sizing: border-box; } </style>[2]css旧盒子模型 <style> * { box-sizing: content-box; } </style>[3]两者的异同点旧盒子模型 宽=width+padding+border; 高=he

定义：white-space这个css的样式，用来设置element元素对内容中的空格的处理方式属性值normal(默认)合并空格，多个相邻空格合并成一个空格；在源码中的换行作为空格处理，只会根据容器的大小进行自动换行；nowrap合并空格，多个相邻空格合并成一个空格；在源码中的换行作为空格处理，容器边界不会换行；经常与经常和overflow,text-overflow一起使用(作为多余文本显示省略号)pre不合并空格，有几个展示几个空格；遇到 \n 会换行；

1.简介[1]弹性盒子是css3新增的盒子模型；[2]作用：就是用于解决一个盒子内多个子盒子的排列及其分布问题；[3]特点：不需要解决父元素塌陷问题)； 不需要计算间距； 父盒子大小改变子盒子能够弹性适应；[4]弹性盒子的组成部分子盒子； 主轴(默认x轴)； 次轴(默认y轴)；[5]启用弹性布局父盒子 display:flex; display:inline-flex; （1）主轴的排列以及分布：justify-content: flex-start;

上述代码发现设置样式不起作用，原因是.box input:nth-child(2)是寻找类名为box的元素里面 第二个元素且该元素为input元素的元素，但是box元素里面第二个元素为a标签，所以设置失败，样式不起作用。上述代码发现样式设置成功了，原因是.box input:nth-of-type(2)是先将类名为box的元素里面的input标签元素找出来进行排序，发现共有3个，给第二个设置样式就设置成功了。结构伪类选择器是根据文档结构来选择元素，常用于根据 父级元素来选择子元素。

当前有循环li元素；每个li元素代表 抖音、微博、小红书、快手四个媒体中的一个；不同媒体在li元素中右上角logo不同；

并且当我们使用vant等插件的时候，里面的数据都是使用px的，我们没有办法转化(postcss-pxtorem是基于vant的插件，可以将所有带px的单位–包括vant组件内的自动转化为rem单位)------------------>需要在移动端进行页面适配。----所以我们要使用postcss-pxtorem插件将带px的转化为带rem单位的数据；-----postcss-pxtorem使用的设计稿是vant的设计稿宽度为375px;----但是我们自己的设计稿若不是375px时就须要进行手动转化；

视口单位(Viewport units)1.什么是视口？在pc端，视口指的是浏览器的可视区域； 在移动端，它涉及3个视口： Layout Viewport（布局视口）， Visual Viewport（视觉视口）， Ideal Viewport（理想视口） 2.视口单位中的“视口”：在pc端，指的是浏览器的可视区域； 在移动端，指的就是Viewport中的Layout Viewport(布局视口) 即window.innerWidth/window.innerHeight大小

1.水平居中[1]行内/行内块元素： 父盒子设置text-align:center; [2]块级元素： margin:auto; 前提：盒子必须设置了宽度； [3]定位+平移 若是设置定位(块级元素margin:auto不起作用) postion:absolute; left:50% transform:translate(-50%) 注：定位百分比相对于父元素，平移百分比相对于自身； [4]定位+margin 若是设置定位(块级元素ma

1.FC(Formatting Content)格式上下文（1）定义：指的是页面中的一块渲染区域,它决定了其子元素如何定位，以及与其他元素的相互关系和作用；2.BFC(Block Formatting Content)（1）定义：块级格式上下文，一个独立的块级渲染区域（2）触发BFC的方式 根元素,body就是一个BFC 设置浮动 设置定位(absolute,fixed) 弹性布局 overflow:hidden/auto/scroll

display隐藏元素时-该元素被隐藏，不占据位置；隐藏元素时-子元素被一起隐藏，且不可以通过display:block;将子元素显示；元素隐藏时-对该元素设置的事件将不起做用；visibility隐藏元素时-该元素被隐藏，但是仍然保留元素的位置；隐藏元素时-子元素被一起隐藏，但可以通过visibility:visibilie;将子元素显示；元素隐藏时-对该元素设置的事件将不起做用；opacity隐藏元素时-该元素被隐藏，但是仍然保留元素的位置；

清除浮动1.为什么需要清除浮动？原因：由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子2.清除浮动的本质清除浮动的本质清除浮动盒子造成的影响(即不会撑开父盒子)若是父盒子本身存在高度，则不需要清除浮动； 清除浮动后，父级就会根据浮动的子盒子自动检测高度，不会影响后面的标准流了；3.注意点：浮动只会影响其后面的标准流并不会影响其前面的标准流；4.语法// 清除浮动造成的影响选择器{ clear

的**具有定位(相对、固定、绝对)**的祖先元素(若是所有祖先都没有定位，则以浏览器为标准)不设置偏移量—>默认的left，top是padding的值；设置偏移量—>会忽略父元素的padding；绝对定位的边偏移是相对于它祖先元素来说的。来控制盒子的前后次序(z轴)相对定位的边偏移是相对于元素。粘性定位(css3新增定位).........

https://blog.youkuaiyun.com/weixin_42441117/article/details/80705153属性 link属于html基本标签； @important属于css语规则； 加载内容 link除了可以加载样式外，还可以定义href，rel等链接属性； @important只能加载css样式表； 加载时机 ​​​​​​​link是加载页面的同时加载link @important是等待页面加载完毕再加载 权重link的权重更大； 兼容性

既然上述需求遇到了content属性值问题，我们来具体看下伪元素的content属性到底可以接收什么样的值吧。伪元素content属性值可以是attr方法，引入标签的属性值；等作为伪元素跟随在数值后面，这样无需添加dom元素；伪元素的属性值可以是一个url方法,插入url图片；通过background-size来控制图片大小；若是想通过伪元素设置图片，可以通过背景图来设置；写了一个如下的伪元素，但是在页面上却没有显示。伪元素的content属性值可以是字符串；缺点：通过伪元素引入的图片。..........

在本地图片可以正常显示；打包之后图片也可以正常显示。在本地图片可以正常显示，但是打包后图片显示不出来！[2]上传到cos，使用链接。打包后图片不能正常显示！

## 基础知识1. 复合写法--background:背景颜色 背景图片 背景平铺 背景定位 背景滚动；注：没有固定的顺序，但是一般这样写；background-color:默认transparent 背景色半透明； background-color:rgba(255,0,0,0.5) ---红色半透明度为0.5 最后一个参数是 alpha 透明度，取值范围在 0~1之间 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3....

！important id选择器 类选择器/属性选择器/伪类选择器 标签选择器/伪元素选择器 通配符选择器 继承

[1]在原生js中原理：使用window.onload入口函数； 因为window.onload是等待所有静态资源加载完才会执行； 所以我们先将所有的元素隐藏，当静态资源加载完毕在显示； 代码 <style> #app { display: none; } </style> </head> <body> <div id="text">静态资源加载中</

有时我们需要使用ttf文件中的字体，那如何导入呢？1.将文件放入项目文件夹中；3.引入之后就可以正常使用了。2.在css文件中使用。