应按需控制flex子项收缩：对文字按钮等设flex-shrink:0，对内容区保留flex-shrink:1，配合min-width/min-height设定压缩底线，并慎用flex:1，优先用flex-basis锚定基准尺寸。

JavaScript代码规范需ESLint与Prettier协同：ESLint校验逻辑（如未声明变量），Prettier统一风格（缩进、引号等）；通过eslint-config-prettier桥接冲突，配合Husky、lint-staged和编辑器插件实现自动化检查与格式化。

Materialize组件交互异常的最常见原因是JavaScript初始化未执行或资源未正确加载；需确保jQuery在MaterializeJS前加载、CSS在JS前引入，DOM就绪后调用M.AutoInit()或按需初始化，并验证HTML结构符合官方规范。

各浏览器对表单元素默认样式实现不同，需重置box-sizing、margin、padding等并统一font-family；select需三属性设appearance:none并自定义箭头；button须补全:hover/:active状态及outline以保可用性与可访问性。

通过结合CSS的::marker伪元素与list-style属性，可灵活自定义列表标记的颜色、字体和内容，提升可读性与视觉美感。::marker作用于li元素的项目符号或编号，支持color、font等属性，不影响文本内容，如设置li::marker{color:#e74c3c;font-weight:bold;}使标记变红加粗。list-style简写属性控制标记类型（disc、decimal等）、图像和位置，例如ul{list-style:squareinside;}。进阶应用中，可精细化调整颜色字体

鼠标悬停样式切换不流畅的根本原因是transition属性缺失或配置错误；应将其写在默认状态而非:hover中，仅作用于可过渡属性，优先使用transform和opacity避免重排，并合理设置timing-function与duration。

合理使用CSSpadding可提升视觉舒适度与布局结构。1.采用简写属性如padding:10px20px;统一设置内边距，提高代码效率；2.结合box-sizing:border-box避免padding增加元素尺寸，保持布局稳定；3.在响应式设计中使用rem或媒体查询动态调整padding，适配多设备；4.为按钮、输入框、卡片等添加适当padding增强可访问性与阅读体验，注意留白平衡。掌握这些技巧使布局更专业。

使用HTML5的video标签可实现网页视频播放，支持controls控制、多格式兼容（MP4/WebM/Ogg）、autoplay静音自动播放、loop循环及JavaScript动态控制播放状态，推荐preload="metadata"优化加载，避免移动端自动播放大文件以提升体验。

HTML默认合并连续空白符是规范行为，需用 、white-spaceCSS或<pre>标签干预；推荐white-space:pre-wrap处理多数排版需求，避免滥用 和危险正则替换。

:disabled和:enabled伪类用于根据表单元素状态设置样式，提升可读性与交互体验。1.:disabled匹配禁用元素，常用于灰化输入框、按钮等，示例为设置背景色#f2f2f2、文字色#999、不可用光标；2.:enabled匹配可交互元素，可用于突出可操作控件，如按钮启用时显示蓝色背景并支持悬停变深；3.实际场景中，注册表单提交按钮初始禁用，未勾选条款时不可点击，通过JavaScript移除disabled后:enabled样式生效，实现视觉反馈自动化，无需额外class，兼容性好且减少误操作。

ES6模块需script标签加type="module"才生效，否则import报错；模块默认defer；exportdefault与具名导出可共存但不能多个default；import()支持动态路径和await；路径必须带扩展名或相对/绝对前缀。

使用place-items和align-self可灵活实现CSSGrid布局中的垂直居中：place-items用于容器内所有子元素的整体居中，align-self用于单独调整特定子元素的对齐方式，二者结合可高效控制布局对齐。

用Flexbox替代绝对定位可根本解决错位问题，因其以内容流为基础自动对齐分布，响应性强、维护成本低；需确保父容器正确设置display:flex并避免与float、absolute混用，合理使用justify-content、align-items、gap及flex-direction等属性。

setTimeout和setInterval在JavaScript中的主要区别是：setTimeout是一次性执行的定时器，而setInterval是循环执行的定时器。setTimeout用于延迟执行一次性任务，如显示提示信息或初始化操作；setInterval用于定期执行任务，如数据更新或计时器。两者各有优缺点，需根据具体需求选择使用。

高度塌陷因浮动元素脱离文档流导致父容器无法计算其高度，使用clearfix通过伪元素插入清除浮动内容使父元素包含子元素，如.clearfix::after{content:"";display:block;clear:both;}并应用于父容器，兼容版增加*zoom:1支持老IE，现代方案可用overflow:hidden或Flex/Grid布局替代。