正文

盒子模型种类（盒子模型种类及主要区别）

发布时间：2023-04-06 19:53:14 稿源：创意岭阅读： 131

大家好！今天让创意岭的小编来大家介绍下关于盒子模型种类的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端

官网：https://ai.de1919.com。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解相关业务请拨打电话175-8598-2043，或添加微信：1454722008

本文目录:

1、CSS盒模型分成W3C标准盒模型和IE模型
2、什么是盒子模型？
3、请简述 css 盒子模型与css怪异盒模型
4、什么是盒子模型啊?能举个实际的例子吗?

盒子模型种类（盒子模型种类及主要区别）

一、CSS盒模型分成W3C标准盒模型和IE模型

W3C标准盒模型(默认)：box-sizing: content-box

padding和border都会撑开盒子，改变盒子的宽度高度

总宽度：width + 左右border宽度 + 左右padding宽度 + 左右margin宽度

内盒宽度：width + 左右border宽度 + 左右padding宽度

IE盒模型：box-sizing: border-box

padding和border都不会撑开盒子，不会改变盒子的宽度，盒子的内容会相应缩小

总宽度：width + 左右margin宽度

内盒宽度： width

盒子模型布局稳定性

我们根据稳定性来分，建议如下：

按照优先使用宽度，其次使用内边距，再次外边距。即：width > padding > margin

原因：

（1）margin 会有外边距合并

（2）padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用

（3）width 没有问题我们经常使用宽度剩余法来做

padding margin 百分比

当margin和padding的值设置为百分比时，是相对于最近的块级或内联块父元素width（非总宽度）的相应百分比的值。

即使是margin-top、margin-bottom、padding-top、padding-bottom，设置为百分比时也是以最近块级父元素的width（非总宽度）为基准，而非height。

margin塌陷问题

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方法：

将其放在不同的 BFC 父容器中

</div>

</div>

.container {

overflow: hidden;

}

.child {

width: 100px;

height: 100px;

background: #f0;

margin: 100px;

}

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，必须是block元素。如果父元素没有上内边距padding、没有上边框border、没有内容，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距取其较大者。即使父元素的上外边距为0，也会发生合并。

解决方法：

给父元素加 overflow：hidden，相当于给父元素添加了一个BFC

给父元素加上内边距或上边框

BFC

BFC 全称为块格式化上下文 (Block Formatting Context) 。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

BFC触发条件：

overflow：除 visible 以外的值 (hidden、auto、scroll)

float：除 none 以外的值

display： inline-block、flex

position：absolute、fixed

BFC作用：

BFC解决margin塌陷问题

BFC解决浮动元素引起父元素高度塌陷问题

在通常情况下父元素的高度会被子元素撑开，而如果父元素没有设置高度，其子元素均为浮动元素，此时父元素会发生了高度坍塌，上下边界重合，即浮动元素无法撑起父元素。这时就可以用BFC来清除浮动了，将父元素整体设置为BFC环境

BFC解决元素被浮动元素覆盖问题

如果有两个相邻元素，第一个元素左浮动，第二个元素不设置浮动，这时候第二个元素会有部分被浮动元素所覆盖(但是文本信息不会被浮动元素所覆盖)。如果想避免元素被覆盖，可触发第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden即可

龙华大道1号 http://www.kinghill.cn/Dynamics/2106.html

二、什么是盒子模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

三、请简述 css 盒子模型与css怪异盒模型

1、盒模型与怪异模型的设置

当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

2、盒模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），

元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分，

这就是盒子模型。

在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin

3、怪异盒模型

在怪异模式下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

四、什么是盒子模型啊?能举个实际的例子吗?

什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin).在黑马程序员学习时候就会有老师教过，

CSS盒子模式这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而内边距(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框(border)就是盒子纸板的厚度；至于外边距(margin)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。内容(content)就是盒子里装的东西. 在网页设计上，内容(content)常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

以上就是关于盒子模型种类相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。