-
box-sizing属性控制width/height是否包含padding和border，默认content-box，设为border-box则总宽固定；老项目在Chrome中“变窄”实为未重置box-sizing导致跨浏览器不一致。
-
使用CSSMediaQuery可实现响应式布局，1.通过@media规则根据屏幕宽度设置断点适配不同设备；2.可检测方向、分辨率等特性精细控制样式；3.推荐移动优先策略，先定义小屏样式再逐步增强；4.建议用em单位、添加viewport标签并保持断点简洁，结合Flexbox或Grid布局提升适配效果。
-
transition:color0.3sease,background0.3sease;
-
可通过合并:hover和:focus伪类设置统一样式，使元素在鼠标悬停或键盘聚焦时均改变颜色；2.建议保留或自定义focus样式以提升可访问性；3.结合transition可实现平滑视觉效果，增强用户体验。
-
要实现卡片翻转效果，需结合CSS的perspective、transform-style和backface-visibility属性。1.构建包含正反面的.card容器，设置perspective营造3D视觉；2..card-face共用绝对定位与隐藏背面，front初始rotateY(0deg)，back为rotateY(180deg)；3.通过@keyframes定义从0deg到180deg的rotateY动画，配合infinitealternate实现循环翻转；4.添加ease-in-out缓动、h
-
多个类名连写（如.btn.primary）表示交集，即元素必须同时具备btn和primary两个class；:is()继承最高权重，:where()权重恒为0；~=匹配空格分隔单词，|=匹配连字符语言前缀；>匹配直接子元素，空格匹配后代元素。
-
使用text-overflow、white-space和overflow属性可实现响应式单行文本溢出省略。具体为设置white-space:nowrap防止换行，overflow:hidden隐藏溢出内容，text-overflow:ellipsis显示省略号，需配合固定或响应式宽度。该方案适用于标题等场景，结合flex或grid布局可自适应不同屏幕尺寸。注意必须限定容器宽度并确保overflow:hidden生效，否则省略号不显示；多行省略需借助-webkit-line-clamp。现代浏览器及IE8+
-
Flexbox适合一维布局，如导航栏和居中对齐；Grid适用于二维复杂结构，如仪表盘；Float已过时，仅用于兼容旧项目。新项目应优先选用Flexbox和Grid。
-
TreeShaking依赖ES模块的静态export/import，要求模块使用命名导出、避免动态导入和副作用，且打包配置需启用相关优化，否则无法安全消除未使用代码。
-
<nav>标签仅用于主要导航链接，不可作为通用容器；其内应嵌套<ul>组织链接，须添加aria-label区分多组导航，次要导航应改用<divrole="navigation">。
-
JavaScript模块是封装变量、函数或类的独立代码单元，ES6引入export/import语法，具备作用域隔离、显式导出导入、路径静态等特性，支持命名导出、默认导出及混合导入方式。
-
使用CSS浮动实现两列新闻布局，需将左栏设为float:left、右栏设为float:right，并分配合适宽度（如60%和35%），父容器通过overflow:hidden清除浮动以防止高度塌陷，同时配合媒体查询在小屏幕上切换为单列堆叠，确保响应式兼容性。
-
fixed头部遮挡内容是因为它脱离文档流，后续元素不为其预留空间；解决方法是给body设与头部高度一致的padding-top，或用JS动态设置margin-top。
-
使用CSS选择器统一表单样式，解决浏览器默认差异；2.通过属性选择器和伪类精准控制input、select、checkbox外观；3.采用隐藏输入框结合伪元素重构复选框；4.注意可访问性与跨设备兼容性，提升用户体验。
-
要获取JavaScript原型链上的getter方法，必须沿原型链向上查找，使用Object.getPrototypeOf和Object.getOwnPropertyDescriptor；对于Symbol类型，需通过Object.getOwnPropertySymbols遍历Symbol属性匹配目标；不推荐使用已废弃的__lookupGetter__；若getter可能抛出错误，应使用try...catch安全调用。1.使用getGetterFromPrototypeChain函数遍历原型链，通过Obje
