-
-
-
CSS防止文本溢出容器的正确方法
-
white-space:nowrap未生效主因是父容器限制空间或存在覆盖样式；需确保父容器提供足够宽度、无flex-shrink压缩、且无white-space:normal覆盖；配合text-overflow:ellipsis时还必须同时设置overflow:hidden。
-
文章 ·
前端
| 3星期前 |
282浏览
收藏
-
-
JavaScript数据库存储方法解析
-
浏览器中JavaScript可通过localStorage持久存字符串、sessionStorage临时存数据、IndexedDB存储大量结构化数据、CacheAPI缓存网络请求；2.Node.js环境可用fs模块读写JSON文件、SQLite轻量数据库或连接MongoDB/MySQL/PostgreSQL等主流数据库；3.第三方库如localForage、Dexie.js、Lowdb简化操作；4.选择依据：用户偏好用localStorage，离线复杂数据选IndexedDB，Node.js小项目用SQL
-
文章 ·
前端
| 3星期前 |
360浏览
收藏
-
-
Flex布局实现导航栏图标文字对齐技巧
-
使用align-items:center可解决导航栏图标与文字对齐问题。通过将导航项设为Flex容器，结合gap设置间距，确保图标和文字垂直居中；需统一图标尺寸或包裹处理以避免偏移，并可配合line-height增强兼容性，提升移动端显示稳定性。
-
文章 ·
前端
| 3星期前 |
406浏览
收藏
-
-
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浏览
收藏
-
-
