4月16日

Web 前端 DIV 布局（最核心、最基础的布局方式）
DIV 布局，就是用

标签 + CSS（浮动、定位、盒模型）来搭建网页结构，是早期最主流、现在依然必须掌握的布局思路。
简单理解：
把页面切成一个个盒子（div），再用 CSS 排列这些盒子。
一、DIV 是什么？

是块级无意义容器，专门用来划分区域、布局 默认独占一行，可以设置宽高、内外边距、背景 本身没有样式，全靠 CSS 控制 html 预览

我是一个盒子

二、DIV 布局核心思想：盒模型 所有 div 都遵守盒模型： 总宽度 = width + padding + border + margin plaintext ┌───────────────────┐ │ margin 外边距 │ │ ┌─────────────┐ │ │ │ border 边框 │ │ │ │ ┌─────────┐ │ │ │ │ │padding │ │ │ │ │ │ 内容 │ │ │ │ │ └─────────┘ │ │ │ └─────────────┘ │ └───────────────────┘ 三、DIV 布局的三种实现方式 1. 普通文档流布局（默认） div 从上到下依次排列，独占一行。 html 预览

头部

内容

底部

css .header { height: 80px; background: #333; } .content { height: 500px; background: #f5f5f5; } .footer { height: 60px; background: #222; } 2. 浮动 DIV 布局（最经典） 用 float 让多个 div 并排，实现两栏、三栏布局。 两栏布局（左侧固定 + 右侧自适应） html 预览

左侧

右侧

css .left { width: 200px; height: 400px; float: left; background: #ddd; } .right { height: 400px; background: #eee; margin-left: 200px; } 三栏布局 css .left { float: left; width: 200px; } .right { float: right; width: 200px; } .main { margin: 0 210px; } ⚠️ 注意： 浮动后父盒子会高度塌陷，必须清除浮动。 3. 定位 DIV 布局（position） 用定位实现：固定导航、悬浮窗、置顶元素。 css .header { position: fixed; top: 0; left: 0; width: 100%; } 四、标准 DIV 页面结构（通用骨架） html 预览

头部导航

侧边栏

内容区域

底部版权

这就是所有网站的基础结构。 五、DIV 布局优缺点 优点 结构清晰，语义化强（配合 class/id） 灵活，可自由嵌套、自由排版 兼容性极好，所有浏览器支持 缺点 纯 DIV+float 布局代码繁琐 容易出现高度塌陷、布局错乱 现代项目优先用 Flex / Grid，更简单 六、DIV 布局 vs Flex 布局 DIV 布局：传统、基础、必须懂 Flex 布局：现代、简单、好用 实际工作：DIV 划分结构 + Flex 排列内容