img标签块状与内联的博弈

新手，请前辈们不吝赐教

说到html中img标签是内联还是块状元素，我们首先要知道什么是内联(inline)，什么又是块状(block)？

 我也在网上查看了一些别人分享的经验，有一个讲到了文档流的概念，我觉得有必要在这里跟大家分享一下，将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

A.任何不是块级元素的可见元素都是内联元素。

    其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。

    所以有个很好的方法测试是内联还是块状  设定css中 border-bottom:1px solid #000; 这时行元素是每行下方都有一条黑色的细线。而块级元素所显示的黑线只会在块的下方。

B.内联元素是一条线，而块状元素是一堆线段组成的有限面。

C.你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。

D.内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素。

E.块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。

 

根据以上，在这博弈的过程中就产生了可变元素其基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。

下面列出我们常见的一些内联元素及块状元素：

 

转载于:https://www.cnblogs.com/zhuxiaoyu/p/inline-block.html