- 博客(6)
- 收藏
- 关注
RSS订阅
原创 Flex布局全解析，看这一篇就够了
更多优质内容请关注微信公众号 @web前端工程狮每篇文章都会带示意图、详解、代码，关注我和我一起学前端~整理一下日常开发里常用的布局。很难想象我曾经一度执着于用float、text-align、vertical-align等属性来解决元素居中对齐的问题，显然，很多场景是无法满足的。
2025-06-21 13:12:31
1117
原创 高频事件处理秘籍：防抖与节流的实战场景全解析
先总结：防抖（Debebounce）和节流（Throttle）是前端开发中用于优化高频事件性能的两种常用技术，主要解决短时间内重复触发事件导致的性能问题（如页面卡顿、资源浪费）。然后具体说说：根据业务需求灵活选择，也可以结合两者使用
2025-06-25 09:43:37
416
原创 Grid布局详解：掌握网页布局的终极武器
* 浏览器自己决定长度 *//* 固定列宽，定义了两列 *//* 使用 fr 单位（剩余空间比例） *//* 第一列占 100px，第二、三列按比例分剩余空间且第三列是第二列的两倍 *//* 定义列宽 100px，尽可能多地创建列 *//* 规定列宽范围，尽可能撑到最大 *//* 混合单位与函数 */fr：（fraction）一个 fr 单位代表网格容器中剩余可用空间的一等份，表示比例关系repeat()：接受两个参数，参数一是重复的次数，参数二是要重复的值。示例等同于。
2025-06-24 09:24:08
727
原创 别再手动调margin了，这5种CSS垂直居中技巧让效率翻倍
更多优质内容请关注微信公众号 @web前端工程狮每篇文章都会带示意图、详解、代码，关注我和我一起学前端~日常开发的时候会碰到很多需要居中元素的场景，尤其对于强迫症来说，为了一点点偏差疯狂手调margin（比如我自己），这里专门讲一下CSS中实现元素水平垂直居中的方法。
2025-06-23 09:16:59
848
原创 CSS布局秘籍：掌握这些长度单位，轻松实现动态计算与等间距网格
整理了平时开发常用的 CSS 长度单位详解，聚焦实际开发高频场景，附带可直接复用的代码案例定位：精确控制固定尺寸高频场景：2. em / rem（当前字体倍数 / 根字体倍数）定位：响应式布局的核心单位区别：使用场景：布局尺寸用 rem，组件内部微调用 em开发技巧：3. %（百分比）定位：父容器相对布局核心规则：4. vw / vh（视口单位）定位：全屏/响应式适配高频场景：5. calc()（动态计算）定位：混合单位灵活计算经典公式：二、高频实战场景代码场景 1：响应式布局
2025-06-20 14:48:55
404
原创 网页布局必修课：CSS盒模型全面解析
CSS盒模型是网页布局的核心概念，将每个HTML元素视为由内容区、内边距、边框和外边距组成的矩形盒子。内容区通过width/height设置，内边距(padding)和边框(border)围绕内容，外边距(margin)控制元素间距。默认box-sizing为content-box，总宽度=width+padding+border+margin；使用border-box时，width直接包含padding和border。垂直方向的外边距会发生折叠（取较大值）。合理运用盒模型属性能有效控制布局效果，如通过ma
2025-06-20 14:21:38
774
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人