技术博客
Bootstrap 的响应式布局不靠魔法，核心是 CSS 媒体查询 + 预设的断点类名。col-md-6 这类类名里，md 对应的是 min-width: 768px 断点，意味着“在 768px 及以上宽度时，该列占 6/12（即一半）宽度”；更小的屏幕会回退到默认的 100% 宽度（除非显式写了 col-sm-12）。
当父容器启用横向滚动时，flex 子项（如按钮）可能因缺乏明确宽度约束而压缩文本、导致溢出；通过为滚动容器设置固定或最小宽度，并配合 `flex-shrink: 0` 和 `white-space: nowrap`，可确保按钮始终包裹文本并支持平滑滚动。
当给 .sidebar 设置 float: left，并在小屏幕下用媒体查询改为 float: none 时，若父容器没清除浮动，旧的浮动上下文可能残留，导致后续元素仍受其影响——尤其在 Safari iOS 15–16 中常见布局塌陷复现。
根本原因不是浏览器不支持，而是它被父容器或祖先元素“拦住了”。position: sticky 的触发依赖两个硬性条件：父容器不能有 overflow: hidden|auto|scroll，且自身不能处于 transform、perspective 或 filter 等创建新层叠上下文（BFC）的属性作用范围内。
网卡统计的 tx_bytes / rx_bytes 是底层收发字节数，包含重传、校验失败、驱动丢包等噪声，不能直接当有效吞吐。真实吞吐得看应用层实际送达的数据量。
元素用 position 定位后再加 transform 动画，容易出现位移“跳变”、起点错位、动画不连贯等问题。根本原因是 position（如 top/left）和 transform: translate() 作用于同一元素时，浏览器渲染逻辑不同，且二者会叠加影响最终布局位置，尤其在动画起始/结束帧或重排触发时表现明显。
max-width 不是限制容器“最大能多宽”，而是告诉浏览器：“这个元素宽度最多别超过这个值，哪怕父容器更宽也请停住”。它常用于 、
width: 100% 实现弹性缩放。
低端设备（如旧款安卓手机、入门级平板）GPU 性能弱、主线程调度压力大，而 CSS 动画若包含过多关键帧、复杂属性或频繁重排/重绘，会直接触发强制同步布局或软件渲染，导致帧率跌破 30fps。简化 @keyframes 的本质是减少浏览器每帧需计算和合成的量，尤其避开触发重排（layout）和重绘（paint）的属性。
HTML5 本身不提供专门的“动画缩放”标签，缩放效果完全依赖 CSS 的 transform 属性。最直接、兼容性最好、性能最优的方式就是用 scale() 函数。
CSS 的 transition 只对可计算的数值型属性生效，而 height: auto 是一个关键字，浏览器无法确定它对应的像素值，因此无法插值动画。直接写 transition: height 0.3s 在从固定高度变到 auto 时会“啪”一下跳变。