Sticky 也不是新知识点了，写这篇文章的原因是由于最近在实现效果的过程中，发现我对 Sticky 的理解有偏差，代码执行结果不如预期。决定写篇文章重新学习一次。 Sticky （MDN 翻译成粘性效果）是 CSS 属性 position 中的一个可选值。跟我们用得比较多的 …

margin: auto 解决了 让一个 正常布局流(normal flow) 中 固定宽度 的 块 元素 水平 居中 的问题，其原理就是：在 writing-mode: horizontal-tb 和 direction: ltr 的前提下，当我们给一个块元素设置 margi…

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。 而移动端则较为复杂，它涉及到三个视口：布局视口（Layout Viewpor…

通常我们在pc上看到的页面都是比较大的，在pc上访问页面是正常显示的，默认是不会被缩放的，除非是手动进行了缩放，页面才会被放大比例或者是缩小比例显示。但是在移动端是不一样的，如果将一个pc端的页面放到手机端进行访问，那么可能出现页面挤到一起、布局错乱或者出现横向滚动条的情况，我…

引导蒙层通常在新业务上线、或者业务有变更时的给新用户的一个操作指引。下图页面即是一个蒙层，会在某个局部位置高亮我们需要重点突出的内容： 当前发现很多页面做蒙层引导，还是使用图片形式来做。 全屏蒙层图片，图片的宽高和屏幕宽高不一致，显示两边留黑，或者有压缩的效果。 图片的引导位置…

display 设置了 none 属性会隐藏元素，且其位置也不会被保留下来，所以会触发浏览器渲染引擎的回流和重绘。 不会，因为 BFC 是页面中一个独立的隔离容器，其内部的元素不会与外部的元素相互影响，比如两个 div，上面的 div 设置了 float，那么如果下面的元素不是…

作为前端学习者的我们 或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言，可能 给初学者第一印象 就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可…

本文主要写如何在 React 中引入 less 。因为 less 和 css 非常像，因此很容易学习。而且 less 仅对 css 语言增加了少许方便的扩展，这就是 less 如此易学的原因之一。 利用 npx create-react-app 搭建的 React 项目，默认隐…

1. CSS Module CSS Module 在打包的时候会将类名转换成带有hash值的新类名，根据命名规矩，从而杜绝css类名冲突的问题。 我们可以看到，CSS Modules在最终构建页面时会自动重命名class，用vue官方描述就是，这个 module 特性指引 Vu…