对盒子模型的理解（对盒子模型的理解和认识）

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

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

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

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

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

本文目录:

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

• 2、什么是css的盒子模型

• 3、谈谈你对css盒模型的理解

• 4、浅谈CSS中的盒模型

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

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

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

二、什么是css的盒子模型

CSS盒子模型就是在CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性，可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。

CSS盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心，呈现盒子的主要信息内容；填充是内容区和边框之间的空间；边框是环绕内容区和填充的边界；空白边位于盒子的最外围，是添加在边框外周围的空间。

扩展资料：

CSS盒子模型特点：

1、丰富的样式定义：CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改：CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

3、多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

参考资料来源：百度百科-CSS盒子模型

三、谈谈你对css盒模型的理解

标准模型 和 IE 盒模型

内容： border + content + margin + padding

两种盒模型的区别

计算高度和宽度的方式不同

标准盒模型的计算方式 是 content 的高度和宽度

IE 盒模型的计算方式是 content + padding + border

1. 获取内联样式的宽、高.. (只能获取内联样式）

2. 内联和外联样式都能取到（只支持IE）

3. 所有的都支持

4. 计算绝对位置，能获取4个元素值 top right width height

对于行内元素 margin-top margin-bottom 设置无效， margin-left margin-right 有效！ 对于相邻的块级元素 margin-top 和 margin-bottom 两者叠加按照一定的规则

（1） 都是整数 margin值取两者的最大值

（2） 都是负数 margin值取最小值

（3）两者正负相反，margin值取两者之和

（1） BFC 这个元素的垂直方向的边距会发生重叠。

（2） BFC 的区域不会与浮动元素的box重叠

（3） BFC 在页面是一个独立的容器，内外元素互补干涉

（4）计算 BFC 高度的时候浮动元素也会参与计算

根元素：

（1） float 属性不为 none

（2） position 为 absolute 或 fixed

（3） display 为 inline-block table-cell`````` table-caption``````flex`````` inline-flex

（4） overflow 不为 visible

（2） BFC 不与 float 重叠

（3） BFC 子元素即使是浮动元素，也不影响父集元素的计算。

如果不创建 BFC 父级元素的高为 0

四、浅谈CSS中的盒模型

显然，盒模型比我想象的，比我最开始在前端课程中学到的其实要复杂得多。

我将现阶段学到的内容与过去学习所留下的印象进行对比，得出了如下我以为CSS盒模型中的难点和容易被忽视的点。

它是一切开始的基础

在MDN的文章中，盒模型被分为 标准盒模型 和 替代盒模型 。

通常我们一开始学习的盒模型是标准盒模型，它的width和heigth属性所设置的是content的宽度和高度，而不是盒子部分的宽度和高度（把border和它所围起来的部分叫盒子部分）

所以在练习布局的时候，我们有时候会觉得这个width和heigth很怪，并不能很方便直接地将我们心中所想象的布局表达出来，有时甚至需要计算。

而替代盒模型更符合我们的直觉。替代盒模型中的width heigth所指即为border所包括部分的width heigth.

将浏览器默认的标准盒模型改为替代盒模型

margin可以有负数，而padding不可以为负数。

负数意味着样式会重叠入侵。

[图片上传失败...(image-b2c4e1-1642049365894)]

可以参考视频: CSS外边距塌陷 - Web前端工程师面试题讲解

折叠的规则很好理解，大的覆盖小的，长的覆盖短的。

比如A和B的外边距折叠，A的外边距为10， B的外边距为20，那么结果是AB的间距为20。

外边距重叠的情况一共有三种。

之所以是垂直方向，是因为折叠发生在block元素上，block元素并不存在水平相接的情况。

对于Inline元素，比如说两个水平相接的span标签，实测是不会折叠的。

这个有点复杂，MDN的说法如下：

举例如下:

设置了border:solid, 正常：

将border:solid设置为none后，出现了折叠。（可以理解为偏移的参照系变化了，未设置Border，参照变成了上面的divB）

更为深入的探究，等往后遇到了再说吧。

参考： MDN盒模型

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

推荐阅读：

对盒子模型的理解（对盒子模型的理解和认识）

ChatGPT会带来什么

四川酒店景观设计加盟（四川酒店景观设计加盟费多少）