在最近的项目中。出现了原来已经设置溢出隐藏的元素却又溢出了的问题。 经过查证原来是用来做父元素的<a>变成了<button>。（这是一个封装好的组件。检测到有效href就渲染a否则就是button。） 这也引出一个关于行内元素和行内块元素的问题。
行内元素也就是display:inline的元素，最典型的是<a>标签。
行内块元素就是display:inline-block的元素，典型的有input。
请看下图
这图很清楚的表明常见的三种元素显示类型。
行内元素
- 只有设置左右的
margin和padding。 - 不能设置高宽，它的高度取决于内部文字的行高。宽度取决于内部文字的多少。
行内块元素和块级元素的属性基本一致。可以设高宽、边距。不同在于它允许左右存在元素。而块级元素就算只有1px也不允许有元素和它共享一行。
那么如果它们内嵌块级元素会怎么样呢，html结构如下
我们可以改变里面的div的宽度可以看出a标签的宽度是不随着子元素的宽度变化而变化的，一直与自己的父级一致。倒是高度会随着变化。
行内块则不同，它的宽高都是随着内部块级元素的变化而变化相当于height:auto;width:auto。
这也解释我在开头遇见的问题。我给组件设置了overflow:hidden。a标签宽度随父元素，所以能生效。而<button>的宽度却随着子元素的宽度变化而变化的，它的overflow:hidden毫无用处。
结论：
- 行内元素内嵌块级元素。高度被子元素撑大，而宽度和父级一致（父级是body就是body的宽度）。
- 行内块元素内嵌块级元素。宽高都会被子元素撑大的。
参考