块级元素与行内元素的区别以及BFC模型的简单解释

举报
伯约同学 发表于 2022/03/06 20:59:38 2022/03/06
【摘要】 块级元素与行内元素的区别以及BFC布局的简单解释工作中其实经常用到一些span标签和div标签来进行内容的显示,但涉及到文本标签的换行,总得多花那么一两分钟多写一下,今天就专门来瞅一瞅。按照标签的分类可以分为块级元素和行内元素什么是块级元素?独占其父元素的整个水平空间,垂直空间等于其内容高度的元素称之为块级元素。我们常用的div、h、p等标签都属于块级元素可以看到,对于一个普通的div标签而...

块级元素与行内元素的区别以及BFC布局的简单解释

工作中其实经常用到一些span标签和div标签来进行内容的显示,但涉及到文本标签的换行,总得多花那么一两分钟多写一下,今天就专门来瞅一瞅。

按照标签的分类可以分为块级元素和行内元素

什么是块级元素?

独占其父元素的整个水平空间,垂直空间等于其内容高度的元素称之为块级元素。

我们常用的div、h、p等标签都属于块级元素

可以看到,对于一个普通的div标签而言,其内部元素是可以超出其限定高度进行显示,有与外界内容重叠的情况

<!DOCTYPE html>
<html lang="en">

```
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div>
    <div id="content" class="container">
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    
    </div>
    <div class="div2">div2</div>
    <div class="div3">
      div3
    </div>
    <div class="div4">
      div4
    </div>

  </div>

</body>

<style>
  #content {
    color: blueviolet;
    word-wrap: break-word;
    width: 500px;
    height: 60px;
  }

  .div3 {
    float: left;
  }
</style>

</html>
```

就上述代码而言可以看到#content中的内容会跟div2中的内容重叠,同时也可以看到div2是直接换行,紧贴着其父元素的左侧往下排列,这就是普通文档流的排列规则。

当然如果上面的代码没有写word-wrap属性,文本内容会向右延伸,超出其边界。

而对于行内元素而言,如果行内有空间,他们会在行内从左往右排列,否则的话会换下一行显示

    <div id="content" class="container">
      <span>
        contentcontentcontent
      </span>
      <span>
        contentcontentcontent
      </span>
      <span>
        contentcontentcontent
      </span>
    </div>

像上面的代码,content会自动换行,div的左侧有内容,右侧则直接留白,有兴趣的手动练习一下

当然,如果行内元素你没给他设置word-wrap属性的话,文本内容也会在同一行内往右延伸,不会自动换行的。

也就是说对于文档流(Normal flow/正常流)而言块级元素将款级元素自从上往下、行内元素在每行中从左往右,从上往下的顺序排列。由于普通的块级元素里面的内容很容易与外面的内容重叠产生影响,所以我们还需要使用BFC盒子模型来避免一些布局问题

看下W3C上对BFC的定义

```
浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。
```

ok,看了跟没看一样,完全不知道所以然。用通俗的话来讲,BFC就是一个容器,这个容器内存放任何内容都不会影响到外部容器。当然,他并不是像我们说的标签的那种,而是一种特征,具备了某些属性,就不会影响到外部标签的属性。

如何触发成为一个BFC盒模型的条件还是挺简单的

```
1:float的值不为null
2:overflow的值不为visible
3:display的值为table-cell,table-caption,inline-block
4:position的值不为static,relative
```

我们利用BFC也可以做很多事情,最简单的就是在上面的#content样式中加一个overflow:auto来避免其与div2中的内容重叠。

此外还可以用于布局、清除浮动(在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。)、防止margin重叠等场景

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。