-
grid-template是CSSGrid布局的核心复合属性，它通过一行代码同时定义网格的行、列结构和命名区域。1.使用时需先设置容器为display:grid或inline-grid；2.它是grid-template-rows、grid-template-columns和grid-template-areas的简写形式；3.语法上，/前定义行结构与区域名称，/后定义列结构；4.支持fr单位实现弹性空间分配，minmax()函数设定轨道尺寸范围，从而提升响应式设计能力；5.可结合媒体查询实现不同屏幕尺寸
-
移动端垂直布局应使用flex容器+column方向+flex-grow实现弹性拉伸，而非height:100vh；因100vh在iOSSafari等浏览器中会包含地址栏高度且软键盘弹出时不重算，导致截断或错位。
-
clear属性不能清除浮动本身，而是让当前元素避开前面浮动元素的干扰区域，强制下移至浮动元素下方以恢复布局流；它只对块级元素生效，且必须写在浮动元素之后的兄弟元素上。
-
z-index不生效主因是父元素创建了独立堆叠上下文，使子元素z-index仅在内部生效；需检查opacity<1、transform非none等触发属性，并提升父容器z-index或用Portal脱离上下文。
-
HTML5不支持直接设置边框实线，需用CSS的border属性实现；最简写法为border:2pxsolid#333；自适应靠rem、vw或容器响应式控制；移动端失效主因是缺失viewport、Retina屏1px发虚或overflow截断。
-
HTML5<inputtype="date">在旧浏览器中直接回退为文本框而非兼容，需运行时检测支持性：创建临时input并判断input.type==='date'；不支持时推荐flatpickr（配dateFormat:"Y-m-d"）并校验格式、同步value、处理Safari时间戳兼容性。
-
气泡位置偏移的根本原因是absolute定位参考系错误，应给父容器设position:relative以确保以该容器为锚点；箭头推荐伪元素+border+rotate实现；动画只用transform和opacity避免重排；多气泡用DOM顺序控制层叠，隐藏时先动画再remove。
-
本文详解如何用纯CSS（calc()、vw单位与Flex/Grid组合）构建稳定可靠的1/3–2/3分栏布局，确保背景始终铺满视口宽度，而文字内容严格约束在1260px容器内，且与同页其他等宽布局（如50/50栏）像素级对齐。
-
元素最终渲染高度=content高度+padding-top+padding-bottom+border-top+border-bottom（标准盒模型），padding独立撑开空间且不受line-height影响。
-
直接写死颜色和尺寸导致Loading动画难维护，因主题切换或尺寸调整需多处同步修改且无法响应深色模式；应使用CSS变量配合外部控制动画属性，避免在@keyframes中直接引用变量或错误使用calc()。
-
CSSHoudini通过多个API让JavaScript直接操作浏览器渲染引擎，实现更灵活的样式控制。1.CustomPropertiesandValuesAPI支持定义带类型的CSS变量并进行动画；2.TypedOMAPI提供带单位的数值对象，提升性能和安全性；3.CSSParserAPI允许自定义CSS解析规则；4.PaintAPI通过PaintWorklet实现自定义绘制效果，如棋盘格背景；5.AnimationWorkletAPI创建高性能线程级动画；6.LayoutAPI自定义布局算法，如瀑布流
-
通过CSS的:focus伪类和transition实现输入框边框颜色动画，聚焦时边框平滑变色，结合box-shadow与@keyframes可创建脉冲等动态效果，提升表单交互体验。
-
CLS是衡量页面视觉稳定性的指标，非优化工具；高CLS常因img/iframe缺尺寸属性、字体切换导致容器高度变化、动态内容未预留空间所致，需从资源加载、尺寸预设和DOM插入时机三方面系统优化。
-
dash.js需配合正确HTML与配置才能实现DASH自适应播放：MPD须HTTPS提供且响应头含application/dash+xml，移动端需video标签添加muted、playsinline及viewport限制，容器须用aspect-ratio或padding-bottom维持宽高比，video设object-fit:cover防拉伸。
-
纯HTML无法实现倒计时，必须用JavaScript实时计算时间差并更新DOM；正确做法是固定目标时间戳，每次用Date.now()重算差值，避免递减变量，合理清理定时器并注意时区问题。
