-
让品牌有温度、有情感
专注品牌策划15年
盒子模型都包括什么（盒子模型都包括什么属性）
发布时间：2023-04-07 01:44:34
稿源：
创意岭 阅读：
51
大家好！今天让小编来大家介绍下关于盒子模型都包括什么的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
创意岭作为行业内优秀的企业，服务客户遍布全球各地，相关业务请拨打电话：175-8598-2043，或添加微信：1454722008
文章目录列表:
一、什么是盒子模型？
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
二、对盒子模型的理解
（整理自网络）
1、盒子模型有两种，W3C和IE盒子模型（padding-border-margin模型）
从直观上而言，margin用于控制块与块之间的距离。倘若将盒子模型比作展览馆里展出的一幅幅画，那么content就是画面本身，padding就是画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离。
包括margin、border、padding、content ，元素的width=content的宽度
其与W3C盒子区别在于它的content 部分包含了 border 和 padding。
那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子。
我个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在 CSS3 中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。
语法：box-sizing:content-box|border-box|inherit;
设置box-sizing:border-box以后，如果想要一个宽度为200px的盒子，那么我们直接设置宽度为200px。当再设置它的左右边框和左右补白后，它的内容区会自动调整（向里缩进）。
DOM是 Document Object Model的缩写，即“文档对象模型”。一个网页的所有元素组织在一起，就构成了一个棵“DOM”树。
一个HTML文档并不是一个简单的文本文件，而是一个具有层次结构的逻辑文档，每一个HTML元素都作为这个层次结构中的一个节点存在。每个节点反应在浏览器上回具有不同的表现形式，具体的表现形式是由CSS来决定的。
CSS的目的是使网页的表现形式与内容结构分离，CSS控制网页的表现形式，HTML控制网页的内容结构。
“标准文档流”简称“标准流”。指在不适用其他的与排版和定位相关的特殊CSS规则是，各种元素的排列规则。
1. 块级元素（blocklevel）
总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
2. 行内元素（inline）
标记本身不占有独立的区域，仅仅实在其他元素的基础上指出了一定的范围。
行内元素在DOM树种同样是一个节点。从DOM的角度来看，块级元素和行内元素是没有区别的，都是树上的一个节点；而从CSS的角度来看，二者有很大的区别，块级元素拥有自己的区域，行内元素则没有。
标准流就是CSS规定的默认的块级元素和行内元素的排列方式。
3. 标记和标记
是一个块级元素，他保卫的元素会自动换行。而仅仅是一个行内元素，在它的前后不会换行。
4. 盒子在标准流中的定位原则
（1）行内元素之间的水平margin
当两个行内元素紧邻时，他们之间的距离为 第一个元素的 margin-right 加上第2个元素的margin-left。
（2）块级元素之间的竖直margin
两个竖直块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者。这个现象称为 margin 的“塌陷”现象。
（3）嵌套盒子之间的margin
如果父div的高度值小于子块div的高度加上margin的值，此时IE浏览器会自动扩大，保持子元素的margin-bottom的空间以及父元素自身的padding-bottom。而firefox会保证父元素的高度完全吻合，子元素会超出父元素的范围。
CSS规范中有四个宽度和高度的相关属性，为：min-height、max-height、min-width、max-width。 IE浏览器不支持。
（4）将margin设置为负值
当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。
三、CSS中的标准盒子模型和怪异盒子模型
原文链接： https://blog.csdn.net/qq_41145685/article/details/104464232
—————————————————————
一、什么是盒子模型(Box Model)
盒子想必大家都是知道的吧！
生活中我们的快递有盒子包装着，买的蛋糕也是有盒子包装着，我们的礼品也是被盒子包装着。
模型是什么呢？
它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件
css中的盒子模型它是可以对元素进行布局，设置距离的大小，这里面包括含有外边距、边框、内边距和内容主体这四个部分。
二、CSS中的标准盒子模型(W3c标准的盒子模型)
CSS中的盒子模型也是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件，在网页的实体中我们是看不见实际盒子模型的。但是我们能够清楚的看到它起到的作用。
1、盒子模型由” content(内容)+padding(内边距)+border(边框)+margin(外边距)“四个部分组成
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
2、标准盒子模型的计算
如图：
标准的盒子模型的大小是：content(区域内容大小)+padding(内边距)+border(边框)+margin(外边距)；
注：标准盒子的初始设置宽高大小不包含padding、border和margin的大小。
三、怪异盒子模型(IE标准的盒子模型)
1、怪异盒模型也叫IE盒子模型
怪异盒主要表现在IE内核浏览器中，当前大部分浏览器支持的是W3C的标准盒子模型，不过其他浏览器也保留了IE盒子模型的支持，需要在CSS中添加触发怪异盒的条件。
怪异盒子(IE盒子模型)的触发条件：
(1) 给元素添加CSS3属性box-sizing:border-box; (注：所以如果用CSS3新属性，就不要考虑低版本浏览器了)
(2)文档结构的doctype不写，这个是在IE8 IE7 IE6 IE5等低版本上有，测试可以在win7系统上比较老旧的IE浏览器上，win10自带的新IE浏览器不可以。
2、怪异盒子(IE盒子模型)模型的计算
如图可见添加了怪异盒的div盒子宽度变小了。
标准的盒子模型的大小是：content(区域内容大小)+margin(外边距)；
注：怪异盒子的初始设置宽高大小包含padding、border大小在内，但不包含margin的大小。
四、什么是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盒子模型
以上就是小编对于盒子模型都包括什么问题和相关问题的解答了，如有疑问，可拨打网站上的电话，或添加微信。
推荐阅读：
赣公网安备 50019002502384号
