web页面布局知识总结

一、布局基础

1. 元素默认排列方式：块级元素独占一行，行内元素并排显示。
2. 盒模型：所有元素都有内容、内边距、边框、外边距。
3. 清除默认样式：先重置浏览器默认边距，布局更稳定。

二、三种常用布局方式

1. 标准流元素默认从上到下、从左到右排列，不用写样式，最基础。

2. 浮动（float）让块级元素横着排列，做导航、两栏三栏布局常用。注意：浮动后要清除，避免父盒子高度塌陷。

3. 定位（position）让元素固定在某个位置，适合做悬浮按钮、固定导航、弹窗。相对定位：不脱标；绝对定位：脱标，找父级定位；固定定位：固定在屏幕。

三、现代最强布局：Flex 布局

最常用、最简单的一维布局，适合一行或一列排列。给父盒子加 display: flex，子元素就能灵活排列。常用功能：水平居中、垂直居中、两端对齐、自动占满剩余空间。适用：导航、表单、列表、居中、自适应分栏。

四、响应式布局

让网页在手机、平板、电脑上都能正常显示。要点：

1. 加视口 meta 标签
2. 使用百分比、rem、vw 等单位
3. 用媒体查询，根据屏幕宽度调整样式

五、常用布局场景

1. 水平垂直居中：优先用 flex
2. 两栏 / 三栏布局：flex 最方便
3. 固定导航：固定定位
4. 列表排列：flex

六、总结

1. 基础：标准流、浮动、定位
2. 主流：flex 解决大部分布局
3. 适配：响应式适配多设备