前端技术文章
-
伪元素边框不会撑大盒子——前提是用position:absolute定位并设content:""，使其脱离文档流；否则默认display会占据空间。454 收藏 -
“路由锁”是前端SPA中通过路由守卫拦截跳转的控制机制，用于防止用户在表单提交、支付等关键操作中误离开导致状态丢失，本质是JavaScript层的跳转拦截与确认逻辑。461 收藏 -
执行上下文是函数调用时严格创建的有生命周期的对象，分创建与执行两阶段；它决定this、作用域链、变量查找等，而非运行时自然形成。299 收藏 -
最直接的方式是使用Node.js内置http模块创建服务器，代码简洁且便于理解底层机制。示例中通过http.createServer监听3000端口，根据URL返回不同内容，访问根路径显示欢迎信息，/about返回关于页面，其他路径返回404。保存为server.js后运行nodeserver.js即可在浏览器访问。虽然http模块基础，但适合学习；实际开发更推荐Express.js，因其路由、中间件管理更高效。安装Express后，可用app.get定义路由，express.static服务静态文件，并297 收藏 -
overflow生效需容器有明确宽高且内容真溢出；常见失效因无宽高、flex/grid布局未设min-size、内联元素未转块级；Y轴滚动用overflow-y，移动端需-webkit-overflow-scrolling:touch。192 收藏 -
scroll-snap-type必须配合scroll-snap-align才生效；仅设容器scroll-snap-type:ymandatory不触发吸附，需在每个子元素上显式声明scroll-snap-align:start/center/end，且容器须有溢出滚动（overflow-y:auto）和固定高度。323 收藏 -
dl标签仅适用于人类可读的术语–解释型文档，如API文档中的参数说明，每项须严格遵循一个dt（术语名）配一个dd（解释），禁止混入非dt/dd元素或当作键值对容器使用。221 收藏 -
float与position:sticky无法共存，因float使元素脱离文档流，而sticky要求元素在常规流中；正确方案是用flex或grid布局配合sticky，并确保父容器可滚动且侧边栏为直接子元素。452 收藏 -
<address>标签专用于声明页面或文章的责任人联系信息，如作者、维护者邮箱或官网链接；仅允许嵌套<a>、<em>、<br>等短语内容，作用域限于最近<article>或<body>顶层，不可用于普通地址或跨作用域混用。187 收藏 -
element.closest是实现点击穿透最轻量可靠的方式，因其不依赖事件冒泡、天然跳过非元素节点、良好支持ShadowDOM，且性能更优、语义更清晰。154 收藏 -
在BlazoriseDataGrid中直接显示HTML字符串（如<a>链接）时，默认会进行HTML编码而无法渲染为真实元素；需通过MarkupString显式标记可信内容，才能实现安全、可控的HTML渲染。457 收藏 -
hidden和block不能直接做响应式图片切换，因为它们只控制显示/隐藏，不阻止图片预加载；浏览器会提前下载所有img的src，导致带宽浪费。431 收藏 -
grid-area的四值顺序为行起始/列起始/行结束/列结束，非上下左右；支持span和命名区域，不接受auto或函数，且不可混用数字与名称。280 收藏 -
Vue3的Fragment和Slots共同解决多根节点限制：Fragment允许组件模板直接包含多个同级根节点而不产生冗余DOM；Slots支持默认、具名及作用域插槽，使父组件可向子组件注入任意结构内容。409 收藏 -
动画失效主因是animation-name与@keyframes名称大小写/空格/符号不完全匹配，且animation-duration在简写中不可省略；关键帧仅支持from/to或百分比，不支持px/s等单位。213 收藏