盒⼦模型

发表于2025-08-02|更新于2025-12-07|css

|总字数:517|阅读时长:1分钟|浏览量:

盒⼦模型

当对⼀个⽂档进⾏布局（layout）的时候，浏览器的渲染引擎会根据标准之⼀的 CSS 基础框盒模型

（CSS basic box model），将所有元素表⽰为⼀个个矩形的盒⼦（box）

⼀个盒⼦由四个部分组成： content 、 padding 、 border 、 margin

从上图可以看到：

•

盒⼦总宽度 = width + padding + border + margin;

•

盒⼦总⾼度 = height + padding + border + margin

也就是， width/height 只是内容⾼度，不包含 padding 和 border 值

所以上⾯问题中，设置 width 为200px，但由于存在 padding ，但实际上盒⼦的宽度有240px

IE 怪异盒⼦模型

•

盒⼦总宽度 = width + margin;

•

盒⼦总⾼度 = height + margin;

也就是， width/height 包含了 padding 和 border 值

BFC

在⻚⾯布局的时候，经常出现以下情况：

这个元素⾼度怎么没了？

这两栏布局怎么没法⾃适应？

这两个元素的间距怎么有点奇怪的样⼦？

原因是元素之间相互的影响，导致了意料之外的情况，这⾥就涉及到 BFC 概念

BFC （Block Formatting Context），即块级格式化上下⽂，它是⻚⾯中的⼀块渲染区域，并且有⼀

套属于⾃⼰的渲染规则：

•

内部的盒⼦会在垂直⽅向上⼀个接⼀个的放置

•

对于同⼀个BFC的俩个相邻的盒⼦的margin会发⽣重叠，与⽅向⽆关。

•

每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此

•

BFC的区域不会与float的元素区域重叠

•

计算BFC的⾼度时，浮动⼦元素也参与计算

•

BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦然

BFC ⽬的是形成⼀个相对于外界完全独⽴的空间，让内部的⼦元素不会影响到外部的元素

利⽤ BFC 的特性，我们将 BFC 应⽤在以下场景：

防⽌margin重叠（塌陷）

可以在 p 外⾯包裹⼀层容器，并触发这个容器⽣成⼀个 BFC ，那么两个 p 就不属于同⼀个 BFC ，

则不会出现 margin 重叠

清除内部浮动

⾃适应多栏布局

文章作者: BoardYoungC

文章链接: http://example.com/2025/08/02/css/%E7%9B%92%E2%BC%A6%E6%A8%A1%E5%9E%8B/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 BoardYoungC！

相关推荐

css中隐藏⻚⾯元素

css中隐藏⻚⾯元素通过 css 实现隐藏元素⽅法有如下： • display:none 将元素设置为 display:none 后，元素在⻚⾯上将彻底消失元素本⾝占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘消失后，⾃⾝绑定的事件不会触发，也不会有过渡效果特点：元素不可⻅，不占据空间，⽆法响应点击事件 • visibility:hidden 从⻚⾯上仅仅是隐藏该元素，DOM结果均会存在，只是当时在⼀个不可⻅的状态，不会触发重排，但是会触发重绘特点：元素不可⻅，占据⻚⾯空间，⽆法响应点击事件 • opacity:0 opacity 属性表⽰元素的透明度，将元素的透明度设置为0 • 设置height、width模型属性为0 将元素的 margin ， border ， padding ， height 和 width 等影响元素盒模型的属性设置成 0，如果元素内有⼦元素或内容，还应该设置其 overflow:hidden 来隐藏其⼦元素特点：元素不可⻅，不占据⻚⾯空间，⽆法响应点击事件

em/px/rem/vh/vw区别

em/px/rem/vh/vw区别传统的项⽬开发中，我们只会⽤到 px 、 % 、 em 这⼏个单位，它可以适⽤于⼤部分的项⽬开发，且拥有⽐较良好的兼容性从 CSS3 开始，浏览器对计量单位的⽀持⼜提升到了另外⼀个境界，新增了 rem 、 vh 、 vw 、 vm 等⼀些新的计量单位利⽤这些新的单位开发出⽐较良好的响应式⻚⾯，适应多种不同分辨率的终端，包括移动设备等单位在 css 单位中，可以分为⻓度单位、绝对单位，如下表所指⽰这⾥我们主要讲述px、em、rem、vh、vw px，表⽰像素，所谓像素就是呈现在我们显⽰器上的⼀个个⼩点，每个像素点都是⼤⼩等同的，所以像素为计量单位被分在了绝对⻓度单位中有些⼈会把 px 认为是相对⻓度，原因在于在移动端中存在设备像素⽐， px 实际显⽰的⼤⼩是不确定的这⾥之所以认为 px 为绝对单位，在于 px 的⼤⼩和元素的其他属性⽆关 16.2.2. em em是相对⻓度单位。相对于当前对象内⽂本的字体尺⼨。如当前对⾏内⽂本的字体尺⼨未被⼈为设置，则相对于浏览器的默认字体尺⼨（...

flex布局和grid布局

flex布局和grid布局Flex 布局（弹性布局）Flex 是一维布局模型（仅针对「行」或「列」单一维度），核心解决「行内 / 列内元素的空间分配、对齐」问题，适合线性布局（如两栏 / 多栏、导航栏、居中对齐等）。核心特点：以「主轴（默认水平）+ 交叉轴」为核心，元素沿主轴排列；侧重「剩余空间分配」（如 flex:1 自动占满剩余宽度）；适配性强，适合响应式线性布局（如两栏、均分列表）。典型场景：导航栏、两栏 / 多栏自适应、元素垂直居中、流式布局。 Grid 布局（网格布局）Grid 是二维布局模型（同时控制「行 + 列」），核心解决「多行列的网格分区」问题，适合复杂的二维布局（如卡片网格、表单布局、页面整体框架）。核心特点：把容器划分为「行 + 列」的网格，元素可占据任意单元格（跨行列）；支持精确控制行列尺寸（固定 / 比例 / 自动），如 grid-template-columns: 100px 1fr 2fr；布局更精准，适合复杂二维分区。典型场景：页面整体框架（头部...

元素⽔平垂直居中的⽅法

元素⽔平垂直居中的⽅法实现元素⽔平垂直居中的⽅式： • 12345678910111213141516171819202122232425<style>.father{width:500px;1234 height:300px;5 border:1px solid #0a3b98;6 position: relative;7 }8 .son{9 width:100px;10 height:40px;11 background: #f0a238;12 position: absolute;13 top:0;14 left:0;15 right:0;16 bottom:0;17 margin:auto;18 }19 </style>20 <div class="father">21 <div class="son"></div>22 </div> 利⽤定位+margin:auto ⽗级设置为相对定位，⼦级绝对定位...

回流和重绘

回流和重绘在 HTML 中，每个元素都可以理解成⼀个盒⼦，在浏览器解析过程中，会涉及到回流与重绘： • 回流：布局引擎会根据各种样式计算每个盒⼦在⻚⾯上的⼤⼩与位置 • 重绘：当计算好盒模型的位置、⼤⼩及其他属性后，浏览器根据每个盒⼦特性进⾏绘制在⻚⾯初始渲染阶段，回流不可避免的触发，可以理解成⻚⾯⼀开始是空⽩的元素，后⾯添加了新的元素使⻚⾯布局发⽣改变当我们对 DOM 的修改引发了 DOM ⼏何尺⼨的变化（⽐如修改元素的宽、⾼或隐藏元素等）时，浏览器需要重新计算元素的⼏何属性，然后再将计算的结果绘制出来当我们对 DOM 的修改导致了样式的变化（ color 或 background-color ），却并未影响其⼏何属性时，浏览器不需重新计算元素的⼏何属性、直接为该元素绘制新的样式，这⾥就仅仅触发了重绘回流触发时机回流这⼀阶段主要是计算节点的位置和⼏何信息，那么当⻚⾯布局和⼏何信息发⽣变化的时候，就需要回流，如下⾯情况： • 添加或删除可⻅的DOM元素 • 元素的位置发⽣变化 • 元素的尺⼨发⽣变化（包括外边距、内边框、边框⼤⼩、⾼度和宽度等） •...

实现两栏布局右侧⾃适应三栏布局中间⾃适应

实现两栏布局右侧⾃适应三栏布局中间⾃适应两栏布局两栏布局实现效果就是将⻚⾯分割成左右宽度不等的两列，宽度较⼩的列设置为固定宽度，剩余宽度由另⼀列撑满，⽐如 Ant Design ⽂档，蓝⾊区域为主要内容布局容器，侧边栏为次要内容布局容器这⾥称宽度较⼩的列⽗元素为次要布局容器，宽度较⼤的列⽗元素为主要布局容器 flex弹性布局 123456789101112131415<style>.box{display: flex;}.left {width: 100px;}.right {flex: 1;}</style><div class="box"><div class="left">左边</div><div class="right">右边</div></div> 三栏布局三栏布局按照左中右的顺序进⾏排列，通常中间列最宽，左右两列次之⼤家最常⻅的就是...

数据加载中