相关推荐
css选择器优先级计算规则
规则概览0级通配选择器、选择符、逻辑组合伪类通配选择器:* {}选择符:+、>、~、空格、||逻辑组合伪类::not() {} :is() {} :where() {} :has() {}1级标签选择器body {}2级类名选择器、属性选择器、伪类类名选择器:.foo {}属性选择器:[foo] {}伪类::hover {} :active {} :focus {} :focus-within {} :focus-visible {} :link {} :visited {} :any-link {} :target {} :target-within {}...
让typecho支持特殊字符
起因由于最近在了解前端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这些应该也是算可编辑内容区域的。这些都不重要,我们这次关注的...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
transform 知识补充
rotate的坐标轴和默认值z轴可以看成正对着自己脸的一根轴,每个轴的旋转方向默认如图箭头所示。所有的旋转角度,正值都是根据默认的旋转方向来得,负值则是相反。transform: rotateZ(45deg);只有Z轴的旋转再二维的界面才是有效的,如下图所示:因为在二维的界面Z轴的变化才是有效的,所以默认值的设置就是Z轴,所以简写形式等效于rotateZtransform: rotate(45deg); /*等同于rotateZ(45deg)*/translatetranslate的变化是根据元素的坐标轴而变化的,比如X轴移动100px;transform: translateX(100...

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

flex布局知识补充
子元素自身的order属性子元素的order的作用详解:默认情况下order的值都为0,如果这个值越小,那么就越靠近起始点,值越大,位置就越后,order其实用于移动元素的位置,而位置的方向则取决于父元素设置的:flex-direction子元素自身的align-self属性从正常角度,align-self是控制子元素y轴的对齐方式,也称侧轴对齐,这个y轴的定义也是取决于父元素flex-direction子元素自身的flex-basis属性flex-basis的效果,最好配合:flex-shrink:0;让子元素不被压缩。flex-basis会根据主轴的来设置元素的宽度还是高度:当主轴是...
Copy 一个复制操作的类
前言js有一个31k多的star的开源复制库:clipboard.js;但是一些简单复制并不想安装一个库来解决,所以就想自己写一个。copy所需要的东西Selection 对象用于获取被用户选中的部分,通过toString()方法可以获取被选中的文本内容,以及js操作选中。MDN文档:SelectionexecCommand 对象用于以命令的形式来操作网页的内容,说白了就是用它来实现复制文本操作,复制的是选中的文本MDN文档:execCommand 需要注意的是,execCommand在未来将会被遗弃,因为这个api本身是从ie浏览器那边继承的,久而久之各大浏览器都对其做了兼容,虽然...
开源主题-高仿掘金《JJ》
前言写这个主题花了一些时间,我的想法是希望有一个优秀的阅读体验,毕竟本人喜欢记笔记,分享一些平遇到的问题和解决方法。于是乎看中了掘金的样式,挺适合阅读的,加上个人审美确实不太行,就想仿一下样式。随着现在前端的发展,一些新的特性增加,如果还是保持在旧的思维上,我觉得限制了开发者的自我提升,所以,本主题采用了大量es6的js语法,css上采用scss编译,如果你有兴趣,可以一起参与开发。主题预览github地址《Typecho_Theme_JJ》

老Q
Google Chrome Windows 10看起来不错哦,刚好需要。学习学习。
gcq
Google Chrome Android可以
shdaiu
Google Chrome Windows 10看看咋样
biediu
Google Chrome Windows 7好的
hsia
Google Chrome Windows 10我好笨啊
hsia
Safari iPhone看看试试
粉色
FireFox Windows 10凤凤谢谢!
zhang
Google Chrome Windows 10我单位
ll
Google Chrome Windows 7看看
江里
Google Chrome Windows 10学习