在已经过去的 2020 年，盒模型的描述方式正在经历一场变革，一种重新定义盒模型的方式正在悄然流行，它不仅可以让前端的布局在逻辑上更加严谨，而且能让开发者以更少的代码写出兼容性更好的页面。它就是本文探讨的主题：CSS 逻辑属性。那么什么是 CSS 逻辑属性呢？首先让我们看一段代…

@argyleink在第四次的伦敦（LondonCSS 2020）CSS活动中分享了一个有关于CSS特性相关的话题。看了一下这个主题的PPT，里面有些新东西还是蛮有意思的。基于该PPT，我稍微整理近24个CSS方面的新特性，感兴趣的同学可以继续往下阅读。 接下来的内容我将分为：…

1. BEM（Block Element Modifier） 1. BEM是什么 2. BEM命名规则 块（Block）：块是一个独立的实体，代表一个可重用的组件或模块。 元素（Element）：元素

本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，优化性能，可以跳到后面。（这个渲染过程来自MDN） Display:将像素发送给GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而…

这个问题很多人问起过我，实际上，当我对使用 Flexbox 还不太熟悉的时候，我谷歌过这个问题很多次。查看下我的谷歌搜索历史，上一年我曾四次搜索类似“flex-basis vs width vs min-width”的问题。废话少说！今天让我来回答这个问题，希望大家以后不用再搜…

多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求，网上也有人实现过类似的功能，不过还是想自己写写看，于是就写了一个Vue的组件，本文简单介绍一下实现思路。遇到这个需求的同学可

前端的工作离不开浏览器，那么明白浏览器是如何工作的，也成为了面试官几乎必问的问题了。 如果你对这些问题还有不清楚的地方，那么我们一起共同学习把。 浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。 渲染进程。核心任务是将 HTML、CSS 和 JavaSc…

align-self 控制的是交叉轴上的 Flex 项目对齐。但问题来了，“在主轴上有没有类似的属性存在呢”，比如说“justify-self”🤔 好问题！不过答案是没有😅。但有一个已经存在的属性可以利用，那就是 auto margin ！我们可以用它控制指定元素在水平方向…

当一个元素失去焦点的时候 blur 事件被触发。它和 focusout (en-US) 事件的主要区别是 focusout 支持冒泡。不带tabindex属性的div不支持blur事件 tabinde