scale与taranslate的倍数关系

正常情况下,如果想让左侧黄色20px的元素右侧与父元素齐平,父元素100px,我们的算法是这样://100px - 20px transform: translateX(80px);x轴移动80px即可达到效果,但是如果我们同时使用scale放大,那么80px就不对了。transform:scale(2) translateX(80px);放大两倍后,你会发现平移的距离不对了。为什么?平移的距离明明就是70px啊!不着急,我们先看看不使用translateX平移,使用margin-left移动到与父元素右侧齐平再放大是什么样的。transform: scale(2); margin-le...

483 0 0
scale与taranslate的倍数关系

纯css来做表单校验样式

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

552 0 0
纯css来做表单校验样式

移动端适配iPhoneX和安卓底部小黑条

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

748 0 0
移动端适配iPhoneX和安卓底部小黑条

css使用系统字体作为网页字体最佳实践

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

731 0 0
css使用系统字体作为网页字体最佳实践

flex-grow 1; 不能等分的问题

当我们给父元素设置flex布局的时候,子元素为了能够等分,常常flex-grow: 1;,但是你会发现,当里面有内容的时候,宽度就发生了变化,变得不是等分了。所以我们可以理解:flex-grow: 1其实他不是真正意义上的等分宽度,而是等分剩余宽度,而剩余宽度是总宽度减去内容宽度,再进行等分。而且这个等分甚至还是根据内容多少来等分,有的内容多,他等分还多一些。所以这就很尴尬。为此,如果想要真正的等分,就需要设置相同的width宽度。如:.value { width: 0; flex-grow: 1; }这样就行了。width的值0我感觉是最好的,如果你设置其他宽度也行,具体看自己...

962 0 0

fieldset元素宽度撑开的问题

fieldset这个元素,估计用的人很少吧,或者说现在使用fieldset情况已经很少了,大部分都是使用其他元素模拟这个元素的ui。今天我碰到一个很奇怪的现象。fieldset里面的元素,他不会产生横向滚动条,哪怕我设置了外部所有父元素的宽度为100%,overflow-x: auto;里面的子元素,如果比如pre这种代码块,不换行的,他会一直往右延伸,也就是超出原来的宽度,把fieldset撑的非常宽。但是所有的父元素都是block,按道理宽度是自己占满不会超出的。找了半天,理解出这么一段解释:fieldset默认是以block方式解析的,也就是宽度是按照100%占满,但是他的默认cs...

994 5 0

flex自适应宽度由后text-overflow:ellipsis;失效 文本溢出失效

当我们给元素做了flex后,flex内的子元素宽度自适应,但是当我们给子元素设置文本溢出的时候,发现时候无效的,原因是因为他们的宽度没有限制,也就是说原始的宽度无限制,那么这个原始宽度又怎么说呢?他有一个优先级:优先级:flex-basis > width > 内容宽度。我们可以通过设置max-width或者min-width来限制他的宽度,但是并不是很合适,因为这两个只是一个区间,而我们的设备宽度是不固定的,所以设置一个固定的区间并没有用,我们需要的是这个元素它能在自适应的情况的下文本溢出依旧有效。我们给这个flex子元素设置width:0;即可,设置一个极小的宽度。

1255 0 0

锤子的字体样式

font-family: Helvetica Neue, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; color: #666; font-...

1316 0 0

flex弹性布局和grid格子布局常用5种布局结构

flex弹性布局flex第一种基本布局header会占据除去footer的所有高度,footer高度可以自己设置,默认是占满的。<div id="layout"> <div class="one">header</div> <div class="two">footer</div> </div>html,body { height: 100%; margin: 0; padding: 0; } #layout { heigh...

1658 3 0
flex弹性布局和grid格子布局常用5种布局结构

fit-content()函数

css3的grid格子布局中,对于设置格子大小的处理,要么是固定的,要么是百分比这种相对的。如果电脑端这个header的高度为50px,而手机端由于大小限制,原来50px可能要变成30px,那么此时我们可以利用媒体查询去调整:grid-template-rows属性。grid-template-rows: 30px 1fr;调整完这个大小后,我们还要调整里面元素的大小,这样做可能有点麻烦。甚至于我们可能只是改变了里面元素的布局而已,横向的布局改为竖列的多行布局,那么这个高度可能是无法精确获取的,如果内容的高度为100px呢,而我们只设置了30pxgrid的默认效果会是一个overflow...

1606 0 0

通用《少数派》文章css样式

本来想多搞几个文章的通用样式的,每次写主题,对于文章的样式确实很头疼,目前用的是vue的文章样式,很适合代码和文字混排,但是对于图文混排感觉一般般吧。所以就做了一个新的样式,仿《少数派》的css样式。预览图[hide]使用方法首先我们需要对使用改css样式的文章元素用一个div包裹,并且这个div的id为pai-md;<div id="pai-md"> 这里放文章内容 </div>这样css的作用域就设置好了,然后我们只需要在head引入这个pai.css即可。特殊的md写法## **红色数字**标题二级标题的第一个加粗元素颜色是红色高亮还...

1563 0 0
通用《少数派》文章css样式

远程字体 详解阿里巴巴矢量字体库css原理

关于自定义字体,我一开始只以为只能本地加载,也就是css里面定义的字体,都只能从本地加载到,但是后来我了解到字符图标,一开始也是照本宣科使用本地字体,这就导致了一个问题,如果服务器网速带宽不够,就会产生字符字体文件未加载完整时,有一个占位字符显示,时间一长就显得极度的难看。然后我使用了阿里矢量字体库里面的字体,是可以直接下载一个css文件,然后本地引用,就可以直接用了,我就奇了怪了,怎么做到的,当然,这个疑问到今天也就完全明白了。首先要明确一点,阿里巴巴的那个css文件虽然写的很多,但是个人测试的时候好像也不支持ie9以下,也不知道是代码问题还是什么,不过现在能兼容ie11就不错了。自定...

1168 0 0
远程字体 详解阿里巴巴矢量字体库css原理

css3 字体渐变动效

以前写过一篇关于字体渐变效果的文章,那时候初出茅庐,啥都不太懂,就只会个静态,这次逛animate.css网站的时候发现他的字体是动态渐变效果的,这就有点刺激了,于是研究了一下。效果图教程主要是利用了css3的滤镜效果,也就是hue-rotate()色调转盘,他会根据当前的颜色进行调整,大概可以理解为ps中的调整色相吧。 p { font-size: 60px; color: #f35626; background-image: linear-gradient(92deg, #f35626 0%, #feab3a 100%); -webkit-ba...

1185 0 0
css3 字体渐变动效

多行文本溢出显示省略号

css控制文本溢出隐藏css兼容最好的就是单行文本溢出省略号了,我们先看下单行的css是怎么设置的:p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }表示文本不换行,做一行显示,然后文本超出p元素的宽度做省略号显示,且为了兼容低版本浏览器加了超出部分裁剪的css效果。这个就是一个基本的文本溢出省略号显示的一个效果。但是,单行已经不能满足我们日常所需了,在一些文本简介中,我们都希望的是能够有多行的显示,再多则做省略号显示,这个功能目前来说,只有webkit内核的浏览器支持这个效果,i...

2150 0 1
多行文本溢出显示省略号

图片模糊过度原理(QQ空间图片过度效果)

之前一直用的懒加载,也就是对同一个img元素做操作,通过load事件判断图片资源是否加载完毕然后替换src链接,但是今天我不想这么做了,这么做要写太多的代码,我想有没有纯css就能解决的办法。突然我想到以前逛别人博客的时候遇到的一个情况,就是他的图片是先高斯模糊的,然后再慢慢变得清楚,为此我想到了一种情况,也是用js判断,就是需要一张很小的缩略图,然后这个缩略图拉伸到和原图一样的大小显示,然后这个图浮动再原图上方,并且做高斯模糊处理,当大图load加载完毕,小图就做透明渐变直到display:none,但是这样也太麻烦了,不是我需要的,我需要的是纯css。于是我把目光放到了qq空间上,q...

1049 0 0
图片模糊过度原理(QQ空间图片过度效果)

关于手机端虚拟键盘压缩页面高度的解决办法

手机端只要有输入框,弹出虚拟键盘后,一般来说都会压缩整个页面的高度,这就导致了一个问题,如果浮动于底部的标签就会被压上来,以及一些根据页面高度百分比定位的元素错位,解决这个问题目前我就只有一个办法: 固定整个页面的高度在页面每次加载后获取window的innerHeight高度,然后手动给body设置这个固定的px值,并将这个值储存起来,然后再加一个window的resize事件,当页面被压缩,该事件就会触发,此时我们就判断,如果此时的windw的innerHeight高度小于之前的值,那么就将浮动底部的元素隐藏起来.注意window.innerHeight和document.body....

1399 0 0

处理谷歌浏览器总是提示无法阻止事件的报错

这个问题一直困扰了我很久了,之前我做手机端侧栏nav的时候也会出现这个问题,因为不影响使用,也暂时没找到处理的办法,索性就没管了,今天尝试了几次方式,发现通过css设置就很很完美的解决的这个问题.首先这个问题一般都是因为我们阻止的touch事件导致的,谷歌为了让滑动能够顺滑,即便我们阻止了默认行为也是滑动的,所以才会出现这个错误.错误提示:[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See解决办法直接给body元素...

1099 0 0

margin负值拉伸元素

今天按着书写代码的时候发现一个问题,margin负值居然无法拉伸元素,在我的理解里margin四个值都为负值的时候是可以拉伸元素的。为此我还特意百度了下,也没找到什么有价值的信息,于是自己测试了下。当元素为block话的时候,也就是正常水平流状态时,使用margin负值是可以拉伸的,但是,当你的元素设置了宽高,那么负值就不能拉伸了。他会以top和left两个方向做位置偏移。而: position: absolute; top: 0; bottom: 0; left: 0; right: 0;这种状态元素也可以看做为一个block元素,正常的水平流状态。也能用margin负值拉伸!...

1245 0 1

css动画之jojo波纹(波纹动效)

先看看仿制的原作动画效果我们首先做一个分析,他首先它的本质就是一个圆圈在渐变放大然后缩小的过程,然后通过三个圆圈达到波动的效果,那么我们就可以通过动画annimation来制作。首先可以明确一点就是,他们的动画是一样的,只是触发的时间不同,那么就很简单了,动画提供延时功能,我们只需要控制三个动画的延迟即可。HTML部分:<div class="pos"> <div id="box"> <a href="#" class="img_pox"> ...

1477 0 0
css动画之jojo波纹(波纹动效)

为博客文章加上标签

突然想给博客加个标签,然后说干就干,反正挺简单的,然后效果还不错,美滋滋........

853 0 0
为博客文章加上标签

什么是上下文节点???

学html+css的时候有在书上看到过上下文节点,但是也没详细说明,看视频的时候也有人说过,但是也是一笔带过,也没在意,今天学XPath的时候就有关于上下文节点有一个说明,但是只说了一点,没啥详细,所以自己百度了下,如下:代码:<html> <body> <a id = '1'>文本节点1</a> <a id = '2'>文本节点2</a> <a id = '3'>文本节点3</a> </body> </html> ...

846 0 0

YoDu魔改版主题v3.1更新 (修复bug)

YoDu魔改版主题v3.1更新:修复了长代码在小分辨率下无法换行问题。针对表格代码做了样式调整。回复可见代码微调。修复了footer元素由于启用了css3的弹性布局,导致tim使用软件内浏览时,其内核过旧不能支持,特重新调整,改为css2特性,取消了footer的背景渐变。字体大小调整。

1283 0 0
YoDu魔改版主题v3.1更新 (修复bug)

Typecho表格的创建写法和table的css样式分享

之前就听说Typecho的md编辑器支持表格写法了,这次刚好在写一篇文章的时候用到了,所以顺带写了一个css分享出来,很简单的,有需要的可以复制到自己的css文件中。表格的创建写法是:|th内容|th内容| //内容与内容之间都是用|竖线分割 |---------|---| //这里用来分割表头和tbody |内容1|内容2| //需要几行就这样写几行 效果展示:查看有表格的文章CSS代码:table { width: 100%; border: 1px solid #e1e1e1; border-collapse: coll...

1792 1 0
Typecho表格的创建写法和table的css样式分享

控制tab的宽度tab-size

上一篇文章我们用渐变背景模拟了斑马纹,这次我们顺带简单了解下如何控制tab的宽度。浏览器默认一个tab是8个字符,这种感人的宽度简直让人吐血,你想想你在编辑器里一个tab才多宽,而且我们有时候经常是三个tab起步啊,这要是在浏览器里显示,简直突破天际,为此css3特意出了一个新属性:tab-size。目前tab-size在日常的浏览器都是支持了,but---除了微软的浏览器,微软的浏览器不知道拖了多少后腿,你想想ie....再到现在的edge,来人,做了他。嗯哼~~~有点扯远了,我们继续。tab-size目前用,建议直接用数字,虽然也能用像素单位这些,但是苹果又不行啊,所以我们还是用数字...

997 0 0
控制tab的宽度tab-size

用渐变来模拟斑马纹

斑马纹应用很广泛,用于表格,代码展示,列表展示等等,一般都是先给每一行加一个block的父元素,然后再用元素选择器:nth-child(odd)和:nth-child(even)来选择奇数元素和偶数元素,这样就会产生一个问题,第一行一般都是标题之类的,这样写会让标题和内容部分相同,于是又只能再加一个选择器:first-child将第一个重置。这样虽然说是可以,但是岂不是很麻烦,需要给每一个子元素加一个block,如果子元素本身就是block那好办,如果不是呢,只是纯文本呢,那不是还要用js去选择,得不偿失,于是我们可以试着用背景层去模拟,然后用em或者rem单位控制大小,这样,既可以自适...

1133 0 0
用渐变来模拟斑马纹