-
CSS网格布局通过grid-template-areas定义语义化区域，结合fr单位与minmax()实现响应式多栏排版，利用媒体查询适配不同屏幕，在移动端垂直堆叠、桌面端分栏显示，提升文章可读性与视觉层次。
-
本文介绍在表单未满足条件时禁用“下一步”按钮，并通过原生HTML5表单验证或JavaScript动态控制，实现点击禁用按钮时显示友好错误提示，兼顾可访问性、简洁性与可定制性。
-
input::placeholder需加浏览器前缀并用!important；注意line-height和padding匹配；暗色模式用prefers-color-scheme媒体查询；动态变色应切换class而非内联style。
-
transform:translateY()是卡片悬停升起的唯一靠谱方案，因不触发重排、仅合成，配合transition和多层box-shadow可实现顺滑立体浮起效果。
-
IE11仅支持2012年旧版CSSGrid规范，需手动将display:grid改为display:-ms-grid，并用-ms-grid-column/-ms-grid-row等属性替代现代语法，fr单位须换算为具体数值或百分比，Autoprefixer仅加前缀不降级语法。
-
三列布局不能直接写width:33.33%因盒模型默认下padding、border、margin会超出容器宽度，需用box-sizing:border-box并设width:33.333%，配合overflow:hidden或display:flow-root清除浮动塌陷，再通过媒体查询降级为单列，并推荐Flexbox替代以规避兼容与计算问题。
-
直接用setTimeout返回值无法可靠取消任务，因为定时器ID是数字且函数执行完即丢失；若在异步回调中取消，ID已不可访问，而全局声明会导致多个任务互相覆盖；闭包可天然绑定每次调用的独立状态，使cancel函数与timeoutId共享词法环境，确保状态隔离、取消及时、引用干净。
-
防抖和节流是前端优化高频事件的两种手段：防抖通过延迟执行，仅在事件停止触发后执行一次，适用于搜索输入等场景；节流则保证在指定时间间隔内最多执行一次，适合滚动监听等频繁操作。两者核心区别在于执行时机与频率控制，合理选择可提升性能与用户体验。
-
焦点捕获（trapfocus）是手动限制键盘Tab键在模态框内循环聚焦的技术，因HTML原生不支持且dialog元素不自动限制Tab范围，必须用JS监听keydown、判断首尾可聚焦元素并强制focus，以满足WCAG2.1AA可访问性要求。
-
必须在iframe内部页面的CSS中设置滚动条样式，通过WebKit伪元素自定义外观，仅支持同源页面和WebKit内核浏览器，跨域时无法修改，可采用外层容器模拟滚动条作为替代方案。
-
使用伪类after清除浮动，通过添加clearfix类实现父容器高度自适应；2.设置父容器overflow:hidden或auto触发BFC包含浮动；3.采用display:flow-root创建BFC，现代浏览器推荐方案；4.避免使用额外clear元素。建议优先选择::after或flow-root方法。
-
HTML中没有section_标签，下划线非法，浏览器将其视为无语义的自定义元素；应使用标准section标签配合class（如user_profile）实现语义化与命名自由。
-
<embed>标签没有object属性，该属性不存在于HTML标准中，浏览器会直接忽略；正确传参应使用<object>标签配合data属性和<param>子元素。
-
display:inline-flex使容器为行内级元素且子项按Flex布局排列；它不因HTML空白产生间隙，支持justify-content/align-items精确控制，而inline-block会受空白节点影响且仅能靠text-align或margin模拟对齐。
-
事件监听器应优先使用addEventListener绑定，及时清理防止内存泄漏，集中管理避免重复注册，并按场景选择委托、节流等优化策略。
