css
12篇文章 · 0订阅
  • 自适应布局方案
    rem（font size of the root element）是指相对于根元素<html>来做计算的字体大小单位。 e.g. 设置html { font-size: 75px }时，其他元素1rem = 75px，4rem = 300px vw是基于viewpo…
    CSS
    自适应布局方案
  • 『前端干货篇』：你不知道的Stylus
    最近沉迷学习（其实大部分时间都在看英雄联盟S8总决赛），把这几天在学的Stylus做个总结。这篇文章对学习Stylus的新手来说应该会有帮助~ 为了让大家代码观赏性更好，这里的代码都以截图的方式呈现，用的IDE是VSCode。 Stylus是个非常优秀的CSS预编译器，算是前端…
    CSS 前端 Yarn
    『前端干货篇』：你不知道的Stylus
  • 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
    最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面上渲染的元素层级结果和我预想的不一样。根据自己之前的理解，也没找到一个合理的解释。我知道，肯定是我对相关属性…
    HTML CSS
    彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
  • CSS 阴影动画优化技巧一则
    本文不是直译，因为觉得这个技巧很有意思很有用，遂起一文。 box-shadow 在我们的工作中使用以及越来越多，伴随阴影的动画或多或少都有一点。假设，我们有下面这样一个盒子： 希望 hover 的时候，盒阴影从 box-shadow: 0 2px 4px rgba(0, 0, …
    CSS 前端
    CSS 阴影动画优化技巧一则
  • 你所不知道的 CSS 阴影技巧与细节
    关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。 最近一个新的项目，CSS-Inspiration，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖…
    GitHub CSS 前端
    你所不知道的 CSS 阴影技巧与细节
  • CSS3 box-shadow 内外阴影效果
    box-shadow 属性可以给元素边框周围添加一个或者多个阴影效果。定义多个阴影，使用逗号分隔。 inset：可选。将边框外阴影改为边框内阴影（即使是透明边框），背景之上内容之下。如果不写，默认为边框外阴影。inset只可写在最前或者最后。 offset-x：必需。阴影水平方…
    CSS
    CSS3 box-shadow 内外阴影效果
  • border-radius结合动画创建酷炫的效果
    CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。不允许负值。
    CSS
  • 重排 重绘 和优化
    5.将布局绘制(paint)在屏幕上，显示出整个页面。 第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲染。 在页面的生命周期中，网页生成的时候，至少会渲染一次。在用户访问的过程中，还会不断触发重排(reflow)和重绘(repaint)，不管页面发生了重绘还是…
    HTML
  • 重排(reflow)和重绘(repaint)
    之前面试的大佬问我关于重排重绘的原理和具体操作，一下子把我问蒙了。回家便默默地把问题记下来，仔细总结……在阅读了一些文章后，自己也有了一定的理解，所以分享给大家。希望大家也能耐心把这篇文章看完，认真思考，彻底掌握这个知识点！ 5.将布局绘制(paint)在屏幕上，显示出整个页面…
    CSS
    重排(reflow)和重绘(repaint)
  • 聊聊css position属性及其sticky属性值的特性(吸顶特效)
    CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z…
    CSS
    聊聊css position属性及其sticky属性值的特性(吸顶特效)