web常用知识
Html
打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信
<a href="sms:10086">发短信给: 10086</a>
发邮件
<a href="mailto:邮箱名">邮箱名</a>
IOS下,取消input在输入的时候英文首字母的默认大写的情况
<input autocapitalize="off" autocorrect="off" />
取消微信浏览器缓存
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Css
Ios兼容性
去掉IOS下点击时的灰色半透明背景
-webkit-tap-highlight-color: rgba(0,0,0,0);
禁止IOS调整字体大小
body {
-webkit-text-size-adjust: 100% !important;
}
webkit下的placeholder文字颜色修改
-webkit-input-placeholder
阻止IOS长按时的系统菜单
// 全局*使用,会导致输入框表单在Ios中无法进行字符键入
-webkit-touch-callout: none
IOS下CSS滚动不流畅
// 对于局部滚动,ios8以上,不加此效果,滚动的超级慢,ios8一下,不加此效果,滚动还算比较流畅 // 对于body滚动,ios8以上,不加此效果同样拥有弹性滚动效果 -webkit-overflow-scrolling: touch;
Android兼容性
去除Android的语音输入按钮
input::-webkit-input-speech-button {
display: none;
}
隐藏特定Android机型的灰色滚动条线
::-webkit-scrollbar {
opacity: 0;
width: 0;
height: 0;
background: rgba(0,0,0,0);
}
Android局部滚动时隐藏原生滚动条
::-webkit-scrollbar{
opacity: 0;
}
通用兼容性
webkit默认表单样式去除
-webkit-appearance:none
禁止长按时下载图片
-webkit-touch-callout: none
禁用radio和checkbox默认样式
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}
禁止winphone默认触摸事件
-ms-touch-action: none
禁止用户选中文字
css方法:-前缀-user-select:none; js方法:onselectstart='return false';
设置了placeholder文字,focus时文字没有隐藏
input:focus::-webkit-input-placeholder{
opacity: 0;
}
-webkit-filter: grayscale(100%) 在retina下模糊
-webkit-filter: grayscale(100%);
css3-translateY移动抖动
将单位从百分比单位改成px
动画过程有闪烁
// 通常发生在动画开始的时候
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
当CSS中定义中文font-size小于12px的时候,浏览器仍然使用12px时
// 放在body上会导致页面缩放失效,建议不要定义成可继承的或全局的
-webkit-text-size-adjust:none
相关知识
单行文字省略
.txt-omit {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行文字省略
.txt-omit2{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 行数
-webkit-box-orient: vertical;
}
文字换行
word-break:break-all [怎样进行单词断句]
word-warp:break-word [是否允许在单词内断句]
overflow-wrap:break-word [css3用来代替word-warp的,兼容性不够]
word-break和word-warp区别
word-break ——keep-all兼容性不够,效果上等同normal
——简单粗暴,直接在一行内断行,不管是否前面是否有英文单词 word-warp ——无兼容性问题,放心使用;
——如果一行中存在英文单词,会将其后"长单词"移到下一行 word-break ——存在非官方的break-word属性,只有苹果和谷歌等webkit游览器支持 word-break :break-all ——免疫中文逗号对"长单词"的自动断行,word-warp:break-word不行 ———————————————————————————
word-break:break-word和word-warp:break-word效果等同
推荐使用[word-break:break-all],不存在任何问题
disabled和readonly的区别
disabled:会使文本框变灰,而且通过request.getParameter("name")得不到文本框中内容(如果有的话) readonly:只是使文本框不能输入,外观没有变化,而且通过request.getParameter("name")可以得到内容
Flex布局
布局定义
.box{
display: -webkit-flex; /*webkit*/
display: flex;
} /*行内flex*/
.box{
display: -webkit-inline-flex; /*webkit*/
display:inline-flex;
}
容器样式
.box{
flex-direction: row | row-reverse | column | column-reverse;
/*主轴方向:左到右(默认) | 右到左 | 上到下 | 下到上*/ flex-wrap: nowrap | wrap | wrap-reverse;
/*换行:不换行(默认) | 换行 | 换行并第一行在下方*/ flex-flow: <flex-direction> || <flex-wrap>;
/*主轴方向和换行简写*/ justify-content: flex-start | flex-end | center | space-between | space-around;
/*主轴对齐方式:左对齐(默认) | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/ align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉轴对齐方式:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/ align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*多主轴对齐:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
}
子元素样式
.item{
order: <integer>;
/*排序:数值越小,越排前,默认为0*/ flex-grow: <number>; /* default 0 */
/*放大:默认0(即如果有剩余空间也不放大,值为1则放大,2是1的双倍大小,以此类推)*/ flex-shrink: <number>; /* default 1 */
/*缩小:默认1(如果空间不足则会缩小,值为0不缩小)*/ flex-basis: <length> | auto; /* default auto */
/*固定大小:默认为0,可以设置px值,也可以设置百分比大小*/ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/*flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,*/ align-self: auto | flex-start | flex-end | center | baseline | stretch;
/*单独对齐方式:自动(默认) | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}
JavaScript
移动端经验
移动端横竖屏检测
orientationchange-事件
window.orientation-旋转角度
90-右旋
-90-左旋
企业微信端无法触发IOS自动播放
WeixinJSBridge.invoke('showItemMenus',{},function(res){
audio.play()
})
微信内关闭页面方法
WeixinJSBridge.invoke('closeWindow');
WeixinJSBridge.call('closeWindow');
微信页面调整字体大小的问题
/**
* 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小
* 但是会有一个1秒左右的延迟,期间可以考虑通过loading展示
* 仅供参考
*/
(function(){
if (typeof(WeixinJSBridge) == "undefined") {
document.addEventListener("WeixinJSBridgeReady", function (e) {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
alert(JSON.stringify(res));
});
},0);
});
} else {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
alert(JSON.stringify(res));
});
},0);
}
})();
相关知识
== 和 === 的区别
1.对于string,number等基础类型,==和===是有区别的 a.不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等 b.同类型比较,直接进行“值”比较,两者结果一样 2.对于Array,Object等高级类型,==和===是没有区别的 a.进行“指针地址”比较 3.基础类型与高级类型,==和===是有区别的 a.对于==,将高级转化为基础类型,进行“值”比较 b.因为类型不同,===结果为false
undefined与null的区别
——涵义上: 1.null为空对象指针,undefined为未声明对象 2.null表示"无"的对象(转为数值时为0),undefined表示"无"的初始值(转为数值时为NaN) 3.null表示"没有对象",即此处不应该有值;undefined表示"缺少值",即此处应该有一个值,但是还没有定义 4.undefined值是派生自null值,因此ECMA-262规定对它们的相等性测试要返回true ——用法上: [null] 1.作为函数的参数,表示该函数的参数不是对象 2.作为对象原型链的终点 [undefined] 1.变量被声明了,但没有赋值时,就等于undefined 2.调用函数时,应该提供的参数没有提供,该参数等于undefined 3.对象没有赋值的属性,该属性的值为undefined
mouseover与mouseenter的区别
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件
mouseout与mouseleave的区别
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件
根据坐标获取元素
element.elementFromPoint(x, y);
web常用知识的更多相关文章
- web前端知识体系总结
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- 自己总结的web前端知识体系大全【欢迎补充】
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- web前端知识体系大全
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- web前端知识体系小结(转)
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- javascript常用知识点集
javascript常用知识点集 目录结构 一.jquery源码中常见知识点 二.javascript中原型链常见的知识点 三.常用的方法集知识点 一.jquery源码中常见的知识点 1.string ...
- WEB相关知识和Tomcat服务器
WEB相关知识 1.Internet上供外界访问的Web资源分为: 静态web资源:指web页面中供人们浏览的数据始终是不变的. 动态web资源:指web页面中供人们浏览的数据是由程序产生的,不同时间 ...
- (1)写给Web初学者的教案-----学习Web的知识架构
1:学习Web的知识架构 前文中我们简单的介绍了一些关于Web的基本知识,这里任老师再次强调一下凡是用浏览器打开的网站我们就称之为Web应用程序(B/S结构).除此之外其它需要下载安装的软件或是手机 ...
- Web前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
- Java web 入门知识 及HTTP协议详解
Java web 入门知识 及HTTP协议详解 WEB入门 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资 ...
随机推荐
- 用git提交新项目到github
1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...
- linux添加默认网关
运维常用linux命令整理 1.临时添加 route add default gw 192.168.1.4 2.永久添加 vim /etc/sysconfig/network GATEWAY=192. ...
- pyenv的安装和简单使用
centos7.4 python2.7 安装pyenv需要的依赖 yum -y install gcc zlib-devel bzip2-devel openssl-devel ncurses-d ...
- 第八届蓝桥杯java b组第八题
,标题:包子凑数 小明几乎每天早晨都会在一家包子铺吃早餐.他发现这家包子铺有N种蒸笼,其中第i种蒸笼恰好能放Ai个包子.每种蒸笼都有非常多笼,可以认为是无限笼. 每当有顾客想买X个包子,卖包子的大叔就 ...
- 敏捷测试--之scrum--原理
Scrum 是一个用于开发和维持复杂产品的框架 ,是一个增量的.迭代的开发过程.在这个框架中,整个开发过程由若干个短的迭代周期组成,一个短的迭代周期称为一个Sprint,每个Sprint的建议长度是2 ...
- Spring Boot (六): 为 JPA 插上翅膀的 QueryDSL
在前面的文章中,我们介绍了 JPA 的基础使用方式,<Spring Boot (三): ORM 框架 JPA 与连接池 Hikari>,本篇文章,我们由入门至进阶的介绍一下为 JPA 插上 ...
- ZooKeeper单机服务端的启动源码阅读
程序的入口QuorumPeerMain public static void main(String[] args) { // QuorumPeerMain main = new QuorumPeer ...
- Linux 文件或文件夹重命名命令mv
使用命令mv既可以重命名,又可以移动文件或文件夹.例如: 1.将目录A重命名为B mv A B 2.将/a目录移动到/b下,并重命名为c mv /a /b/c 3.将一个名为abc的文件重命名为123 ...
- 解决Git报错:error: You have not concluded your merge (MERGE_HEAD exists).
Git fetch和git pull的区别, 解决Git报错:error: You have not concluded your merge (MERGE_HEAD exists). 2017年02 ...
- 揭秘C# SQLite的从安装到使用
SQLite,是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了 ...