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 加入
一个打杂的
评论