关于1px边框问题的探索

1px在不同设备的一个探究其实我们要搞明白两个问题:为什么有时候边框无法在部分手机显示?我们真的要小于1px吗为什么有时候边框无法在部分手机显示?有两种设置方式:0.5px0.22rem首先0.5px在老手机是不支持的,特别是安卓,0.5px(小于1px)会被视为1px渲染。0.22rem或者0.22em他们都是相对父级或者根元素进行换算的,最终他们也得变成px单位渲染,有可能是大于1px,有可能会小于1px,最终也会出现部分手机边框是粗的,原因也是因为不足1px被当1px渲染了。还有一个原因,但是需要先了解一些屏幕像素的知识了!我们可以将屏幕的像素视为一个个小方格,一排可能就n个这种大...

750 58 0

transform 知识补充

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

599 0 0
transform 知识补充

grid布局

基本格子<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...

810 0 0
grid布局

meta name= viewport 知识补充

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

2053 1 0
meta name= 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会根据主轴的来设置元素的宽度还是高度:当主轴是...

633 0 0

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...

1147 0 0
scale与taranslate的倍数关系

纯css来做表单校验样式

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

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

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

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

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

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

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

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

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

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

1968 0 0

fieldset元素宽度撑开的问题

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

1753 5 0

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

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

2392 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-...

2118 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...

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

fit-content()函数

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

2563 1 0

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

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

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

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

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

2109 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...

1810 0 0
css3 字体渐变动效

多行文本溢出显示省略号

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

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

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

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

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

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

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

2096 0 0

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

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

1914 0 0

margin负值拉伸元素

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

2197 0 1

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

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

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

为博客文章加上标签

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

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