单列布局首选max-width+margin:0 auto居中，兼容IE8；双列用Grid配minmax(0,1fr 防拉伸，加gap替代margin；混排需语义化分容器；移动端侧边栏应视觉隐藏而非display:none。...

˂img src="https://img.php.cn/upload/article/001/246/273/176878603339973.jpg" alt="如何正确使用 元素保持代码缩进并避免多余空白 " /˃ 元...

background-size: cover 会等比缩放图片至至少一边填满容器，导致多余部分被裁剪；这是预期行为而非 bug，根本解法是匹配容器与图片比例或改用 contain 配合 background-position...

同时修改 width 和 transform 会抖动，因 width 触发 layout 重排，transform 走合成层，二者冲突破坏合成帧；应仅用 transform（如 scale、translate）和 opaci...

minmax(0, 1fr 是解决 Grid 溢出的关键：其最小值设为 0 允许轨道压缩至内容最小尺寸，配合 auto-fit 实现移动端友好响应式布局，避免因固定最小宽度（如 300px）导致横向滚动。 grid 溢出...

用 display: grid 替代浮动布局可避免多层嵌套和 clearfix 等易错写法，配合 gap 属性统一控制间距，三栏等宽仅需 grid-template-columns: repeat(3, 1fr ，响应式只需...

background-size: cover 不生效主因是容器无明确尺寸，需设height/min-height或触发BFC；cover裁剪填满，contain缩放留白；响应式下应调background-position并用...