div是块级元素，默认display: block，独占一行、宽度撑满父容器、支持全部盒子模型属性；其换行与占宽行为由浏览器内置渲染规则决定，非CSS样式所致。
div 默认是块级元素，它的“块级特性”不是一种样式，而是一套浏览器内置的渲染规则：独占一行、宽度自动撑满父容器、支持所有盒子模型属性（margin/padding/border/width/height）。不写任何 CSS，它就已经这样表现了。
为什么 div 总是换行、占满整行？
这是由浏览器默认的 display: block 决定的，不是 div 自己“有想法”。只要没被 CSS 覆盖，它就会：
- 在前后自动插入换行（即不与其他元素并排）
- 计算宽度时，无视内容长度，直接取父容器的 100% 宽度
- 即使内容只有一句话，也会占据一整行高度（含默认
margin和line-height）
常见错误现象：<div>A</div><div>B</div> 渲染为上下两行；但把其中一个改成 <span>B</span>，就变成 A B 并排——区别就在 display 值不同。
div 的 width/height 为什么有时不生效？
根本原因不是 div 有问题，而是你忽略了它的渲染上下文：
立即学习“前端免费学习笔记（深入）”；
- 父容器是
inline元素（比如没包在<body>或其他块级容器里），div的width可能被忽略 - 设置了
width但没设display: block（极少见，除非你手动改过 display） - 父容器用了
flex或grid，子div的尺寸受 flex 项目或 grid 项规则约束，width只是初始值，可能被拉伸或压缩 - 内容本身超宽（比如长单词、未折行文本），导致
div实际宽度突破设定值（需配合word-break或overflow控制）
用 div 做布局时最容易忽略的两件事
现在没人纯靠 div 排版，但很多人忘了真正起作用的是 CSS 规则：
- 写
display: flex必须加在父div上，子div不需要额外声明——但如果你给子项加了float或position: absolute，它就立刻退出 flex 流，不再受justify-content管控 - 用
display: grid时，父div至少得定义grid-template-columns（哪怕只写1fr），否则所有子div默认挤在第 1 列，视觉上像“没生效”
div 本身只是个空壳容器，它的“布局能力”完全取决于你绑上去的 CSS。别怪 div 不听话，先查 computed style 里 display 值和父容器的布局上下文。
