css 常见问题总结

用户头像
靖仙
关注
发布于: 2020 年 05 月 06 日
css常见问题总结

background兼容IE8:图片路径和后面的设置加空格

background: url(../images/log.png) center center no-repeat;

css 颜色渐变:从左到右

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 标准的语法(必须放在最后) */

使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

在这里,我们指定了下标是 3 的倍数的所有 p 元素的背景色:

p:nth-child(3n+0){background:#ff0000;}

手机端背景图片全屏:

.body{width: 100%;height: 100%;position: fixed;z-index: -10;background-image: url(../img/10.jpg);background-repeat: no-repeat;background-position: 0px 0px;background-size: 100% 100%;}

四则运算:动态计算长度值 :

width: calc(100% - 50px);

select/option文本居中或居右对齐:

direction: rtl;

单行文本溢出:

overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

多行文本溢出:

display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;

屏蔽阴影

-webkit-appearance:none

Meta标签

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /><meta content="telephone=no" name="format-detection" /> // 自动识别电话限制<meta content="email=no" name="format-detection" /> // android上自动识别邮箱限制

获取滚动条的值:

window.scrollY window.scrollX

禁止选择文本

-webkit-user-select:none

css之border-box

element{ width: 100%; padding-left: 10px; box-sizing:border-box; -webkit-box-sizing:border-box; border: 1px solid blue;}

Retina屏幕高清图片

selector { background-image: url(no-image-set.png); background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;}

重力感应事件:

if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); } var speed = 30;//speedvar x = y = z = lastX = lastY = lastZ = 0;function deviceMotionHandler(eventData) { var acceleration =event.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) { //简单的摇一摇触发代码 alert(1); } lastX = x; lastY = y; lastZ = z;}

移动端touch事件:

  • touchstart //当手指接触屏幕时触发

  • touchmove //当已经接触屏幕的手指开始移动后触发

  • touchend //当手指离开屏幕时触发

  • touchcancel//当某种touch事件非正常结束时触发

这4个事件的触发顺序为: touchstart -> touchmove -> touchend ->touchcancel 对于某些android系统touch的bug: 比如手指在屏幕由上向下拖动页面时,理论上是会触发 一个 touchstart ,很多次 touchmove ,和最终的 touchend ,可是在android 4.0上,touchmove只被触发一次,触发时间和touchstart 差不多,而touchend直接没有被触发。这是一个非常严重的bug,在google Issue已有不少人提出 ,这个很蛋疼的bug是在模拟下拉刷新是遇到的尤其当touchmove的dom节点数量变多时比出现,当时解决办法就是用settimeout来稀释touchmove。

单击延迟

click 事件因为要等待双击确认,会有 300ms 的延迟,体验并不是很好。 开发者大多数会使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。 Creating Fast Buttons for Mobile Web Applications Eliminate 300ms delay on click events in mobile Safari

IOS里面fixed的文本框焦点居中

<!DOCTYPE html> <head> input { position:fixed; top:0;left:0; } </head> <body> <div class="header"> <form action=""> <label>Testfield: <input type="text" /></label> </form> </div> </body></html>

解决办法有两个: 可以在文本框获得焦点的时候将fixed改为absolute,失去焦点时在改回fixed,但是这样会让屏幕有上下滑动的体验不太好。

.fixfixed { position:absolute;}$(document) .on('focus', 'input', function(e) { $this.addClass('fixfixed'); }) .on('blur', 'input', function(e) { $this.removeClass('fixfixed'); });

还有一种就是用一个假的fixed的文本框放在页面顶部,一个absolute的文本框隐藏在页面顶部,当fixed的文本框获得焦点时候将其隐藏,然后显示absolute的文本框,当失去焦点时,在把absolute的文本框隐藏,fixed的文本框显示。

.fixfixed { position:absolute;}$(document) .on('focus', 'input', function(e) { $absolute..show(); $this.hide(); }) .on('blur', 'input', function(e) { $fixed..show(); $this.hide(); });

position:sticky

position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。

.sticky { position: -webkit-sticky; position:sticky; top: 15px; }

手机拍照和上传图片

<!-- 选择照片 --><input type=file accept="image/*"><!-- 选择视频 --><input type=file accept="video/*">

动画效果时开启硬件加速 :

我们在制作动画效果时经常会想要改版元素的top或者left来让元素动起来,在pc端还好但是移动端就会有较大的卡顿感,这么我们需要使用css3的 transform: translate3d;来替换, 此效果可以让浏览器开启gpu加速,渲染更流畅,但是笔着实验时在ios上体验良好,但在一些低端android机型可能会出现意想不到的效果。

快速回弹滚动:在iOS上如果你想让一个元素拥有像 Native 的滚动效果,你可以这样做:

.div { overflow: auto; -webkit-overflow-scrolling: touch; }

经测试,此效果在不同的ios系统表现不一致, 对于局部滚动,ios8以上,不加此效果,滚动的超级慢,ios8以下,不加此效果,滚动还算比较流畅 对于body滚动,ios8以上,不加此效果同样拥有弹性滚动效果。

ios和android局部滚动时隐藏原生滚动条

<p>android</p>::-webkit-scrollbar{ opacity: 0;}<p>ios 使用一个稍微高一些div包裹住这个有滚动条的div然后设置overflow:hidden挡住之</p>```css.wrap{ height: 100px; overflow: hidden;}.box{ width: 100%; height: -webkit-calc(100% + 5px); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;}<div class="wrap"> <div class="box"></div></div>

设置placeholder时候 focus时候文字没有隐藏:

input:focus::-webkit-input-placeholder{ opacity: 0;}

移动端不同的input对应不同的键盘展示样式

ios —- android type emailtype urltype teltype search

background-image和image的加载区别

在网页加载的过程中,以css背景图存在的图片background-image会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的标签img是网页结构(内容)的一部分会在加载结构的过程中加载,换句话讲,网页会先加载标签img的内容,再加载背景图片background-image,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。 

用户头像

靖仙

关注

生活将我们磨圆,只是为让我们滚得更远。 2019.01.16 加入

一个打杂的

评论

发布
暂无评论
css常见问题总结