arr[4] = css
这里分析css的知识
我可能码的是假代码
主攻HTML5、Vue.js、ES6等新一代web前端内容。有PHP开发经验。
展开
-
记录国产浏览器flex-basis的蜜汁bug
使用element-ui开发的时候遇到了坑,在chrome、Firefox、就连IE都正常的情况下,国产浏览器(极速内核)却有问题。大概的布局是这个意思:<!-- body已经设置height:100% --><el-container style="height: 100%;"> <el-container> <el-...原创 2020-04-01 18:28:59 · 283 阅读 · 0 评论 -
position:sticky实现吸顶效果以及兼容性
在开发时遇到一个吸顶效果的需求,先看一下最终实现的效果:收到这个需求的时候,其实也知道position:stricky这个属性,现在重新介绍一下:这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden,则父...原创 2020-03-26 18:31:42 · 5571 阅读 · 0 评论 -
实现一行或多行文本溢出省略效果 常用方法汇总
纯CSS方案单行比较简单:/* css部分 */.ellipsis{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}<!-- html部分 --><div class="ellipsis" style="width:100px">hello worl...原创 2020-03-18 19:09:48 · 161 阅读 · 0 评论 -
opacity: 0、visibility: hidden、display: none 优劣和适用场景
素display:noneDOM 结构:元素完全从渲染树中消失,不占据空间; 子节点:不会被子节点继承,子节点设置display:block也无法显示; 性能:改变此属性时会引起重排和回流,性能较差;但由于修改被隐藏的子节点时不会进行重排,所以在大量修改子节点样式时,先隐藏修改完在显示会有较好的性能; Event事件:无法进行 DOM 事件监听、无法被选中; transition:tra...原创 2020-03-18 17:49:22 · 287 阅读 · 0 评论 -
基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
之前写过一个小项目,首先这个页面布局是这个样子滴,举个栗子,京东的首页:这算是一种还算常见的页面样式吧,头部和底部固定(或者底部固定没有头、头部固定没有底),有的会用fixed去做,但有在很多手机上会出现很多的奇葩的问题。思前想后,后来我决定使用弹性布局去做,至少在手机浏览器中都是支持的,虽然写法上可能为了考虑老版本要多谢一些兼容性的无用CSS,配合HTML5 history AP原创 2017-02-23 14:14:19 · 20385 阅读 · 0 评论