前两天遇到一个小需求，需要将横屏图片转为竖屏展示。整理一下相关内容。通过 csstransform rotate 来控制展示时显示效果一般是在图片审核等场景，实现一个类似的功能。方便审核人员查看图片测试传送门：[链接]transform scale 来控制展示时显示效果测试传送门：[链接]「蹭热点，请给我一面国旗@微信官方」 这是之前仿头...

前几天被人问，「如何把元素固定在容器底部」。（本来想直接把 demo 地址给他，结果没找到，那么今天我们来补一下）Demo 地址想法&思路如果是页面底部，我们可以直接 position: fixed;bottom: 0; 基于浏览器定位直接实现。但是他要的效果是基于父级容器，那么我们必须要使用其他手段来定位了relative 来限制 absolute，...

最近有个项目（就叫他 P 项目）做了一次 UI 视觉统一。之前是个小项目用的是默认主题 theme-d ，这次需求还针对性的发布了一套 theme-p 主题。然后出事故了，更新了主题之后我们的 dialog 显示异常了。使用控制台查看样式通过查看样式我们发现都是 UI 的样式，并没有我们手动覆盖的样式。但是这里有一个异常点有四个生效...

节前碰到一个需求：「新人引导效果」针对第一次使用平台的用户进行主要功能引导。具体引导路径为：点击“新增按钮”，对弹出的内容进行解释，并引导用户填充表单，最后提交表单。

这是之前朋友问我的一个功能：他觉得看网页有时候注意力会被转移，希望可以有个蒙层帮助他集中注意力反手我就用 box-shadow 把功能写了出来。 {代码...} 因为 z-index 无法超过非 static 层级导致的 bug在我测试中发现了一些比较阴间的效果所以我们要小改动一下。直接给父级 ZIndex 全部提升。 {代码...} 因为 overflow ...

Lighthouse 目前已经集成在新版本 Chrome DevTools 中，也可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。

我们也想做一个展示我们设计稿（定宽，不定高）的页面，瀑布流是很棒的一种方案。瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。还是上图来看看我们说的瀑布流布局是...

我们先来说一下限制条件可以使用 css、html、js元素为一个 100*100 的红色矩形，里面包含一个 50*50 黑色矩形只要在页面上看不到就算隐藏测试地址：[链接]实现隐藏页面元素移动到屏幕外面，眼不见心不烦marginleft + positiontransform:translate使用特性displayvisibilityopacityoverflow:hidden + 0宽高transform:scal...

正好这段时间内部在抽离常用组件，运营小姐姐最近迷上了飘屏功能，各种活动都要有个飘屏才罢休。然后就安排人抽离成组件了。结果这个组件在同一个位置绊倒了两个人，那么今天我们来分析一下。

正好前段时间用 weex 做了一个页面，weex 天生基于 flex 。且 weex 中 flex-direction 默认值为 column，flex-direction 定义了 flex 容器中 flex 成员项的排列方向。

最近公司一直在做众审平台相关的功能，大多数还都和音视频有关，前端终究还是逃不过这一劫。疯狂遇到 BUG， 今天来说说其中一个：audio 加载时意外的长时间 Pending 问题。BUG 场景vue 框架移动端（android 和 ios 的兼容也挺坑，尤其是低版本）偶现（测试数据很难复现）资源是 cdn，存在海外节点。（意味着不是海外用户...

正好回答了一个问题，浏览器哪个事件里可以 禁止 浏览器对title显示默认行为？ 。今天整理一下相关的测试 demo。分析问题先找一下关键词，从里面找一下解决问题的思路。ssrtitle默认行为seo自定义 tooltip 行为解决问题阻止浏览器默认行为（失败了）event.preventDefault() 可以用来阻止浏览器的默认行为，比如说 onsubm...

获取鼠标位置，鼠标属于的容器。mouseover，mouseout，mousedown，mouseup，mouseenter，mouseleave，mousemove 这么多事件太容易了。但是因为 DOM 结构太多了，其实要的元素有可能是父级、祖先级，这里需要实现一个类似于 jquery 的 parants。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

前两天做了一个搜索中间页，有个 input 的效果挺有意思，准备分享一下。 要求 默认时（无内容、无焦点）显示居中效果。 有焦点或者有内容，input 变长 测试地址 [链接] 实现思路 Vue + css 实现 <input v-model="value" :class="{'focus':value.length}"> 我们通过内容的长度来动态修改 class ，用来实现有内容时...

这两天又看到有人问 Vue 如何做弹幕效果。 正好我过年的时候做了个活动，其中用户可以摇签，然后 C 位飘屏展示。 Vue 版本效果地址：[链接]网上原生版本：[链接] 实现原理 弹幕动画效果 动画效果其实很简单，从右到左。 一般来说我们认知的动画流畅度顺序是 css(transform) > css(left) > js。 实现 css 的动画效...

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

还是前两天的那个唱歌中间页，上线前发现滚动时候体验不好。 因为之前没有做吸顶效果，搜索内容然后滚下去，没有找到内容需要再手动划上来。 方案一：JS 实现 js 无敌大法好。兼容极佳，但是体验上就比较感人了。这里不过多介绍。 方案二：Fixed 实现 fixed 是基于浏览器的定位，在组件中显的不是很适用。而且在 iOS 也...

前段时间公司要做个歌词标记功能，标记副歌、前奏、无效内容等等。找了找没有找到类似的实现，只能自己实现一把。 功能已经上线了，这里记录一下用到的相关内容。 需求 可以拖动进度条修改播放进度 可以拖动歌词来修改播放进度 播放时滚动歌词 标记功能 测试地址：[链接] 实现 技术栈是 Vue + vant + better-scroll。开...

面试题1：如何在数组中查找元素的下标。API 和其他实现方案都可以。 答案1：面试题不难吧？基本上我面试过的人，都能说上来用 indexOf 实现，但是我这种魔鬼还会追问的。 我先来介绍一下 indexOf 的入参 {代码...} 再来说一下 indexOf 的返回值。返回值为数值类型，返回值为查找到的元素的下标，如果没找到返回-1。（前...

工作中我相信大家都遇到过设计要求使用一些奇奇怪怪字体的需求，然后因为字体文件太大，选择切图。 我这个需求就厉害了，用户发的文章可以选择字体。这文章中可以出现的字就太多了，显然上个方案就不合适了，那我们是这么做的呢？ 废话不多说，先上 demo，别问我 demo 是谁。 接口地址：[链接] 页面地址： [链接] 实现方...

工作中我们有下面几种方式收集用户输入的内容 input 输入框，单行，整体样式，纯文本。 textarea 输入框，多行，整体样式，纯文本。 contentEditable，多行，独立样式，富文本。 其他富文本编辑器，多行，独立样式，富文本。 在不想使用那么重的富文本编辑器的情况下，又想可以换行，那么 textarea 就是我们的不二之选。...

这在家办公也不让闲着点。虽然说需求提出来了，但是我们身为一个前端er，还是要有自己的想法呀，我们要统计一波数据看看到底有多少人在横屏使用我们的产品。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。