-
CSS中margin所有方向的百分比均以包含块宽度为基准，而非对应方向尺寸；绝对定位元素则以最近非static祖先的宽度为准；top/bottom定位值才以包含块高度为基准。
-
通过font-size、color和text-align类可高效实现文本样式控制，如text-lg设字号、text-blue-600定义颜色、text-center居中对齐，结合响应式类提升开发效率与视觉统一性。
-
采用BEM命名法规范类名，按模块拆分CSS文件，使用scoped隔离样式，避免深层嵌套与全局污染，提升可维护性与性能。
-
px、em、rem、%、vw/vh等CSS单位计算基准各不相同：px为绝对像素；em相对父元素font-size，嵌套易失控；rem相对根元素font-size，适合响应式；%依属性不同参照父宽或高；vw/vh基于视口，需注意iOSSafari地址栏影响；单位选择应以参照物是否稳定为准。
-
答案是使用CSS的:hover伪类和display属性可实现下拉菜单。通过HTML无序列表构建导航结构，用position:relative与position:absolute配合定位子菜单，默认用display:none隐藏，hover时设display:block显示，再结合opacity、visibility和transition可实现平滑淡入淡出效果，关键在于正确设置层级与定位。
-
柯里化是将多参数函数转换为单参数函数序列的技术，通过逐步传参实现参数复用、函数组合与延迟计算，如add(a)(b)(c)；其核心实现依赖fn.length获取形参个数，适用于函数式编程但受限于默认参数和性能开销。
-
rgba遮罩是最直接有效的解决方式——通过在背景图上叠加半透明色块来调节局部明暗，提升文字可读性；它保留图片纹理，避免opacity连带降低文字透明度，且支持精准明暗控制与暗色模式适配。
-
需用<audio>标签嵌入音频并结合controls、volume属性及JavaScript实现音量控制，支持自定义range滑块、静音处理、多格式兼容与可访问性规范。
-
本文介绍如何利用CSSFlexbox实现React卡片组件的高度动态拉伸，使同一行内内容量不同的卡片自动保持等高，无需硬编码height或min-height。
-
用window.location.href跳转最直接，立即导航、保留历史；需确保用户手势触发、避免异步调用，优先用绝对URL；replace()可替换当前记录，表单提交应优先用原生action。
-
手机浏览器页脚抖动主因是viewport高度动态变化导致bottom:0定位跳变，应改用100vh布局、禁用缩放、viewport-fit=cover修正，并辅以JS锁定初始视口高度及overscroll-behavior等优化。
-
使用padding-bottom或aspect-ratio属性结合Flexbox可实现子元素固定宽高比与响应式布局，前者通过伪元素撑高维持比例，后者直接设置比例值，配合flex:1实现自适应伸缩，确保视觉一致性。
-
Flexbox响应式布局应移动端优先，默认flex-direction:column，媒体查询中动态调整flex-direction、flex-wrap和justify-content；尺寸控制交由子元素，主容器仅设display:flex及对齐属性。
-
min-width和max-width用于设定元素宽度的下限和上限。1.min-width确保元素不会小于指定宽度，适用于防止内容过少导致布局坍缩；2.max-width限制元素最大宽度，防止内容过多或视口过宽时布局溢出，常用于图片和文本段落；3.它们的优先级高于width属性，若发生冲突，min-width优先于max-width，而两者又优先于width；4.若min-width大于max-width，浏览器以min-width为准，但属于逻辑错误应避免；5.在响应式设计中，它们减少媒体查询依赖，提升
-
浮动元素撑不开容器是因为其默认「收缩包裹」且不触发BFC，长单词无法换行导致溢出；需用min-width配合word-break:break-all或overflow-wrap:break-word解决，但根本应迁移到Flexbox/Grid布局。
