盒子模型的理解是前端使用css实现准确布局、处理元素排列的关键，下面是对MDN上盒子模型文章的一部分难点做见解。 其一就是区块盒子和行内盒子上的行为，其二是2种盒子模型的大小问题。

网站会在PC和移动端上浏览，那么各个浏览器和设备的差异性，会使得兼容处理是一件麻烦的事情。尤其是移动端上的那些个异形屏和内容展示的理念。对此我使用的是tailwind css 。今天要分享的是移动端100VH出现滚动的问题。

在这篇博客中，我将向大家展示如何使用仅三行简单的CSS代码，实现元素的滚动动画效果。通过创建一个视图容器，添加一些块元素，并利用CSS动画属性，我们可以轻松实现平滑的滚动动画。除此之外，我还会介绍如何根据滚动位置单独针对每个元素进行动画处理，以及如何使用动画范围属性确保元素在到达时完全完成动画。希望通过这篇博客，大家可以在自己的网站中应用这些效果，提升用户体验。

在前端开发中，我们经常会遇到需要动态变化的视觉效果。今天我们将讨论如何利用 CSS 的 mix-blend-mode 属性，实现一个文本穿过特定背景时反色的效果。具体来说，我们会创建一个背景为黑色的 div 元素，并让文本从中穿过。当文本进入 div 的区域时，其颜色会从黑色变为白色，离开时则恢复为黑色。

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

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

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

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

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

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

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

使用svg画一个百分比圆