技术博客
纯 CSS 实现吃豆人张嘴闭嘴，本质不是“画一张嘴”，而是用一个圆形裁出扇形缺口。关键在于：用 border-radius: 50% 得到正圆，再通过 clip-path 或「错位遮罩」模拟开口——但最轻量、兼容性最好的方式其实是旋转一个带缺口的圆弧形元素。不过更常用且稳妥的做法是：用两个重叠的 div，底层是完整圆，上层是旋转的扇形遮罩（或反向剪裁）。
Grid 适合定义整体结构（比如页面分栏、卡片网格），Flex 适合单行/列内的元素对齐与分布。如果把 display: flex 容器作为 display: grid 的直接子项，通常没问题；但反过来——在 display: flex 容器里嵌套 display: grid 子项，只要不破坏 flex 主轴方向的流式逻辑，也完全可行。关键看层级职责：外层定区域，内层调细节。
absolute 定位元素根本不受 flex-shrink 控制——它压根就不是 flex 项目，所以调这个属性毫无意义。
常见现象是：用 grid-template-areas 划出 "menu content" 区域，再给 .menu 加 position: absolute 或 transform: translateY(-100%) 做悬停展开，结果菜单直接消失或错位。
关键不是“加汉堡图标”，而是先让默认导航在小屏下不显示，再用媒体查询切回桌面布局。主流做法是：默认移动端样式（折叠态），@media (min-width: 768px) 里恢复横向排列。别反着写，否则在旧版 Safari 或某些安卓 WebView 里容易触发两次重排。
是的，这是最常见错觉。用 float: left 给 label 和 input 同时浮动，它们确实会并排，但后续表单项大概率塌陷、错位，甚至整个表单容器高度变成 0。
矩形统计图（比如横向柱状图）本质是「等高、宽度按数据比例缩放的色块排列」，flex 是最轻量且响应友好的选择。用 float 会破坏文档流，导致父容器高度塌陷；用 absolute 则失去弹性，数据一变就得重算 left/top。
CSS里的孤行问题，不是“页面只有一行字”这种字面意思，而是指段落末尾或标题开头单独被挤到新行、和主体内容断开——比如一个两字标题简介在窄屏上被强行拆成“简”在上一行、“介”在下一行，或者标题单独占顶、下面正文却空出一大截。这种断裂感在移动端特别刺眼，因为视口宽度小、行高相对大，line-height和font-size稍一变化就容易触发。
因为默认样式太难看，且老浏览器不支持。Chrome 12+、Firefox 49+、Safari 6.2+ 支持，Edge 79+ 也行；IE 全系不支持。如果你的项目要兼容 IE 或旧安卓 WebView，就得换方案。
C++ 里递归没写好，main 都没机会输出错误信息，程序就 Segmentation fault 或 stack overflow 了。根本原因不是逻辑错，是调用栈压得太深——每次递归都占一份栈空间，而默认线程栈通常只有 1~8MB。