阅读 2565

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

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

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

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

请看下图

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

行内元素

  • 只有设置左右的marginpadding
  • 不能设置高宽,它的高度取决于内部文字的行高。宽度取决于内部文字的多少

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

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

<div>
    <a>
       <div><div>
    </a>
</div>
复制代码

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

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

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

结论:

  • 行内元素内嵌块级元素。高度被子元素撑大,而宽度和父级一致(父级是body就是body的宽度)。
  • 行内块元素内嵌块级元素。宽高都会被子元素撑大的。

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

文章分类
前端
文章标签