前端技术文章
-
- Bootstrap容器宽度为何不是100%？断点配置详解
- 因为.container的width始终为100%，但实际渲染宽度由断点媒体查询中的max-width决定；例如在≥1200px视口下，computedwidth显示1140px，正是@media(min-width:1200px){.container{max-width:1140px}}生效所致。
- 文章 · 前端 | 1个月前 | 422浏览 收藏
-
- JavaScript代码覆盖率怎么测？如何提升测试覆盖率？
- JavaScript代码覆盖率衡量的是测试执行时源码中被实际运行的语句、分支、函数和行，而非测试数量；它不保证质量，但能暴露未触达的逻辑盲区如else分支、catch块等。
- 文章 · 前端 | 1个月前 | 422浏览 收藏
-
- CSS霓虹灯效果：多层drop-shadow与hsl实现
- drop-shadow()不能可靠实现霓虹发光效果，因它不支持多层独立控制、无法精准衰减光晕、且在Safari和Firefox中渲染不稳定；真霓虹必须用text-shadow或box-shadow配合hsl()高亮度值与逐层递减透明度。
- 文章 · 前端 | 1个月前 | 422浏览 收藏
-
- HTML中使用font-variant-numeric实现表格数字对齐方法
- font-variant-numeric:tabular-nums仅使数字等宽，不控制对齐；需配合text-align、支持等宽数字的字体及table-layout:fixed等设置才能实现表格中数字精准对齐。
- 文章 · 前端 | 1个月前 | 422浏览 收藏
-
- 如何让图标紧贴文字末尾？flex-inline技巧详解
- 根本原因是flex默认按项目整体分配空间，文字长度动态变化导致图标无法锚定末尾；需用inline-flex替代flex，文字设min-width:0和overflow:hidden，图标设flex:00auto，才能真正紧贴文字末尾。
- 文章 · 前端 | 1个月前 | 422浏览 收藏
-
- CSS多条件组合选择器使用方法
- CSSGrouping选择器用逗号分隔多个独立选择器，表示逻辑“或”匹配，而非层级关系；必须用于统一设置不同类型、类名、状态元素的相同样式，漏逗号会导致误解析为嵌套选择器。
- 文章 · 前端 | 1个月前 | 422浏览 收藏
-
-
thead和tbody对打印的帮助主要体现在提升可读性和优化布局，特别是在处理长表格时。以下是详细的解释：1. 提升打印可读性在打印HTML表格时，如果表格内容很长，浏览器默认会将整个表格作为一个整体进行打印，这可能导致页面上出现大量空白或表格被截断。使用和标签可以更好地控制表格的结构，使打印时表格能够分页显示，即每一页都包含表头（），而数据部分（
- 仅用<thead>和<tbody>标签本身不会让表头跨页重复；必须配合CSS的display:table-header-group和@mediaprint规则，且效果依赖浏览器渲染引擎，Chrome/Edge较可靠，Firefox有bug，Flyingsaucer需额外启用-fs-table-paginate。
- 文章 · 前端 | 1个月前 | 422浏览 收藏
- HTML固定导航栏怎么设置？
- position:fixed使导航栏悬浮但脱离文档流，需用padding-top或margin-top预留空间；移动端需加transform:translateZ(0)防抖动；响应式时left/right/width要同步更新；z-index失效多因层叠上下文隔离。
- 文章 · 前端 | 1个月前 | 422浏览 收藏
- LongTasksAPI如何检测页面卡顿
- LongTasksAPI仅记录≥50ms的主线程任务，不能直接检测用户感知的卡顿；需结合≥1s耗时、帧率丢失或输入延迟等指标综合判断，且存在Safari不支持、attribution为空、漏报连续短任务等局限。
- 文章 · 前端 | 1个月前 | 422浏览 收藏
- 使用伪元素创建横线
-
thead和tbody对打印的帮助主要体现在提升可读性和优化布局，特别是在处理长表格时。以下是详细的解释：1. 提升打印可读性在打印HTML表格时，如果表格内容很长，浏览器默认会将整个表格作为一个整体进行打印，这可能导致页面上出现大量空白或表格被截断。使用和标签可以更好地控制表格的结构，使打印时表格能够分页显示，即每一页都包含表头（），而数据部分（
