Question

行内元素与行内块元素的区别

Answer 1

在最近的项目中。出现了原来已经设置溢出隐藏的元素却又溢出了的问题。
经过查证原来是用来做父元素的 <a> 变成了 <button> 。（这是一个封装好的组件。检测到有效 href 就渲染a否则就是button。）
这也引出一个关于行内元素和行内块元素的问题。

行内元素也就是 display:inline 的元素，最典型的是 <a> 标签。

行内块元素就是 display:inline-block 的元素，典型的有 input 。

请看下图

这图很清楚的表明常见的三种元素显示类型。

行内元素

行内块元素和块级元素的属性基本一致。可以设高宽、边距。不同在于它允许左右存在元素。而块级元素就算只有1px也不允许有元素和它共享一行。

那么如果它们内嵌块级元素会怎么样呢，html结构如下

我们可以改变 里面的 div的宽度可以看出a标签的宽度是不随着子元素的宽度变化而变化的，一直与自己的父级一致。倒是高度会随着变化。

行内块则不同，它的宽高都是随着内部块级元素的变化而变化相当于 height:auto;width:auto 。

这也解释我在开头遇见的问题。我给组件设置了 overflow:hidden 。a标签宽度随父元素，所以能生效。而 <button> 的宽度却随着子元素的宽度变化而变化的，它的 overflow:hidden 毫无用处。

结论：

参考 CSS display: inline vs inline-block [duplicate]