Anony - 学习笔记 https://blog.52learn.top/index.php/category/xxbj/ 富文本编辑工具TinyMCE首行缩进问题 https://blog.52learn.top/index.php/archives/61/ 2023-01-15T09:33:00+08:00 在调整字体大小之后首行缩进并不是两个字符,效果如下图所示查看一下生成的源码:原因:点击首行缩进是加在了外层的p标签上,而所有的字号大小都是加在了span标签上,p标签为默认字体大小,首行缩进两字符之后并不会对其解决直接将首行缩进设置为固定字体高度indent2em_val: "32px", // 首行缩进32px重写段落功能formats: { p: { block: "p", styles: { "font-size": "16px" } }, }, // 格式化段落以上第一种方式是将首行缩进设置为固定宽度,如果和字体宽度对不上,也会出现错位的情况。第二种方式是改变最外层p标签字体大小,同样具有局限性,失去了原有自动缩进两字符的效果 JavaScript数据类型及检测方法 https://blog.52learn.top/index.php/archives/60/ 2022-09-14T14:15:24+08:00 数据类型七种原始数据类型(值类型/基本类型):number :用于任何类型的数字:整数或浮点数,在 ±(253-1) 范围内的整数。bigint :用于任意长度的整数。string :用于字符串:一个字符串可以包含 0 个或多个字符,所以没有单独的单字符类型。boolean :用于 true 和 false。null :用于未知的值 —— 只有一个 null 值的独立类型。undefined :用于未定义的值 —— 只有一个 undefined 值的独立类型。symbol :用于唯一的标识符。非原始数据类型(引用数据类型/对象类型):object :用于更复杂的数据结构。对象(Object)数组(Array)函数(Function)检测数据类型typeof:string、number、boolean、null、undefined、symbol、object、function检测基本数据类型,null会被检测为object检测复杂数据类型,除function外,均为objectinstanceof:检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上只能检测复杂数据类型console.log([] instanceof Array) // truetoString:toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。对于 Object 对象,直接调用 toString() 就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。Object.prototype.toString.call('') ; // [object String] Object.prototype.toString.call(1) ; // [object Number] Object.prototype.toString.call(true) ; // [object Boolean] Object.prototype.toString.call(Symbol()); // [object Symbol] Object.prototype.toString.call(undefined) ; // [object Undefined] Object.prototype.toString.call(null) ; // [object Null] Object.prototype.toString.call(new Function()) ; // [object Function] Object.prototype.toString.call(new Date()) ; // [object Date] Object.prototype.toString.call([]) ; // [object Array] Object.prototype.toString.call(new RegExp()) ; // [object RegExp] Object.prototype.toString.call(new Error()) ; // [object Error] Object.prototype.toString.call(document) ; // [object HTMLDocument] Object.prototype.toString.call(window) ; // [object global] window 是全局对象 global 的引用 constructor: const arr = [] console.log(arr.constructor === Array)只能检测由字面量创建出来的数据类型isArray:console.log(Array.isArray([]));注意没有isObject Vue中使用Layui https://blog.52learn.top/index.php/archives/59/ 2022-07-20T19:21:00+08:00 前言在 Vue 中引入 layui 并使用的方法步骤下载在 GitHub 下载或者使用 npm 包管理工具进行安装作者原话: layui 原官网已于2021年10月13日下线。鉴于 Layui 相对庞大的受众群体,从此 Github 和 Gitee 平台将支撑起 Layui 的后续。 Layui GitHub地址 npm命令:npm install layui找到下载目录将整个文件夹放到 public 文件夹下引入文件注意:一定要将 layui 文件夹放到公共目录,不然会报错 引入两个关键文件即可 至此 layui 的全部功能即可在 vue 中使用 虽然但是,不推荐这么干!!! CSS实现鼠标悬停改变其他标签样式 https://blog.52learn.top/index.php/archives/55/ 2022-04-03T10:15:00+08:00 CSS实现鼠标悬停改变其他标签样式控制子标签(.div1:hover和.div2之间使用空格)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .div1,.div2 { width: 200px; height: 100px; background-color: pink; } .div2 { background-color: aqua; display: none; } .div1:hover .div2 { display: block; } </style> </head> <body> <div class="div1">div1 <div class="div3">div3</div> <div class="div2">div2</div> </div> </body> </html>被控制标签只要是控制标签的子标签就可以,里有其他标签(如.div3)不会影响效果!控制兄弟标签(.div1:hover和.div2之间使用+)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .div1,.div2 { width: 200px; height: 100px; background-color: pink; } .div2 { background-color: aqua; display: none; } .div1:hover+.div2 { display: block; } </style> </head> <body> <div class="div1">div1</div> <!-- <div class="div3">div3</div> --> <div class="div2">div2</div> </body> </html>使用“+”时,.div2必须紧贴在.div屁股后面才会有效果,否则无效!!!例如:将.div3取消注释后,.div1将无法控制.div2的样式!!!如果控制标签和被控制标签中间有内容,需要按照第三种方式写!控制兄弟标签(中间有内容)(.div1:hover和.div2之间使用~)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .div1,.div2 { width: 200px; height: 100px; background-color: pink; } .div2 { background-color: aqua; display: none; } .div1:hover~.div2 { display: block; } </style> </head> <body> <div class="div1">div1</div> <div class="div3">div3</div> <div class="div2">div2</div> </body> </html>这种方法的使用要求是被控制标签必须在控制标签的下面,中间可以有任意内容。 Docker常用命令 https://blog.52learn.top/index.php/archives/51/ 2022-01-28T22:10:00+08:00 列出所有容器IDdocker ps -a删除某一镜像docker rmi 镜像ID 停止所有的容器docker stop $(docker ps -a)删除所有的容器docker rm $(docker ps -a)删除所有的镜像docker rmi $(docker images -q)删除所有不使用的镜像docker image prune --force --all 或 docker image prune -f -a删除所有停止的容器docker container prune -f MarkDown使用笔记 https://blog.52learn.top/index.php/archives/4/ 2020-03-10T15:40:00+08:00 编辑工具理论上任何一款文本编辑器都能用于编辑 Markdown 文档,它们分别提供了不同程度的语法高亮、预览等功能,以下只是列举其中一部分,选择自己称手的即可。现代编辑器 VSCode / Atom传统编辑器 Vim / Emacs / Sublime Text / Notepad++IDE 自带编辑器 IntelliJ IDEA / Android Studio / WebStorm专用编辑器 Ulysses / Mou / Typora / Markpad在线编辑器 各种支持 Markdown 的网站都提供了在线编辑器语法标题# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 段落中间没有空行的连续不断的几行文字被称为段落 行内格式斜体 *斜体* 加粗 **加粗** 加粗倾斜 ***加粗倾斜*** 删除线 ~~删除线~~ 引用块> 引用块段落一。 > > 引用块段落二。 >> 内嵌引用块段落一。 > > ### 引用块内的标题 <blockquote> 多行引用 多行引用 </blockquote> 超链接行内式 [百度](https://www.baidu.com "点击转到百度") 链接,带 title。 行内式 [百度](https://www.baidu.com) 链接。 引用式 [百度][1] 链接。 引用式 [百度][2] 链接,带 title。 [1]: https://www.baidu.com [2]: https://www.baidu.com "点击转到百度" 预览效果:行内式 百度 链接,带 title。行内式 百度 链接。引用式 百度 链接。引用式 百度 链接,带 title。图片在超链接的写法前加一个 !,就是引用图片的方法。 ![Alt text](https://mazhuang.org/favicon.ico "favicon") 列表有序列表 1. 2. 3. 无序列表 * 或 + 或 -代码块`单行代码` /``` 多行代码 /``` 水平分割线使用一个单独行里的三个或以上 *、- 来生产一条水平分割线,它们之间可以有空格。 *** --- === 表格Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。语法格式如下:| 表头 | 表头 | | ---- | ---- | | 单元格 | 单元格 | | 单元格 | 单元格 |对齐方式-: 设置内容和标题栏居右对齐。:- 设置内容和标题栏居左对齐。:-: 设置内容和标题栏居中对齐。实例如下:| 左对齐 | 右对齐 | 居中对齐 | | :-----| ----: | :----: | | 单元格 | 单元格 | 单元格 | | 单元格 | 单元格 | 单元格 |