-
-
CSS 图片文字垂直居中方法
-
图片和文字垂直对齐不生效，主因是父容器未设置display:flex；需先声明display:flex，再用align-items:center才有效，否则该属性无效。
-
文章 ·
前端
| 3星期前 |
163浏览
收藏
-
-
CSS实现苹果官网视差滚动效果
-
真视差需JS监听scroll+requestAnimationFrame节流，用getBoundingClientRect计算元素视口位置，再以transform:translateY动态控制各层位移强度，禁用top/margin避免重排。
-
文章 ·
前端
| 3星期前 |
484浏览
收藏
-
-
CSS设置Bootstrap字体样式，通过变量统一管理排版
-
<p>Bootstrap5字体由CSS变量控制，核心包括--bs-font-sans-serif、--bs-font-monospace、--bs-font-size-base、--bs-line-height-base和--bs-font-weight-*等，全部定义在:root中，组件样式均基于这些变量计算。</p>
-
文章 ·
前端
| 3星期前 |
278浏览
收藏
-
-
CSS创建动态网格布局：grid与media query实战教程
-
应使用minmax()+auto-fit/auto-fill实现响应式列数，如grid-template-columns:repeat(auto-fit,minmax(280px,1fr)))，配合媒体查询兜底；统一用gap控制间距，避免子项margin；优先用grid-auto-rows替代显式行定义。
-
文章 ·
前端
| 3星期前 |
124浏览
收藏
-
-
CSS基线对齐文本布局技巧
-
align-items:baseline经常不生效是因为它仅在flex容器中对直接子元素有效，且依赖子元素的字体度量、是否含文本等条件；vertical-align:baseline则作用于内联上下文，两者适用场景和计算逻辑完全不同。
-
文章 ·
前端
| 3星期前 |
219浏览
收藏
-
-
HTML5表单错位怎么解决？控件对齐技巧
-
默认情况下input和label在Flex容器中垂直不对齐，因表单控件baseline位置不统一且align-items:stretch下拉伸加剧错位；推荐统一box-sizing:border-box并设align-items:center（单行控件）或baseline（含textarea时微调）。
-
文章 ·
前端
| 3星期前 |
464浏览
收藏
-
-
多级垂直菜单设计与递归样式实现
-
用data-level属性标记层级，padding-left替代margin-left实现缩进，父级设position:relative，::after伪元素消除hover间隙，top:calc(100%+1px)，transition明确属性，body.menu-open控制滚动穿透，IE11降级为block布局。
-
文章 ·
前端
| 3星期前 |
131浏览
收藏
-
-
Set高效处理数组并集交集差集方法
-
Set实现数组并集、交集、差集：并集用[...newSet([...arr1,...arr2])]，交集用arr1.filter(x=>setB.has(x))，差集用arr1.filter(x=>!setB.has(x))并视需去重；引用类型需序列化或提取ID处理。
-
文章 ·
前端
| 3星期前 |
443浏览
收藏
-
-
