css
Zoro佐罗
知道多一些又不会被灭口
展开
-
了解及优化页面回流和重绘
题记:web开发经常会听到回流和重绘这两个词,最近看了一些文档,简单记录下自己对这两个概念的理解以及怎么尽可能避免回流和重绘,提高页面渲染速度。 概念 回流: 浏览器的渲染过程中,计算DOM节点在视口内的显示/隐藏,确切位置和大小,这个计算的阶段就是回流。 重绘 是一个元素外观的改变(自身的宽高,布局,及显示或隐藏没有改变)所触发的浏览器行为,例如改变vidibility、backgr...原创 2019-03-12 16:12:50 · 467 阅读 · 0 评论 -
CSS粘性定位 position:sticky
在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky,它是相对定位(position:relative)和固定定位(position:fixed)的混合。 使用它,我们不再用监听scroll事件,即可实现导航栏滚动绝对定位的效果。 网易新闻首页效果 基本用法 nav{ position:sticky; top:10p...转载 2019-02-11 11:55:08 · 1190 阅读 · 0 评论 -
npm及webstrom(自动)编译scss全攻略(输出路径)
1. Ruby安装 SCSS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SCSS。 推荐使用https://rubyinstaller.org/downloads/上下载的Windows一键安装包:) 安装包路径(64位): https://dl.bintray.com/oneclick/rubyinstaller/rubyinstall...转载 2018-08-24 00:47:26 · 1124 阅读 · 0 评论 -
CSS控制文字(单行/多行),超出部分显示省略号
- 实现单行文本的溢出显示省略号 overflow: hidden;//盒子溢出隐藏 text-overflow:ellipsis;//文字溢出显示省略号 white-space: nowrap;//文字不换行 - 多行文本溢出显示省略号 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; ...原创 2018-08-12 15:36:14 · 5035 阅读 · 0 评论