如何在 Sass 中方便引用祖先选择器 • July 14, 2020
Sass 提供了双亲选择器 & 用以在嵌套选择器中引用外部的选择器，本文聊聊如何进一步往外引用，为当前选择器添加祖先选择器。
CSS 属性值计算 • July 03, 2017
属性值的计算可谓是 CSS 101 。然而入门资料从来都是良莠不齐的，当初从畅销书上得来的一些误解，如今整理笔记的时候才发现。这里就结合规范梳理一遍。 一个属性的值在计算时会经过 4 个阶段 Specified values Computed values Used values Actual values Specified values 这里有 3 种可能，满足一种就可以 计算 cascade…
CSS VFM 中易混淆的名词概念 • May 29, 2017
:warning:第一遍看 CSS2.1 VFM（Visual Formatting Model）是看别人整理的笔记，辅助理解很不错，但是在名词概念上作者跳过了一些或者打乱了顺序，所以现在看回文档时发现当初有一些理解不太正确。于是在这篇文章将这些概念系统整理了一遍。 Element 与 Box 第一个概念是 Element （元素）与 Box （盒子）。用 Element…
纯 CSS 实现浮动介绍 • April 29, 2017
把扩展上传到 Chrome 商店需要在开发者后台填写一系列表单，非常喜欢它对详细介绍的处理，就想着偷师一下。 先上效果，下面是模仿的样子。由于详细介绍一般比设置本身要长，它使用了隐藏、按需显示的方式减少了高度。 看了开发者后台的代码，它是使用 JavaScript 响应鼠标事件并计算高度和显示。作为 CSS 洁癖，我第一反应当然是先考虑用 CSS…
Progressive background-image With Ease • December 26, 2016
Everyone likes smooth loading. Lately I tried to make the background-image of the menu to load progressively(also to the cover if you view the blog on mobile). If you take a look at how Medium does…
CSS 过渡未知高度 • November 12, 2016
有时候往 dom 里插入一些元素，会希望 dom 慢慢腾开空间，再把插入的元素呈现出来。 但对于过渡 height 未知的元素，暂时没有完美的方法，浏览器还不支持 height 过渡到 auto。而且这种方式也会造成这个元素后面的所有元素一并重绘，蛮耗资源的。 以下是利用 max-height 来过渡，适合已知元素高度的范围。但也不是完美方法，max-height…
自适应背景图片 • September 11, 2016
很多时候我们希望背景图片能够在元素不同大小的情况下都能够显示出主体。 居中是最常见的方式，但如果主体不在中间这个效果就大打折扣了。 这个对我来说一开始仅仅是一个念头，也没太注意。直到一次在 podcast 上听到有位嘉宾做了一个 jQuery 插件 https://github.com/wentin/ResponsifyJS…
CSS 自适应正方形 • February 28, 2015
padding 使用百分数值时是根据其包含块的 width 值计算的。 With respect to the width of the containing block. 所以可以利用 height = 0; 并用 padding-bottom = 100%; 撑起一个正方形： 参考资料 CSSだけで正方形を作る padding-CSS MDN
CSS Font 单位 • August 16, 2014
了解 CSS font 各个单位的意义，搜了一些资料。 [1] 绝对单位 cm (centimeter 厘米) mm (millimeter 毫米) in (inch 英寸) pt (point 点) pc (pica 派卡) 相对单位 em (em = 目标元素像素值 / 父元素 font-size 的像素值) [3] ex (约为小写字母 a, c, m, o 之类的高度) [1] px…