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

typecho 真的很简单的自定义评论列表
以前写过一个关于自定义评论的文章,时至如今来看,还是有很多不足的,昨晚再新写主题的时候,也重新写了一次自定义评论,嗯,有了新的理解,因为其实真的很简单,仔细阅读本篇文章,相信你会有收获的。[hide]自定义评论模板到底要怎么做很简单,可以理解为两步:编写自定义评论的模板通过php渲染出自定义模板评论而为什么大多数人不会,其实就是因为官方的文档真的是,如果懂php的人,可能看了一两遍后明白了怎么回事,但是如果是小白入门,纯前端的童鞋,可能看的一脸蒙蔽。就算是原封不动的copy官方的示例代码也还是会报错,心累...因为,你不知道他要做什么,我编写了自定义模板函数threadedComment...

纯css来做表单校验样式
css3新增了三个伪类::required、:valid、:invalid:required 表示input不能为空时使用的:valid 表示通过,表单元素和form表单都有的伪类:invalid 表示不通过,表单元素和form表单都有的伪类其实如果要做一个表单css校验样式,:valid和:invalid就行了,但是实际操作上,:invalid还是有一些问题的。当表单元素有required属性的时候,该表单元素默认就是:invalid,也就说,必填的表单元素,一开始就是不通过。所以,如果此时设置:invalid伪类样式,是不合适的。解决办法就是:使用:placeholder-shown...

移动端适配iPhoneX和安卓底部小黑条
这个问题还是同事发现的,毕竟我这种穷人根本用不起苹果,更何况也用不来,毕竟,我爱安卓。废话不多说,主要问题就是 iPhoneX底部小黑条问题,他的宽度也会被网页占据,导致小黑条显示在网页上头,第一是触发上会出现问题,第二是难看。解决办法就是通过css处理。解决方案首先对meta标签添加一条属性。<meta name="viewport" content="width=device-width, viewport-fit=cover">如果你已经有了viewport声明,那么就在后面content里加上viewport-fit=cover...

css使用系统字体作为网页字体最佳实践
目前前端对字体的选择,最好的做法就是用系统的默认字体,这样省去了对每个操作系统的字体判断,谁知道我们指定的这个字体用户安装没有,而且字体文件一向都很大,特别是中文字体。但是对于指定系统字体,其实也是需要兼容的,这里就放上一个专业的字体文章:《奇思妙想 CSS 文字动画》;虽然这个文章名字叫动画,但是里面内容很丰富,自己学习。以css-tricks的为模板,提取其中精华,大概是这么一条信息:{ font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, ...

flex-grow 1; 不能等分的问题
当我们给父元素设置flex布局的时候,子元素为了能够等分,常常flex-grow: 1;,但是你会发现,当里面有内容的时候,宽度就发生了变化,变得不是等分了。所以我们可以理解:flex-grow: 1其实他不是真正意义上的等分宽度,而是等分剩余宽度,而剩余宽度是总宽度减去内容宽度,再进行等分。而且这个等分甚至还是根据内容多少来等分,有的内容多,他等分还多一些。所以这就很尴尬。为此,如果想要真正的等分,就需要设置相同的width宽度。如:.value { width: 0; flex-grow: 1; }这样就行了。width的值0我感觉是最好的,如果你设置其他宽度也行,具体看自己...
ye
Google Chrome Android Oreo围观大佬,三年前竟然就入坑前端了
木灵鱼儿
FireFox Windows 10菜鸡而已