通用一键复制代码的方法

规则概览0级通配选择器、选择符、逻辑组合伪类通配选择器：* {}选择符：+、>、~、空格、||逻辑组合伪类：:not() {} :is() {} :where() {} :has() {}1级标签选择器body {}2级类名选择器、属性选择器、伪类类名选择器：.foo {}属性选择器：[foo] {}伪类：:hover {} :active {} :focus {} :focus-within {} :focus-visible {} :link {} :visited {} :any-link {} :target {} :target-within {}...

起因由于最近在了解前端js中length不准的问题，其中文章带有一些特殊字符，而typecho和mysql都只是支持UTF-8字符，但是这个utf-8并不是真正意义上的utf-8，它最多支持3个字节的内容，也就是24bit，而我文章中的特殊字符是需要4个字节来存储的，这就导致文章无法正常的展示和保存。这个特殊字符和现在移动端常用的emoji表情差不多，emoji也是一种特殊字符，所以该教程同样适用于如何让typecho支持emoji表情。教程打开宝塔的phpmyadmin -> 找到typecho的数据库 -> 操作 -> 滑动到最底部找到排序规则 -> 选择ut...

前言前端的复制功能第一次使用的时候还记忆犹新，那时根本不知道怎么操作，复制它到底是怎么实现的，该怎么去触发，百度查看了不知道多少所谓的复制功能文档，每篇都有不一样的用法，我总想着有一天能搞清楚这些，毕竟现在复制功能已经web功能开发中离不开了。execCommand API浏览器在document对象上暴露了execCommand方法，该方法允许使用者通过输入“命令”的方式来操作 可编辑内容区域 的元素。可编辑内容区域被官方认为是contenteditable="true"的html元素，但按道理，input这些应该也是算可编辑内容区域的。这些都不重要，我们这次关注的...

前言为了兼容之前的旧浏览器版本，特别是安卓4.4这种低版本，transform是一定得增加浏览器前缀的，但是我在项目中遇到了设置无效的问题，极度蛋疼，下面是我的解决教程，当然没这个问题，看这篇文章，相信你对如果给项目增加浏览器前缀，会有很充分的认识。教程给css增加浏览器前缀，业界的做法就是使用postcss，目前webpack与vue cli他们需要安装的依赖略有不同：webpack：pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...

rotate的坐标轴和默认值z轴可以看成正对着自己脸的一根轴，每个轴的旋转方向默认如图箭头所示。所有的旋转角度，正值都是根据默认的旋转方向来得，负值则是相反。transform: rotateZ(45deg);只有Z轴的旋转再二维的界面才是有效的，如下图所示：因为在二维的界面Z轴的变化才是有效的，所以默认值的设置就是Z轴，所以简写形式等效于rotateZtransform: rotate(45deg); /*等同于rotateZ(45deg)*/translatetranslate的变化是根据元素的坐标轴而变化的，比如X轴移动100px;transform: translateX(100...

基本格子<div class="box"> <div class="item1">item1</div> <div class="item2">item2</div> <div class="item3">item3</div> <div class="item4">item4</div> <div class="item5&q...

网页不能直接识别移动设备的实际像素大小再没有设置meta viewport的时候，网页只能识别硬件的物理像素，而非软件像素。物理像素：硬件本身的实际像素大小软件像素：设备尺寸限制，过大的像素并不能带来很好的体验，显示的内容过多反倒无法正常使用，于是有了软件像素，软件像素是基于一定像素比得到的值。比如 iPhone X的软件像素是：375px*812px；它的比是：3；那么它的物理像素就等于：(375*3)*(812*3)更多的对比可以去这个网站查看：mydevice然而实际上移动端设备都会有一个默认的宽度：980px，所以，即便我们没有设置meta viewport，网页也不可能真的使用...

子元素自身的order属性子元素的order的作用详解：默认情况下order的值都为0，如果这个值越小，那么就越靠近起始点，值越大，位置就越后，order其实用于移动元素的位置，而位置的方向则取决于父元素设置的：flex-direction子元素自身的align-self属性从正常角度，align-self是控制子元素y轴的对齐方式，也称侧轴对齐，这个y轴的定义也是取决于父元素flex-direction子元素自身的flex-basis属性flex-basis的效果，最好配合：flex-shrink:0;让子元素不被压缩。flex-basis会根据主轴的来设置元素的宽度还是高度：当主轴是...

前言js有一个31k多的star的开源复制库：clipboard.js；但是一些简单复制并不想安装一个库来解决，所以就想自己写一个。copy所需要的东西Selection 对象用于获取被用户选中的部分，通过toString()方法可以获取被选中的文本内容，以及js操作选中。MDN文档：SelectionexecCommand 对象用于以命令的形式来操作网页的内容，说白了就是用它来实现复制文本操作，复制的是选中的文本MDN文档：execCommand 需要注意的是，execCommand在未来将会被遗弃，因为这个api本身是从ie浏览器那边继承的，久而久之各大浏览器都对其做了兼容，虽然...

前言写这个主题花了一些时间，我的想法是希望有一个优秀的阅读体验，毕竟本人喜欢记笔记，分享一些平遇到的问题和解决方法。于是乎看中了掘金的样式，挺适合阅读的，加上个人审美确实不太行，就想仿一下样式。随着现在前端的发展，一些新的特性增加，如果还是保持在旧的思维上，我觉得限制了开发者的自我提升，所以，本主题采用了大量es6的js语法，css上采用scss编译，如果你有兴趣，可以一起参与开发。主题预览github地址《Typecho_Theme_JJ》