-
新手学CSS应先掌握12个核心属性：display/position控制布局行为，box-sizing/width-height/padding-margin管理盒子模型，font-size/line-height/color/text-align处理文本呈现，background/border/outline/box-shadow负责视觉效果。
-
position:sticky在Safari15.4前、Chrome56前不生效，需设最近滚动祖先高度或overflow；iOSSafari中对table子元素无效；父容器含transform/perspective/filter会禁用sticky；z-index在IE/旧Edge中因层叠上下文判断差异导致遮挡异常；iOSSafari中fixed元素存在跳变、缩放失真等问题；absolute在Flex/Grid容器中旧版浏览器包含块判定不一，建议显式设position:relative。
-
百分比宽度以包含块宽度为基准，padding/margin百分比也按父宽计算以防循环，height百分比需包含块高度确定，box-sizing影响实际占位。
-
函数式编程强调纯函数与不可变性，利用高阶函数如map、filter、reduce实现数据处理管道，在JavaScript中提升代码可读性与可维护性。
-
Canvas是需手动控制每帧绘制的底层位图画布，依赖JavaScript上下文接口；须显式设置width/height属性、用requestAnimationFrame实现动画、监听图片load事件并处理跨域，否则易出现失真、空白或错乱。
-
flex-shrink未生效的根本原因是min-width:auto阻止收缩，必须显式设置min-width:0，并配合word-break或overflow-wrap强制折行及overflow:hidden裁剪。
-
使用text-align:justify可实现HTML文本两端对齐，使段落左右边缘整齐，适用于正文、新闻等正式排版场景，但需注意短文本可能导致字间距过大，影响阅读体验。
-
浮动布局通过float实现文字环绕或简单多列，需注意清除浮动；2.定位布局利用position控制元素位置，适合弹窗、吸顶等特殊效果；3.弹性盒子（Flexbox）为一维布局，适用于导航、居中等组件级排布；4.网格布局（Grid）是二维系统，擅长复杂页面结构如仪表盘；5.传统文档流为基础布局方式。现代开发推荐优先掌握Flexbox和Grid。
-
flex布局比百分比更可靠，因其自动分配剩余空间、处理溢出且不受边框/内边距四舍五入影响；推荐display:flex+flex-wrap:wrap，用gap替代margin，父容器设box-sizing:border-box。
-
在SVG中为不同<text>元素添加不同背景色时，若复用相同id的<filter>，会导致所有文本均应用首个定义的滤镜颜色；解决方法是为每个滤镜分配唯一id，并确保filter属性正确引用对应ID。
-
JavaScript属性描述符是控制对象属性行为的配置项，分为数据描述符（含value/writable）和访问器描述符（含get/set），互斥；含enumerable、configurable、writable等布尔标志，用Object.defineProperty设置、Object.getOwnPropertyDescriptor查看。
-
相邻选择器（+）用于选中紧跟其后的同级元素，如h2+p；兄弟组合选择器（~）作用于同一父容器中其后所有同类元素，如input:checked~label；结合后代、子及兄弟选择器可实现复杂结构控制，如.menu-item.active+.submenu显示折叠菜单，或articleh2+pstrong突出引言关键词。应用时应避免过度嵌套，保持简洁，优先用类名控制状态，并结合开发者工具调试兼容性与命中情况，提升样式维护效率与开发体验。
-
<p>HTML5注释语法为<!--注释内容-->，用于标注结构、说明功能或临时屏蔽代码；最佳实践包括匹配闭合、避免冗余、及时更新和不嵌套注释；结合文档工具可提升项目可维护性。</p>
-
正确设置CSStransition属性可解决列表项颜色切换慢的问题。1.为color属性添加transition，如transition:color0.2sease；2.控制过渡时间在0.1s~0.3s之间，推荐0.15s；3.使用mouseenter等高效触发方式提升响应速度；4.分别定义color和background-color的transition，避免使用all，提升性能。
-
本文介绍一种简洁可靠的JavaScript方案，通过为菜单项和内容区块建立类名/ID映射关系，实现单击切换显示指定内容、自动隐藏其他内容的效果，彻底解决因<a>标签默认跳转导致的“闪退”问题。
