在网页制作中，DIV配合CSS是最基础也最灵活的布局方式。所谓编辑HTML中的布局，实质就是调整文档里各个块级容器的嵌套关系，再通过样式表规定它们的大小、位置和排列方向。理解这一点，比记住某几个属性更重要，因为浏览器渲染页面时始终遵循盒模型与文档流规则。
一、搭建语义化的DIV结构
编辑布局的第一步不是在CSS里写规则，而是在HTML中规划清晰的区域划分。很多初学者一上来就堆砌<div>，却不思考每个块代表什么内容，结果后期样式越写越乱。推荐的做法是先按页面功能切分，例如头部、导航、主体内容、侧边栏和底部，分别用带有类名的<div>包裹，类名用含义明确的英文，如header、nav、main、sidebar、footer。
语义化结构不仅方便自己维护，也让浏览器和搜索引擎更容易理解页面。需要注意的是，DIV本身没有任何默认布局含义，它只是块级盒子。如果你在HTML里写成多层无意义的嵌套，比如<div>里面套<div>再套<div>，而没有对应视觉区块，那么CSS选择器和后期调整都会变得痛苦。下面是一段基础结构示例，展示了如何用DIV划分页面区域。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基础布局</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">网站头部</div>
<div class="nav">导航菜单</div>
<div class="main">
<div class="content">主体内容</div>
<div class="sidebar">侧边栏</div>
</div>
<div class="footer">底部信息</div>
</body>
</html>
上面的代码没有直接写任何布局样式，仅仅用类名标记了区域。这种写法把结构和表现分离，后续无论用浮动还是Flex，都能针对类名设置。实际项目中，还应尽量用<header>、<nav>、<main>等语义标签替代部分DIV，但DIV作为通用容器依然不可替代，特别是在需要额外包裹层做样式钩子时。
二、用CSS控制DIV的排列与间距
结构写好之后，真正的“编辑布局”工作落在CSS上。最核心的概念是盒模型：每个DIV都是一个矩形盒子，由内容、内边距、边框和外边距组成。通过调整width、padding、margin和box-sizing，你可以精确控制占位。很多排版错位就是因为忽略了box-sizing默认值造成的，建议全局设置box-sizing: border-box，让宽度包含内边距和边框，减少计算误差。
传统排版常用float让多个DIV并排，但浮动会脱离文档流，需要父容器清除浮动，否则高度塌陷。现代方案更推荐Flex布局，只需在父容器写display: flex，子DIV就能按主轴排列，并用justify-content和align-items对齐。下面的CSS展示了如何让main中的content和sidebar左右分栏，且侧边栏固定宽度。
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
}
.main {
display: flex;
gap: 20px;
padding: 20px;
}
.content {
flex: 1;
background: #f0f0f0;
padding: 15px;
}
.sidebar {
width: 300px;
background: #e0e0e0;
padding: 15px;
}
使用Flex的好处是无需清除浮动，也不会因为子元素内容长短导致布局断裂。如果你需要兼容非常老的浏览器，再考虑float方案，并用overflow: hidden或伪元素清除浮动。无论哪种方式，都应把样式写在外部CSS文件里，而不是写在HTML的style属性中，否则编辑布局时要在HTML里翻找，极难统一修改。
三、定位与常见错位排查
除了正常文档流和Flex，position属性也是编辑布局的关键。相对定位position: relative不脱离文档流，只是视觉偏移；绝对定位position: absolute相对于最近的非static祖先定位，常用来做弹层或角标；固定定位position: fixed相对视口，适合顶栏。新手常犯的错误是把一个DIV设成absolute却忘了给父级设relative，结果元素飞到页面角落。
当布局出现错位时，建议先用浏览器开发者工具查看每个DIV的计算样式和盒模型。重点检查：是否误设了margin塌陷、是否父容器高度没撑开、是否Flex子项被压缩。另一个常见坑是DIV默认宽度占满父级，如果并排的两个块总宽超过100%，就会换行。此时可用flex-shrink: 0保护侧边栏，或用min-width: 0允许内容区收缩。代码示例如下，解决Flex中内容溢出导致的错位。
.sidebar {
flex-shrink: 0;
width: 300px;
}
.content {
min-width: 0;
flex: 1;
}
编辑网页HTML布局不是背属性，而是建立“结构决定语义、样式决定表现”的思路。每次调整前先想清楚这个DIV在页面中的角色，再用对应CSS控制。遇到错乱不要急着加神奇数字边距，而是回到盒模型和定位上下文找原因。熟练之后，无论是改版还是做响应式，都能通过增删几个类名和规则完成，而不用重写结构。