![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
nysheng
这个作者很懒,什么都没留下…
展开
-
移动端元素移动导致的页面滚动问题(滚动穿透)
引 需求要做个功能,页面上的一个小图标从固定变成可移动。一把梭哈后,在PC上显示没有问题,移动的可欢快了,但是到了手机里以后出现了“联动问题”。 所以,当元素移动的时候,页面也会出现上下的滚动,这样的体验是超级差的。 解决方案 document.addEventListener('touchstart', function(e){ console.log('开始移动'); const scrollTop = document.body.scrollTop || document.原创 2020-07-21 15:36:27 · 976 阅读 · 0 评论 -
前端知识点(css,html,js,http)自己整理
行内元素 a ,b ,button ,i ,span ,img ,input ,textarea ,select… 块级元素 article ,dic ,form ,h1-h6 ,header ,hr ,ul ,li ,p ,table… postion 值 relative, static, absolute, sticky JS 数据类型 number, boolean, string, u...原创 2020-03-24 19:58:19 · 337 阅读 · 0 评论 -
回流和重绘
一、引 再总结(复制)个面试知识点 二、浏览器渲染过程 看过这张图的人应该不少吧…这张图是介绍了下浏览器是如果从一段数据转成一个页面的: 解析 HTML 和 CSS 分别生成 Dom Tree 和 Css Tree。 然后就是俩颗树的结合,生成了可以被渲染的 render Tree。 回流,通过 render Tree 进行回流,得到各个可见节点的位置大小等信息。 重绘,就是把对应地方的节点绘...原创 2020-03-20 11:22:09 · 125 阅读 · 0 评论 -
浅谈前端性能优化
引 优化那肯定是为了让性能更好,让体验更好。在前端的优化来说,大概分俩类,1、页面优化,2、代码优化。废话不多,直接介绍。 一、页面优化 每次请求,说白点都是互联网的大动作,时间成本和资源成本很高,一个完整的HTTP请求是经过很多步骤的,所以减少请求是十分重要的。 接下来讲下几个方法: 设置缓存,http 缓存是前端性能优化中非常重要手段,把一些常用资源在首次加载时缓存到浏览器本地,再次需要时可...原创 2019-11-28 20:33:55 · 156 阅读 · 0 评论 -
CSS中居中方法总结
一、水平居中 1.元素:行内;宽度:不定 .outer{ text-align: center; } <div class="outer"> <div class="inner">Hello world</div> </div> 2.元素:块级;宽度:确定 .inner{ margin: 0 auto; } <div ...原创 2019-07-24 19:38:35 · 276 阅读 · 0 评论