🗒️ 纯CSS实现文字遇到方块反色

编写文字进入方块从黑色变成白色,用JS的话,代码过于冗余。使用CSS元素来写的话可以使得效果更加流畅,代码更加简洁

🗒️ esbuild项目css样式隔离

由于最近使用到esbuild这个打包工具编写插件,而我的插件需要编写样式。在实际的运用过程中,我发现插件的样式类名可能和被使用项目中的一些类名发生冲突。这个时候我就想借鉴一下vue中出现的样式类scoped 的概念。

🗒️ 基于esbuild搭建组件开发框架

在日常的前端开发中,经常需要开发一些组件。通常我们是基于某个特定的框架来开发,例如vue,react等等。对于页面的样式组件来说,没有什么太多的计较。但是如果开发一个画布工具或者一个音乐播放器的组件,那么这个组件必然会有很多功能,而且对于vue2/vue3,react版本,你可能每个都要开发一遍。那么web-component的开发理念就非常适合目前的需求了。但是通常的web-cmponent的开发中,对于JS我们可以很好的管理,拆分功能。但是对于dom样式的编写就极其不方便了。

🗒️ 手写一个简单的Swiper

这是模仿Swiper的功能,网上非常好用的一个组件。并不是想重复造车轮。主要是开发中遇到这个这样一个需求,但是又要非常高的一些定制化功能。主要还是全部引入Swiper会使得我编写组件很臃肿,不利于别人的使用。这里就当学习一下,自己实现一个简单的Swiper

🗒️ CSS3小问题-子元素设置margin-top为什么影响了父元素

今天遇到一个问题,我写了下面一个样式,发现子的margin-top没有作用,但是父亲的却出现了子的margin-top值。

🗒️ CSS3小问题-flex布局子元素高度设置无效

今天在写flex自适应布局的时候,出现了一个问题:flex布局子元素高度设置无效。 我的页面布局是这样的

🗒️ CSS3小技巧-在div中iframe出现滚动条问题

父元素.parent设定了高度,设置iframe height:100%,通过浏览器观察发现,外层div与iframe高度相同,为什么出现滚动条,发现没有padding/margin的影响。

🗒️ CSS3小技巧-动态设定div的宽高比

一直在写vue项目中使用iview的table,它有个设置宽高固定的属性。于是我想在外层套一个div并且这个div动态的随着窗口大小调整,并且满足一定的宽高比,有这种需求是因为一个统计页面上有多个统计类型,其中就有表格。