-
为什么BEM能减少样式冲突BEM（Block-Element-Modifier）不是魔法，它靠命名规则强行切断CSS选择器的隐式依赖。传统写法里.header.nava这种嵌套选择器，一旦组件挪位置、父级加类、甚至只是引入第三方UI库，就可能意外覆盖或被覆盖。BEM强制每个类名自包含：header__nav、header__nav-link、header__nav-link--active——没有层级假设，不依赖DOM结构，自然不怕嵌套变动或第三方干扰。怎么写才算合规的BEM类名三个部分必须严
-
用Flexbox实现导航栏左右对齐需设容器display:flex，用justify-content控制分布或margin-left:auto推右，清除默认样式并适配响应式。
-
使用Flexbox和Grid可实现响应式卡片等高排列。1.Flexbox通过display:flex与align-items:stretch使卡片自动拉伸，适合一维布局；2.Grid利用display:grid与repeat(auto-fit,minmax(250px,1fr))实现二维等高控制，多行更稳定；3.响应式推荐优先使用Grid，结合gap和minmax优化断点适配，保持视觉整齐。
-
hover旋转突兀因缺少过渡动画，须在默认状态设transition:transform0.3s–0.5sease等，仅用transform属性，避免重排，防止动画堆叠。
-
应使用半透背景色而非opacity：将opacity:0.5改为background-color:rgba(0,0,0,0.5)，确保蒙罩与内容层平级分层；必要时用fixed定位或Portal移出DOM分支；backdrop-filter需内容层独立且避免transform触发新层叠上下文；固定弹窗需确保蒙罩z-index更高且同层叠上下文。
-
使用position:fixed可实现底部导航栏，通过bottom:0固定位置，配合z-index和box-shadow提升视觉层级，并用padding-bottom预留空间防止内容遮挡，适配移动设备时结合env(safe-area-inset-bottom)确保安全显示区域。
-
内部样式适合单页、一次性页面且CSS≤1KB的场景；外部样式更常用，因可缓存、易优化；@import会阻塞并行加载，应避免；选择依据是复用性与稳定性。
-
flex-direction决定主轴方向且独立于书写方向，常见值为row、row-reverse、column、column-reverse；flex-wrap控制换行，默认nowrap，wrap才启换行，二者共同影响交叉轴及align-items/align-content行为。
-
图片在Flex布局中易变形，主因是img为替换元素且默认flex-shrink:1；应结合object-fit控制内容适配方式，并设置明确宽高或aspect-ratio，同时重置flex-shrink防止压缩。
-
vw/vh“不听话”因基于视口尺寸且受地址栏收放、横竖屏影响而突变；应优先用100dvh，降级用JS更新--vh变量；vmin/vmax适用于约束极端比例，非等比缩放；mix-blend-mode需配合isolation:isolate；calc内运算符前后须有空格，不可嵌套。
-
通过CSSanimation与background-position结合可实现流畅背景动画，如滚动云层或流动河流，利用@keyframes改变背景位置，配合background-size和多层背景增强视觉效果，适用于banner动效、按钮悬停等场景。
-
HTML5环境可通过jsrsasign库实现RSA加密：导入PEM公钥、调用encrypt方法得十六进制密文，适用于短文本；私钥严禁前端存储，解密须在服务端完成。
-
虚拟DOM通过JavaScript对象模拟真实DOM，结合diff算法高效比对新旧节点差异，仅将最小更新应用到真实DOM。利用同层比较、类型判断和key标识，避免全量渲染，提升性能。关键在“先算再改”，实现开发体验与运行效率的平衡。
-
min-width和max-width用于限制元素宽度上下界，优先于width等规则生效；与flex/grid配合时控制压缩与拉伸边界；响应式中推荐用媒体查询的min-width而非元素级属性；IE11不支持calc()混合单位，且对inline元素无效。
-
使用aspect-ratio和object-fit可实现响应式图片裁切，通过设置容器宽高比并用object-fit:cover裁剪图片，确保图片填充容器且保持比例，常用padding-bottom技巧兼容性好。
