css • 2024-12-15
滚动条驱动的动画是一个新的 CSS 特性,已经在部分现代浏览器中实现了,我们以前要实现滚动条动画效果时,可以使用一些 Javascript 库来实现,例如ScrollMagic,Gsap等动画库,现在 CSS 也可以实现一些基本的滚动驱动动画功能了。
css • 2024-12-03
为了更好的用户体验,通常会给网站实现黑白主题切换,可以让用户适用白天黑夜阅读体验,那目前有哪些实现黑白主题切换的实现呢?分别为 CSS prefers-color-scheme 媒体查询、window.matchMedia 方法以及 CSS light-dark () 函数。
css • 2024-07-27
编写响应式样式代码是一个前端开发工程师必备的技能之一,媒体查询是响应式设计的核心,它可以根据设备的特性(如屏幕宽度、分辨率等)来应用不同的样式规则。
css • 2023-12-14
Tailwind CSS 是一个用于构建 Web 项目的 CSS 框架,它提供了一系列预定义的原子CSS类,可以帮助开发人员快速构建 Web 界面,并且可以通过自定义主题和扩展来满足不同的需求。
css • 2019-08-01
在日常网站开发中,我们会使用link来加载外部的css样式文件,然而css的加载会阻塞页面的渲染,直到资源加载完成并等待CSSOM构建完成,所以在使用外部的css文件的时候,尽量移除不需要使用的css代码,如果网站需要自适应,可以通过媒体查询来加载对应的文件内容。
css • 2018-08-04
transform属性可以向元素应用2D或者3D转换,可以对元素进行选择,缩放,移动和倾斜
css • 2018-06-04
盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。
css • 2018-05-13
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
css • 2017-12-20
移动端适配<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
css • 2017-09-12
网格是一组相交的水平线和垂直线,它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。
css • 2017-09-08
在做移动端菜单的时候发现设置will-change:transform会导致position为fixed的子元素相对于父级元素来定位,一个简答的例子
css • 2017-08-05
一开始写sass以为跟普通css没多大区别,基本在里面写的逻辑和规则都差不多,偶尔用下变量,嵌套,import,计算等功能,之所以会这样是还没发现sass的强大功能啊,例如mixin,extend,function等等