pscool的博客

学习链接Grid网格布局前端五大主流网页布局flex布局看这一篇就够了grid布局看这一篇就够了用六个案例学会响应式布局伸缩盒+响应式页面布局实战实现响应式布局的五种方式 - csdn如何完成响应式布局，有几种方法？看这个就够了响应式布局总结Flexbox 打造栅格系统CSS中 自定义属性（变量）详解CSS 之 z-index 属性详解CSS深入理解z-index（z-index相关知识总结）文章目录学习链接第一章 介绍1、课程介绍现代布局四大核心技术课程收获涵盖内容2、常见布局

【grid布局看这一篇就够了】 - 原文链接flex布局看这一篇就够了最强大的 CSS 布局 —— Grid 布局css grid布局，手把手教你grid布局，包你学会，史上最全面详细的课程 - B站Grid - 英文文档 布局即网格布局，目前唯一一种 二维布局，是最强大的的 布局方案。它可以轻松实现以下布局，这是 布局无法一次性解决的声明定义容器里面包含着项目元素，使用 或 声明为网格容器。2、grid布局的作用grid与flex布局的区别 布局是轴线布局，只能指定 “项目” 针对轴线的

Node.js 是一个能够在服务器端运行 JavaScript 的开放源代码、跨平台 JavaScript 运行环境。Node.js 由 Node.js 基金会持有和维护，并与 Linux 基金会有合作关系。Node.js 采用 Google 开发的 V8 运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于数据密集的即时应用程序。Node.js 大部分基本模块都用 JavaScript 语言编写。

咸虾米壁纸API 接口列表咸虾米壁纸开源地址咸虾米壁纸扫码体验（搜索咸虾米壁纸）7.3.banner海报swiper轮播器7.4.使用swiper的纵向轮播做公告区域7.5.每日推荐滑动scroll-view布局7.6.组件具名插槽定义公共标题模块7.7.细节拉满磨砂背景定位布局做专题组件7.8.设置项目底部tab页面切换标签7.10.个人中心页面布局7.11.ifdef条件编译实现多终端匹配和客服消息微信小程序添加客服7.12.设置页面全局渐变线性渐变背景色1、将p

微信扫码体验“咸虾米壁纸”最终项目零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 - B站视频咸虾米壁纸对应的配套资料 gitee千锋教育前端uniapp入门到实战项目教程(微信小程序+H5+安卓APP+IOS APP) - B站视频uni-pay支付商城项目开发，uniapp及uniCloud云开发进阶课，自建微信小程序购物商店项目实战『布局篇』各种不同类型的for循环遍历 - B站视频vue3中computed

封装1个阻塞执行的函数。在当前的执行位置阻塞。

尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程Vue3+Vite4+Pinia+ElementPlus从0-1 web项目搭建Vue3.2后台管理系统深入Vue3+TypeScript技术栈 coderwhy尚硅谷Vue项目实战硅谷甄选，vue3项目+TypeScript前端项目一套通关基于Vue3最新标准，实现后台前端综合解决方案 imooc-admin源码Vue3 + vite + Ts + pinia + 实战 + 源码 + electron - 百万播放量哦2020年9月

【代码】vue2使用Lottie。

译文：、、（如 inline-blocks 、 table-cells 和table-captions ），以及 ，将为其内容建立新的。BFC 是 Block Formatting Context （块级格式上下文），可以理解成元素的一个“”。该 “”，在；当元素满足了某些条件后，该“”。所谓激活“特异功能”，专业点说就是： （又称：开启了 BFC ）。

完整列表请参考：https://developer.mozilla.org/zhCN/docs/Web/CSS/@media。/* 检测到视口的宽度小于等于700px时，应用如下样式 *//* 检测到视口的宽度大于等于900px时，应用如下样式 *//* 检测到屏幕的宽度等于1536px时，应用如下样式 *//* 检测到视口的高度等于800px时，应用如下样式 *//* 检测到视口的宽度为800px时，应用如下样式 *//* 只有在屏幕上才应用的样式 *//* 一直都应用的样式 */

grid布局看这一篇就够了grid网格布局看这一篇就够了(接近3w字的总结)flex布局看这一篇就够了13分钟彻底弄懂CSS Grid基础布局 / CSS Grid 入门教程css小白极速入门flex布局，手把手带你写代码css grid布局，手把手教你grid布局，包你学会，史上最全面详细的课程

新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握

（Range请求交互过程可以参考这个里面的截图）// 文件总大小(需要请求后端获得)// 定义 存储所有的分片的数组。// 组合chunks到单个文件。这里面的代码实现，完全可以参考。// 文件总大小不足1个分片。'分片索引不可超过分片数量'// 分片下载大小 5MB。// 获取文件总大小。

（这个有歌词实现，界面好看）（这个没有实现歌词）

/ 预览图片显示的初始索引。// 显示图片预览的方法。// 关闭图片预览的方法。// 是否展示图片预览。

【代码】el-popver 点击触发和使用方法触发。

Framework.vue中通过路由出口，展示了Main.vue组件，但是现在需要在Main.vue组件中去调用Framework.vue组件中的方法，可以有以下几种做法。

【代码】ref引用组件或dom 与 v-if/show。

/ 打印的是： /src/assets/imgs/cover.png。

/ 如果不阻止默认行为, 点击提交按钮,将会跳转到baidu的页面。

程序员写了: width=2px， height=2px的盒子，若1个css像素直接对应1个物理像素，由于 iPhone3G/S与iPhone4屏幕尺寸相同，但iPhone4的屏幕能容纳下更多的物理像素点，所以iPhone4的物理像素点比iPhone3G/S小很多，那么理论上这个盒子在 iPhone4屏幕上也就会比iPhone3G/S屏幕上小很多，而事实是 iPhone3G/S和 iPhone4下这个盒子是一样大的！这就要靠设备独立像素。，它是为Web开发者创造的，用来精确地度量Web页面上的内容大小。

一个.container的div（宽度为200px，高度为200px）下，有两个直接子div（.box1和.box2），当container使用flex布局后，.box1设置为固定宽度50px，.box2设置为flex:1，占满所有剩余宽度。/* 剩余空间只有200px - 50px = 150px 了，这里设置的200px显然超出了剩余空间大小 *//* .box2设置width为0后，这个flex-shrink: 0;

codeMirrorExtensions: 根据主题和内部默认的 codeMirror 扩展自定义新的扩展。监听编辑器内部状态，包括：屏幕全屏、浏览器全屏、预览文本、预览 html、目录等。编辑器暴露了若干方法在组件实例上，用来快捷监听编辑器内部状态或对调整内部状态。注意：粘贴板上传时，如果是网页上的 gif 图，无法正确上传为 gif 格式！editorExtensions: 类型如下，用于配置编辑器内部的扩展。以便生成的内部目录能够正确导航。使用示例：编辑器默认不显示输入框的行号，需要手动添加扩展。

* 使用渐变作为元素图片，注意这里面的图片是个矢量图片（即：不管放多大，也不会失真。并且元素有多大，它这个背景图片就有多大）*/而默认情况下，这个矢量渐变背景与元素大小相同，因此设置百分比无效（0乘以任何数都是0）。2. 后面参数，可以理解为：现确定什么颜色的油漆, 然后从什么位置开始刷, 然后中间渐变。/* white-space属性为nowrap时，不会因为超出容器宽度而发生换行 */是相对于 元素的大小 减去 背景图片的大小 的百分比，/* 将背景图片(渐变背景)的x轴方向，设置为元素大小的2倍。

它的官方名称是叫“自定义属性”，CSS变量是自定义属性的通俗叫法。就是根据我们自己的需求定义属性的名称和属性值属性名：属性名必须使用 --开头可以是数字、字母、下划线、中划线属性值：css普通属性可以用的，比如：数字、文本、带单位的长度、角度等等都可以作为属性值注意点大小写敏感：大写 和 小写 不同 的2个属性名，将会是2个属性。

对应的。

由于HTTP是一种无状态的协议，服务器单从网络连接上是无法知道客户身份的。这时候服务器就需要给客户端颁发一个cookie，用来确认用户的身份。简单的说，cookie就是客户端保存用户信息的一种机制，用来记录用户的一些信息。原理:web服务器通过在http响应消息头增加Set-Cookie响应头字段将Cookie信息发送给浏览器，浏览器则通过在http请求消息中增加Cookie请求头字段将Cookie回传给web服务器。

注意，这只是一个基本的实现，可能需要根据你的实际需求进行修改。特别是，你需要处理错误情况，例如请求的Range不合法，请求的文件不存在等。这段Java代码首先获取请求的Range头，然后解析出要下载的文件部分的开始和结束位置。然后，使用Java的文件IO库来读取文件部分，并发送一个包含文件部分的响应。每个块都是一个Blob对象，最后，所有的Blob对象被合并成一个Blob对象，然后使用a元素进行下载。以下是一个基本的Spring Controller，它处理Range请求并发送相应的文件部分。

【代码】elment-ui/plus不定高度容器收缩折叠动画组件。

效果图代码要点需要注意这个dom结构，过渡动画一定要有开始和结束值才能产生动画，并且在js里面修改的时候，不能连着修改，要把第二次修改放到setTimeout里面为了让菜单能够不是一次性过渡（让它可以一直产生过渡动画），需要在动画结束后，清理掉设置的高度，这个设置的高度只需要在动画的时候生效。<style lang="scss" scoped>@import url(//at.alicdn.com/t/c/font_4065865_kb7oyb2wje9.css);ul,

这个是完美解决方案（

校验整个表单校验自定义组件的值校验单独的某个字段自定义校验表单方式（一定要调用callback，不然走后面的校验流程了，现象就是：因为没有在自定义的validator后面缺少调用callback()，导致后面校验整体表单的时候，它没有进form.validate((valid)=>{ // 代码没有进到这里来 })，可参考：el-form表单校验无效）当不同的路由来到同一组件时，可以通过监听路由的方式，来加载数据<template> <div class="m

/ 上传完文件后, 将value置为空, 以避免下次选择同样的图片而不会触发input file的change事件。// (注意清空value后，将不能再从input file中获取file，而原先的file仍然能够使用)// 这种传参方式, 在axios的index.d.ts中可以看到。// 因为可能选择多个文件, 所以这里是个数组。// 可以有下面2种方式, 来上传文件。// 上传前, 可以预览该图片。

array：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的，将会被放进 Blob；blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。start：设置切片的起点，即切片开始位置。type：默认值为 “”，表示将会被放入到 blob 中的数组内容的 MIME 类型。end：设置切片的结束点，会对该位置之前的数据进行切片。，注意：Blog对象是不可直接修改的，所以分片返回的是一个新的Blob对象。// 注意,只能读取一次。

使用AvatarUpload.vue后端上传接口配置mvc

el-tree官网element-ui el-tree选择子节点时同时选择并提交父节点逻辑问题解决element-ui的el-tree组件半选中回显的问题（setCheckedKeys、setChecked）

/ 通过 `vm` 访问组件实例。'角色名称不能为空''角色标识不能为空'

【代码】flex垂直方向布局与overflow。

使用ref去引用 组件 或 dom，一定要等到组件渲染出来之后，才能拿到组件实例。

缓存之keep-alive的理解和应用vue多级菜单(路由)导致缓存(keep-alive)失效