“CSS相关”目录存档

深入理解position sticky粘性定位的计算规则

2020年03月7日,星期六

sticky布局效果缩略图

sticky粘性定位规则比较复杂,涉及“流盒”(flow box)和“粘性约束矩形”等概念,如果不搞清楚原理,是无法明白明明设置了粘性定位样式却没有效果的原因的。

阅读全文…

我是如何通过CSS向JS传参的

2020年02月13日,星期四

头图占位图

介绍两种我常用的将CSS媒体查询信息传递给JS的方法,一种是伪元素+content属性发,一种是CSS var自定义属性方法,这样传参有助于降低开发成本,让CSS和JS在一些条件信息上保持一致。

阅读全文…

CSS @supports开始支持selector选择器检测了

2020年02月12日,星期三

@supports规则选择器语法

CSS @supports规则现在不仅支持CSS新的属性或者属性值的检测,还支持selector选择器的检测,真是越来越强大了,语法很简单,但是还是有一些需要注意的细节知识。

阅读全文…

CSS any-hover any-pointer media查询与交互体验提升

2020年01月17日,星期五

media媒体查询文章头图

大屏的触屏设备访问我们的传统网页的时候,CSS any-hover any-pointer等媒体查询可以极大地提升我们产品的用户体验。

阅读全文…

CSS grid-auto-flow深入理解

2020年01月15日,星期三

考拉和树

本文带你深入理解CSS grid-auto-flow各个关键词的作用表现,可以更加明白Grid布局为何会有这样的表现,同时演示grid-auto-flow独有的实用布局场景。

阅读全文…

CSS overscroll-behavior让滚动嵌套时父滚动不触发

2020年01月5日,星期日

小鱼儿占位图

要实现窗体不跟着子元素滚动的交互效果,有专门的CSS – overscroll-behavior,本文就通过真实案例,配合精心制作的GIF介绍这个CSS新特性,快来学习吧,说不定第二天就能在实际项目中使用咯。

阅读全文…

CSS inherit是继承,那initial和unset呢?

2020年01月2日,星期四

CSS3个全局属性值inherit表示继承, initial表示初始值,unset表示不确定值(能继承就继承,不能就初始值)。本文主要介绍initialunset两个CSS全局关键字。

阅读全文…

CSS paint-order祝大家元旦快乐

2020年01月1日,星期三

SVG中图形绘制默认顺序是先填充,再描边,再标记,由于描边是居中的,就会导致文字描边的时候文字本身的填充会被覆盖掉,使用CSS paint-order可以有效解决这个描边问题。

阅读全文…

Oh My God,CSS flex-basis原来有这么多细节

2019年12月31日,星期二

css flex-basis文章占位图

Flex元素尺寸由盒模型,自身尺寸和flex属性共同决定,其中,自身尺寸包括width和content内容尺寸,flex属性中的flex-basis直接与尺寸关联,这些尺寸混杂在一起,究竟是如何生效的呢?其中细节又是什么呢?本文会为你揭晓这些问题的答案。

阅读全文…

CSS flex属性深入理解

2019年12月22日,星期日

CSS flex深入理解

一文轻松弄懂CSS flex简写语法的含义,从此各种自适应布局驾轻就熟。细节,深入,用心的案例,静心制作的演示说明GIF,全为了让你更轻松地理解与更容易地学习。

阅读全文…