前端技术文章
-
margin:auto在flex中仅在有剩余空间的主轴或交叉轴方向生效；主轴填满时单侧margin无效，四边auto仅当两轴均有剩余空间才居中，IE11不支持单方向auto。400 收藏 -
letter-spacing用于调整字符间距，取值为normal、长度值或负值，可提升文本可读性与视觉效果，常用于标题、大写字母及移动端小字号优化，中文一般无需调整；需避免过度负值导致重叠，建议响应式设计使用em单位，注意空格标点也受影响，不同于仅控制单词间距的word-spacing。400 收藏 -
CSS定位通过position属性控制元素位置，包含static（默认流）、relative（相对偏移）、absolute（相对非static祖先）、fixed（相对视口）和sticky（条件吸附）五种方式，配合z-index管理层叠顺序。400 收藏 -
FormData不能直接转JSON，因含文件、重复键等；Object.fromEntries仅适用于纯文本无重复的极简场景，实际会丢失文件内容、覆盖同名值、兼容性差；应手动遍历并区分File与字符串类型处理。400 收藏 -
BEM通过强制单类名选择器将CSS权重恒定为0-1-0，天然规避!important滥用和嵌套爆炸；其核心是命名隔离而非权重优化，确保样式作用域清晰、协作边界明确。400 收藏 -
link顺序决定样式胜负，后加载的CSS会覆盖同权重的先加载样式，因此自定义CSS应置于框架CSS之后；若仍被覆盖，需检查并提升选择器权重，而非滥用!important。400 收藏 -
:valid无法直接触发input的::after图标，因input是替换元素，不支持伪元素；需用label包裹并借助属性选择器联动状态。400 收藏 -
alt属性是HTML中必需属性，用于在图像加载失败、屏幕阅读器读取或搜索引擎解析时提供准确、简洁、非冗余的替代文本；装饰性图片必须设为alt=""，不可省略或填充无效内容。400 收藏 -
使用justify-self:center和align-self:center可解决CSSGrid子元素居中难题，前者控制水平对齐，后者控制垂直对齐，作用于子元素自身；若需统一设置，父容器可使用justify-items和align-items实现所有子项居中，代码更简洁且现代浏览器支持良好。400 收藏 -
本文详解如何在jsGrid中将布尔字段（如Cva、ServiceLetters）可靠地显示为交互式复选框，支持初始状态绑定、视觉样式定制及DOM安全操作，避免常见item参数为空或恒为0的陷阱。400 收藏 -
纯CSS可实现播放/暂停图标平滑切换：用两个重叠图标元素，通过opacity控制显隐并配合transform微调，避免content切换或SVG路径d属性动画等不支持方案。400 收藏 -
:first-child匹配父元素的第一个子元素且类型需一致，而非首个某类型元素；应改用:first-of-type才能准确选中第一个p等目标类型元素。400 收藏 -
CSS变量本身不支持transition，必须将其绑定到color等可动画的原生属性上并对其声明transition，变量更新后原生属性值重算才能触发过渡。399 收藏 -
使用:hover改变背景色可实现列表项高亮。1.设置li默认背景色和内边距；2.悬停时修改background-color为高亮色；3.保持padding、border等一致避免布局偏移；4.可添加transition实现平滑过渡。仅改变颜色不调整几何属性，确保不影响其他元素布局。399 收藏 -
本文深入解析HTML属性值内双引号（"）的处理规则，阐明为何"编码对onclick等事件属性至关重要，并通过对比示例揭示浏览器解析器如何区分分隔符与字面量双引号。本文深入解析HTML属性值内双引号（`"`）的处理规则，阐明为何`"`编码对`onclick`等事件属性至关重要，并通过对比示例揭示浏览器解析器如何区分分隔符与字面量双引号。在HTML中，双引号（"）具有双重角色：既是属性值的语法分隔符，又可399 收藏