flex_第5页_新疆栾骏商贸有限公司

用display:grid可简化布局维护，支持区域命名与自适应列宽；避免flex深度嵌套与margin依赖；组件应自带完整样式；优先用clamp()和容器查询替代单一max-width媒体查询。

核心解决思路是控制子项自身对齐行为并限制内容溢出表现：设align-self:start/center防撑高，配合max-height:100%和overflow:auto实现安全滚动。

移动端优化需主动干预，包括添加viewport标签、禁用touch高亮与延迟、设置触摸目标44px、字体16px、校准字体渲染及行高。

混用%和fr时，百分比列先按容器宽度计算，fr列再平分剩余空间；顺序影响布局，如50%1fr1fr中后两列各得剩余空间的1/2，而非容器的25%。

Flex布局能直接绕过margin重叠问题，因其容器创建BFC且子项margin不塌陷；推荐用gap控制间距，automargin实现特殊对齐；需注意IE兼容性及语义结构。

Flexbox和Grid可解决多列布局中高度不一致问题；2.设置display:flex或display:grid后，子元素自动等高；3.推荐放弃浮动布局，优先使用Flexbox（一维）或Grid（二...

浮动元素覆盖定位元素的本质是层叠上下文与文档流冲突；解决方法包括用z-index控制顺序、统一层叠上下文，或改用Flex/Grid布局替代浮动。

srcset和sizes让浏览器按设备像素比和布局宽度自主选图：srcset提供带w/x的候选图，sizes定义图片显示宽度，二者配合避免模糊；需避免混用单位、缺失sizes、仅用x描述，且WebP/...

margin作用于元素外边距，影响与兄弟/父容器间距；padding作用于内边距，撑开内容与边框间空间；两者均不改变width/height（box-sizing未设border-box时）。

响应式图片边距不均主因是父容器flex/grid布局未统一处理间距，应优先用gap替代单图margin，配合aspect-ratio、object-fit及对齐属性确保布局稳定。