关于inline元素与inline-block元素在width层面的区别（附加了部分block元素的区别）

2020年5月30日15:58:52

引子：虽然少有人用到inline元素，但是对于inline元素的一些特性我们有时候却又不得不了解，特别是大家在使用width设置宽度值时对此会有许多不解，其与inline-block元素表现如此接近却又有许多不同，这次我只介绍一种，即width层面的不同。

闲话不多说，我们开始正题：

说道设置width，我们不得不先回顾一个重要的概念：盒子，除掉附加盒子这个概念，我们来讨论下盒子的两个组成部分：

①.外在盒子：即盒子的外在表现，诸如块级盒子换行显示，内联盒子同行显示一样

②.内在盒子:  即盒子的内容表现，内容的呈现，与上述概念均同

相信如果自己没有做过实验的话，是很难理解为什么会这样？

甚至于只知其一不知其二，脑子混混沌沌的，因为概念始终模糊不清，笔者之前就是这样，现在也不过是稍微清楚了点

了解了盒子的概念，我们还得知道width作用的细节：

那么width是作用在哪个盒子上的呢？答案当然是内在盒子了，毕竟你要设置的宽度应以内容为主嘛

了解完作用细节，我们还需要记得一个概念：即盒子（据我考证这里均指外在盒子）的尺寸的两种决定方式：

①.盒子的尺寸由外部元素的尺寸决定（例如：div块级标签，父级容器有多大，他都始终填满宽度）

②.盒子的尺寸由内部元素的尺寸决定（例如：span内联标签，文本内容有多宽，其就有多宽（不超过span父容器宽度））

了解完毕，我们开始解析inline元素

inline元素分为2个盒子：外部inline，内部inline，width作用在内部上，那么此时我们知道，内部外部盒子均具有包裹特性，

我们试想这样一个元素:

span {

width: 20px;

}

<span>我们看看他的宽度吧！</span>

此时假设文本宽为 10 * 16px = 160px，外在盒子包裹了它，显示为160px，

此时设置了width: 20px作用在内在盒子上，那么此时内在盒子宽度为20px，内在盒子表现为包裹性，

那么，咦？是不是发现不对了？？？我20px怎么去包裹文本，文本不是160px嘛？怎么办？所以，这就是个悖论，也就是我想表达的观点：

内联非替换元素根本设置不了宽度，这也许就是根源！

那我们再看看inline-block元素，外部表现inline，内部block，相信大家都有过感受，就是display: block的元素设置宽度起来是没问题的，那么为什么？凡事多问问为什么，虽然知道能设置，可是有时候多问问能拓展自己的思维。

猜测：同样来源于上述对inline元素的分析，此时的block元素无论设置多少，其内部margin都可以完美的分担，即使超出了宽度，虽然margin不上了，但是却没有任何影响（这是重点，表明这样设置没有问题），原因或许是

block元素占据一行，从而不会有同行元素受到影响

那么inline-block中的block会是什么样的呢？从个人的研究角度看，觉得这个元素挺复杂的，这涉及了很多知识点：包裹性、填充性甚至还有区别于block元素内外盒子区域的领域（从研究中发现内在盒子和外在盒子是重叠的，参照block元素的内外盒子，他们是分开的，元素的margin/padding/border均操作于内在盒子）

首先咱们看看他们的表现：

block元素：

ps: 灰色部分表示父容器，宽度200px;

这个div元素设置了宽度20px,未设置margin，可以看到margin分担了右边180px的空间，此时的外在盒子填充了父容器200px的空间，内在元素只有20px，此时的margin介于两者之间

inline-block元素：

该div元素display: inline-block，由于inline具有包裹性，所以此时的div元素跟随width: 20px而变动，那为什么我说内外盒子重叠了，并且margin的表现是针对其他同级元素而不是内外盒子之间呢？

于是个人又提出了猜想：根据上述inline元素的解析，此时的block只具备block元素实际意义上的部分功能，即设置宽高等属性，不具备填充特性，为什么呢？且听我一一分析，我们假设它具有填充特性，以下代码展示：

.div-test {

display: inline-block;

width: 20px;

}

.div-parent {

width: 200px;

margin: 0 auto;

}

<div class="div-parent"><div class="div-test">1111111</div></div>

①.当我们去掉div-test中的width时，其宽度表现为内容1111111的长度 -> 7 * 16px = 112px；

②.此时加上了width，我们会发现其宽度只有20px，剩下裸露着其他1（112px - 20px区域的），所有其他margin/padding都没设置，此时的区域只有那20px，剩下的其他区域完全没算进来。 ps: 更重要的是这些元素会与同行的重合，这表明，这些裸露的元素根本不在此之间！

咱们按照上述解释来解析：如果它具有block的全部功能，那么首先，未设置值时，宽度表现为112px，当设置宽度时，其content为20px，剩下的都应该由margin来分担，此时就是完整的block元素，但是可惜，悖论在于，此时分担宽度的margin出现在了内在盒子的内部，而margin是在内外之间的，其不属于盒子的尺寸，只是一个概念，那么可想而知，该block只有部分功能，即设置宽度，那么就很好理解了

此时设置了width: 20px，元素表现为包裹性，外在盒子宽20px，此时设置margin，会发现并未出现在内外盒子（参照上述block元素表现）之间，而是外部，由此得出了结论：

内外盒子重叠了，并且margin是针对其他同级元素的

所以我们对于inline-block元素的结论即：

外部表现为inline,内部是个只具有设置高宽等属性值的block内在盒子，最终表现是包裹性，即使内在盒子设置的宽度比子元素（连文本这最重要的都妥协了，其他的难道不妥协？哈哈）长度还要小，仍旧表现为我行我素的包裹性，哪怕其他元素骑到脸上都无动于衷。

这部分内容过于繁多复杂，后续争取不断纠正简化~~~