文章关键字 ‘font-size’

时隔两年,Chrome也支持round等CSS数学函数了

2024年09月26日,星期四

封面占位图

最近Chrome进行了第4批CSS数学函数的支持,包括mod()/rem()/round(),其中round()函数尤为的实用。

阅读全文…

介绍2022最期待且已正式支持的CSS container容器查询

2022年09月27日,星期二

封面占位图CSS container

2022年最期待的大杀器CSS特性@container规则和container容器查询Chrome和Safari都已正式支持,来看看其可以做些什么,特性和语法又是什么?

阅读全文…

使用CSS size-adjust和unicode-range改变任意文字尺寸

2022年03月27日,星期日

无标签字号设置

介绍一个无需HTML标签就能控制任意字符字号大小的CSS技术,关键时候说不定可以救命,都来学学吧。

阅读全文…

纯CSS实现未读消息超过100自动显示为99+

2022年01月14日,星期五

未读消息99+

未读消息超过100显示为99+是常见的交互,目前主流实现一定是通过 JS 逻辑判断,其实纯 CSS 就能实现一模一样的功能,兼容性还不赖,进来看看吧。

阅读全文…

分享下input time输入框的细节知识

2021年03月31日,星期三

空中钓鱼-占位图

最近与type=”time”输入框打了不少交道,学到了不少细节知识,关于UI,关于时间格式,以及step/min/max属性,和大家分享下。

阅读全文…

常见纯CSS图标的代码分离与整理(持续更新)

2019年08月13日,星期二

这个周末做了个纯CSS图标的代码分离与整理页面,直接复制CSS代码,就可以使用小图标了,没有外链和图像处理,非常简单高效。

阅读全文…

基于vw等viewport视区单位配合rem响应式排版和布局

2016年08月8日,星期一

移动端网页适配最佳实践指南,基于rem和vw,配合calc计算,元素尺寸跟随根元素的font-size大小动态化智能化,可以让我们的布局真正意义适配于各种设备尺寸。

阅读全文…

以20像素为基准的CSS网页布局实践分享

2016年03月22日,星期二

以20像素为基准进行CSS网页布局,说不定会让一些细节和潜能大放光彩,当然这需要体系的配合,还需要一些完整的解决方案在里面,本文就将分享这一实践心得,保证是其他地方都没有的。外甥点灯笼——照旧(舅),有demo有截图有必要的源代码展示,希望本文的内容能够对您的学习有所帮助!

阅读全文…

去除inline-block元素间间距的N种方法

2012年04月24日,星期二

真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距。
我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题。
这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?
本文的内容就是详尽展示各种去除这类元素间距的方法。一如既往,有必要的截图、demo页面以及源代码展示等。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

拜拜了,浮动布局-基于display:inline-block的列表布局

2010年11月3日,星期三


对于浮动局部的局限性,想必同行们都知道,就是每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布局,如果第一行有个列表高度高于其他列表,那就在第二行,第一个元素会沿着最高元素的右侧对齐。
浮动本身就是个魔鬼,所以,使用浮动布局还需要修复其带来的副作用——高度塌陷的问题,也就是常提到的“清除浮动”了。
另外,IE6下,重复的列表元素会出现莫名的bug,例如出现不知哪来的文字。
而基于display:inline-block的列表布局可以避免这些问题,本文就将一步一步地展示基于display:inline-block的列表布局的可用性以及价值所在。本文内容较多,讲解详细,配以丰富飞截图,必要的demo页面。还是视频展示,希望能对您的学习有所帮助。

阅读全文…