网页布局

答案：CSS Grid结合media query与fr单位可实现响应式布局。通过媒体查询在不同屏幕宽度下调整grid模板列数，从移动端单列到桌面端多列；fr单位弹性分配空间，避免固定尺寸限制；配合minmax()与auto-fit可自动适应列数，适用于卡片、图库等场景，简化代码并提升维护性，同时需注…

使用repeat(auto-fill, minmax())可创建自动调整列数的响应式栅格系统，.container设置grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))时，每列最小200px，容器宽度足够则自动新增等宽列并均分剩余…

Flex负责整体布局，position处理局部精确定位。先用Flex排列子元素，再对特定元素使用绝对定位实现微调，如导航徽标；避免对需参与Flex布局的元素使用position: absolute，可结合transform实现响应式精准定位。 在现代网页布局中，CSS的定位（position）和Fl…

浮动和定位是CSS经典布局手段，通过工具类可提升开发效率。1. 浮动工具类如.float-left、.float-right用于实现元素并排显示，常用于图文混排或简单多列布局，但需配合.clearfix解决父容器高度塌陷；2. 定位工具类如.pos-relative、.pos-absolute结合.…

浮动导致父容器塌陷，需通过清除浮动解决；推荐使用伪元素清除法（.clearfix::after）或触发BFC（如overflow:hidden），避免布局错乱，适用于旧项目维护与特定布局场景。 浮动（float）曾是网页布局的核心技术之一，在现代CSS中虽逐渐被Flexbox和Grid取代，但在维护…

Flex和Grid布局中浮动失效，应使用各自提供的对齐属性；仅在非Flex/Grid容器中浮动有效，适用于图文环绕等场景；混合使用时需注意结构划分与清除浮动，推荐优先采用现代布局方案以确保可维护性。 在现代网页布局中，Flex 和 Grid 已经成为主流的布局方式，而传统浮动（float）布局虽然逐…

CSS盒模型与浮动结合可实现传统布局。盒模型包含content、padding、border、margin，默认width仅含content，设置box-sizing: border-box后更易控制尺寸；浮动（float）使元素脱离文档流，实现文字环绕或两栏布局，但会导致父容器高度塌陷及后续元素错…

margin用于控制元素外边距，提升页面布局清晰度；支持四方向设置或统一设置，可使用px、%、auto等值；通过margin: 0 auto可实现块级元素水平居中；需注意垂直方向相邻元素的margin合并问题，常取较大值，可通过设置单边margin、添加border或触发BFC避免。 在网页布局中，…

使用float、margin和padding可实现网页中常见的卡片浮动布局，适用于图片、商品等多列展示。通过设置.card元素左浮动、固定宽度与外边距，配合父容器overflow:hidden清除浮动，结合box-sizing:border-box和媒体查询优化响应式表现，避免错位。推荐现代项目采用…

Flex 与 Grid 互补：Grid 用于整体页面区域划分，如仪表盘的 header、sidebar 和 main 布局；Flex 用于组件内部排列，如卡片自适应换行。通过 @supports 实现渐进增强，兼顾现代与旧浏览器兼容性，结合分层思维与响应式设计，提升代码可维护性与布局灵活性。 在现代…