问题小记

event.target 和 event.currentTarget 的区别

event.target 和 event.currentTarget 的区别

冒泡和捕获: 当addEventListener的第三个参数为true的时候,代表是在捕获阶段绑定;当第三个参数为false或者为空的时候,代表在冒泡阶段绑定

结论:event.target指向引起触发事件的元素,而event.currentTarget则是事件绑定的元素,只有被点击的那个目标元素的event.target才会等于event.currentTarget。

line-heiht

line-height有5个值

  1. normal   浏览器默认属性值为纯数值1.2(不同浏览器或有差异)   
  2. inherit   继承父元素的值,默认值   
  3. 百分比值   如果一个元素的font-size是16像素 那么如果设置150%的行高 最后的实际行高会是16像素*150% = 24像素 并且其子孙元素会继承这个像素值
  4. 长度值   一个元素如果设置了长度值为line-height 那么这个长度值就会被继承
  5. 纯数值   一个元素如果设置了纯数值为line-height,那么这个纯数值会被继承。例如一个元素行高为1.5 其font-size为16像素 那么它的实际行高为16 1.5 = 24像素 而它的子元素font-size为12像素 那么它的实际行高为121.5 = 18像素

注意事项:

  • 所有浏览器都支持line-height,但ie不支持 line-height 的 inherit 值
  • line-height 不允许设置负值
  • 未设高度的空div中的文字之所以有高度,是因为line-height。在inline box模型中,有个line boxes,line-boxes是根据文案、图片等这些资源生成的一个高度框,自身不产生高度。line-boxes的默认高度为字体高度的110%
  • 使用height会使标签haslayout,而使用line-height则不会。

IE8问题

  • 在背景上放置链接,是不可点击的,通过设置层级z-index也不行。hack方法:为链接设置position: relative 或者 设置background: #fff,在将背景设置透明 ## 移动端 * active伪类在PC端的作用为鼠标点击到放开时给元素添加样式用,呈现目标被点击的激活状态。需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 <br>``` document.body.addEventListener('touchstart', function (){}); //...空函数即可

居中问题

  • 多行高度不定文字居中,padding-top和padding-bottom设置相同即可
  • 单行文本的垂直居中,line-height = height
  • 多行文本的高度固定居中, display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上。vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。

px、em和rem的区别

px: 像素px是相对于显示器屏幕分辨率而言的(引自CSS2.0手册)

em: 相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

  • em的值不固定,会继承父级元素的字体大小
  • 避免字体大小被重复计算,也就是1.2 * 1.2= 1.44的现象

rem:始终是基于根元素 ,是目前比较好的解决方法。

去除inline-block元素之间的空隙

造成空隙的原因:因为元素之间有空格或者换行 解决办法

  • 除掉空白符; 但缺点是代码风格和结构都不美观
  • font-size:0; 空白符也是字符,设置字体大小为0是可以实现除去字符的。缺点是需要为子元素依次设置字体大小,低版本chrome不支持设置font-size:0; 需要加上 -webkit-text-size-adjust:none 私有属性来支持设置。
  • word-spacing/letter-spacing: 使用负值,设置的负值是和字体大小有关系,但是如果设置过大的话,会造成重叠

postCss

详细解释:https://www.ibm.com/developerworks/cn/web/1604-postcss-css/index.html 点击链接

node端获取用户ip

function getClientIp(req) {
    return req.headers['x-forwarded-for']
        || req.connection.remoteAddress
        || req.socket.remoteAddress
        || req.connection.socket.remoteAddress;
}

禁止chrome安全策略

mac电脑禁止chrome安全策略,允许支持后端接口跨域,在Applications 目录下,执行

## 屏幕尺寸限制 meta
通常利用媒体查询做相关的样式展示

@media screen and (max-width: 359px) { display: none; }

### viewport
借助 <meta>元素的 viewport来帮助我们设置视口、缩放等,从而让移动端得到更好的展示效果

<meta name=”viewport” content=”width=device-width; initial-scale=1; maximum-scale=1;minimum-scale=1; user-scalable=no;”

### setRem函数

// setRem函数 (function () { var win=window, html=document.documentElement; function setRem() { var width = html.getBoundingClientRect().width; var rem = width / 10; win.rem = rem; html.style.fontSize = rem + ‘px’; } setRem(); window.setRem = setRem; })();

### 上传input
1、解决input[type=file]打开时慢、卡顿问题
因为Chrome的safeBrowsing功能会在上传或者保存时检查文件,国内访问google速度比较慢,SafeBrowsing就会让Chrome挂起一段时间,直到文件检查结束或者超时。
所以可以使用:

accept=”image/png, image/jpeg, image/gif”

`

因为这些MIME类型在SafeBrowsing的白名单里面,不需要检查。

2、打开页面,自动调起<input type="file">文件选择的解决办法

  • 在页面打开时,执行js方法并手动trigger触发input的click事件,还有视频video自动播放,会因为浏览器的安全策略而被禁止,解决办法是,需要用户手动点击进行触发,因此可以尽量收敛产品逻辑,将页面的行为(打开新页或者自动播放视频等逻辑)放在一个页面中处理,比如,点击了播放视频按钮之后,看似是新开了页面,但是将页面逻辑控制一个页面,并不做跳页面处理,而只是将页面逻辑拿过来使用即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C语言入门到精通

6.7 变量的存储方式和生存期

函数中的局部变量,如果不专门声明为static(静态)存储类别,都是动态地分配存储空间 的。在调用该函数时,系统会给这些变量分配存储空间,在函数...

8520
来自专栏苏生不惑

上班摸鱼好去处

现在各种资讯网站那么多,微博,知乎,头条,公众号等等,打开一个个APP或网站,一来浪费时间,二来也麻烦,这里推荐一些聚合网站,一个网站聚合这些网站的热榜,不怕再...

9040
来自专栏每天学点Android知识

你应该了解的JNI知识(二)——Java与JNI互相调用

在你应该了解的JNI知识(一)——静态注册与动态注册中,了解了JNI是如何使用的,以及两种注册方式的使用以及区别。本篇博客将介绍Java和JNI的互相调用,因此...

11840
来自专栏算法修养

LeetCode 42. Trapping Rain Water

7420
来自专栏C语言入门到精通

6.8 内部函数和外部函数

解释:只能被本文件中其他函数所调用,在定义内部函数时,在函数名和函数类型的前面加static,所以内部函数又称静态函数

5510
来自专栏陌无崖知识分享

关于log日志的深入学习笔记

什么是日志,简单来说就是记录,在程序中日志担任着重要的作用,利用日志信息,我们可以很轻易发现程序的运行状况,一个输出格式化很好的也可以很轻易的进行数据分析。那么...

7220
来自专栏程序员维他命

图解 LeetCode 链表: 206. Reverse Linked List

今天是 LeetCode 算法的 第 1 阶段第 5 天 ,这一阶段主要学习链表相关的算法题和链表数据结构。今天的题目是反转单链表,这道题面试被问到的几率很大,...

9520
来自专栏一猿小讲

吐槽,Java 设计的槽点

你是否曾经在面试的时候,经常被问到:数组有没有 length() 方法?字符串有没有 length() 方法? 集合有没有 length() 方法?

6210
来自专栏每天学点Android知识

你应该了解的JNI知识(一)——静态注册与动态注册

由于我是做Android的,因此重点关注JNI,主要是总结应该知道的一些JNI知识。

10920
来自专栏cs

css的知识点

水平导航栏 有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

8410

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励