-
使用position:fixed可创建固定头部和侧边栏，提升导航便捷性。1.头部设top:0、width:100%并用margin-top避免内容遮挡；2.侧边栏设left:0、height:100vh，主内容通过margin-left腾出空间；3.同时固定两者时，侧边栏top等于头部高度，height用calc(100vh-60px)扣除头部占用区域；4.注意z-index层级管理及移动端兼容性问题。
-
JavaScript中Boolean()显式转换的falsy值仅有6个：false、0（含±0）、''、null、undefined、NaN；其余均为truthy，包括'0'、'false'、[]、{}、函数及newBoolean(false)等对象。
-
本文详解如何用现代CSSFlexbox替代混乱的position:absolute，解决图片错位、文本消失、元素相互干扰等常见布局问题，提供可复用的响应式结构与实战代码。
-
CSS网格布局无年度更新，其核心问题在于grid-template-areas命名不匹配、fr与%混用导致空间分配异常、dense模式破坏可访问性，以及默认值和隐式行为引发的布局失效。
-
使用@media查询结合display属性可实现响应式显示控制，如.sidebar在屏幕≤768px时隐藏；.desktop-only可在≥1024px时显示；还可根据布局需求切换flex、grid等值，确保元素在不同设备下合理呈现，且应避免使用visibility或opacity以保留空间。
-
::marker是修改列表标记最干净的方式，仅作用于标记本身，支持content、color、font相关属性，不支持margin/padding/background；需配合counter-increment使用，注意浏览器兼容性与字体支持。
-
使用CSSGrid可轻松实现多列等高布局。1.设置父容器display:grid和grid-template-columns定义列宽，子元素自动等高；2.通过align-items控制对齐方式，默认stretch保持等高，start则取消，center仍等高；3.结合repeat(auto-fit,minmax(250px,1fr))实现响应式等高列，无需JS或复杂技巧，代码简洁且易维护。
-
line-height控制文本行间距，影响阅读体验和布局。解决方案有：1.使用像素值（如24px）适用于固定字体大小场景；2.em/百分比相对于当前字体大小计算，但继承固定值可能导致子元素文本重叠；3.推荐使用无单位数值（如1.5），能自动根据子元素字体大小调整行高，保持比例，尤其适合响应式设计；4.设置line-height与height相等可实现单行文本垂直居中；5.多行文本通过line-height调节段落紧凑度；6.响应式设计中结合CSS变量、calc函数及媒体查询动态调整line-height，
-
使用Flexbox、Grid和多列布局可实现图片画廊。1.Flexbox通过flex-wrap和百分比宽度实现响应式排列；2.Grid利用grid-template-columns自动适配列数，更简洁；3.瀑布流用column-count创建不等高多列，适合异形图。推荐优先使用Flexbox或Grid。
-
list-style-type:none能彻底隐藏ul/ol默认列表符号，但不处理::marker伪元素、背景图或内联SVG等自定义标记；需同步重置padding-left:0（及margin:0）以消除缩进，并注意简写list-style或高权重选择器可能覆盖该声明。
-
使用float:left可实现标签云水平排列，通过margin控制间距，overflow:hidden清除浮动，配合不同类名设置字号与颜色，形成视觉层次，保持布局整齐且兼容性好。
-
使用getElementById可通过唯一ID高效获取单个元素，若无匹配则返回null；querySelector支持任意CSS选择器并返回首个匹配项，适用复杂场景但性能稍低；需获取多个元素时应使用querySelectorAll，其返回静态NodeList可遍历操作，三者根据实际需求选择以实现精准DOM控制。
-
FoodiePro图片不居中是因CSS优先级覆盖，需加.wp-post-image.aligncenter{margin:0auto;display:block}；古腾堡应改用“封面”区块并手动设class为wp-post-imagealigncenter；移动端裁切需在子主题禁用crop并重生成缩略图；the_post_thumbnail()参数名须与add_image_size注册名完全一致。
-
前端无法强制执行“每分钟限10次”限流，只能依据后端返回的X-RateLimit-Remaining、Retry-After等响应头做UI反馈，如禁用按钮、倒计时提示，并结合localStorage存储时间戳实现跨刷新的状态同步。
-
HTML原生<inputtype="search">不触发实时搜索，需手动监听input事件、加防抖、取消pending请求、限制最小输入长度；其唯一优势是语义化、无障碍支持及自动清除按钮。
