首页 > 编程学习 > 标准盒模型和怪异盒模型(marksheng)

标准盒模型和怪异盒模型(marksheng)

发布时间:2023/1/25 12:46:21

标准盒模型和怪异盒模型

盒子模型众所周知,这里先简单介绍一下。

可以看到,在标准盒模型下,width和height是内容区域即content的width和height。而盒子总宽度为

在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

而IE盒模型或怪异盒模型显而易见的区别就是,width和height除了content区域外,还包含padding和border。盒子的总宽度为

一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)

 

当然这些大伙应该都知道,关键的是如何运用选择哪种盒模型

首先,如何运用?

只要在文档首部加了doctype申明,即使用了标准盒模型,而不加,则会由浏览器自己决定,比如,ie 浏览器中显示“ie盒子模型”,在 ff 浏览器中显示“标准 w3c 盒子模型”。

然后,选择哪种?

按理说,我们应该遵循w3c标准使用标准盒模型,但我发现很多ui框架使用的都是怪异盒模型,比如ionic,vux,和bootstrap,为什么呢?我思考了很长时间。

不知道大家有没有遇到过这种情况,本来我画了两个div,他们在flex布局下分别占50%的宽度,很简单,我们width设置为50%即可,当我们画完了,很满意的看了看页。

代码:

* {margin: 0;padding: 0;box-sizing: content-box;
}
<div style="display: flex;"><div style="width: 50%;background-color: blue;color: white;">我是左边</div><div style="width: 50%;background-color: red;color: white">我是右边</div>
</div>

效果:

 

这时候,一个需求来了,左边的部分要加上边框,你一想,这不简单么,立马给左边加上了一个边框。但,意外出现了,左边和右边的不相等了。因为左边加上了边框,所以宽度溢出了,这时候右边就会压缩自己,这样就导致两边不一致了

代码:

<div style="display: flex;box-sizing: content-box"><div style="width: 50%;background-color: blue;color: white;border: 5px solid black">我是左边</div><div style="width: 50%;background-color: red;color: white">我是右边</div>
</div>

效果:

啊,崩溃,又得调半天,关键还不好调。因为border必须为数值,而其他的为百分比,这样就很难知道左右该设多少比例,才能让左右两边完全一致了。

而用怪异盒模型,这样的问题就迎刃而解。

代码:

* {margin: 0;padding: 0;box-sizing: border-box;
}
<div style="display: flex;"><div style="width: 50%;background-color: blue;color: white;border: 5px solid black">我是左边</div><div style="width: 50%;background-color: red;color: white">我是右边</div>
</div>

 

 这样不管你边框是多宽,左右都是始终相等的。

然后,再请大家想一想,移动端都是需要自适应布局的,需要用到大量的百分数,这时候再用标准盒模型,边框进来插一脚无疑会让情况变得很复杂,对自适应布局很不友好,这大概就是很多框架都采用怪异盒子模型的原因吧。


本文链接:https://www.ngui.cc/el/2883571.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000