HTML文档流

最新推荐文章于 2023-11-22 15:11:50 发布

无名氏*

最新推荐文章于 2023-11-22 15:11:50 发布

阅读量149

点赞数

本文链接：https://blog.csdn.net/qq_44848423/article/details/112345164

版权

概念

我们编写的html文档是显示在浏览器上面的，我们可以将浏览器的屏幕比作河流的两岸，那么它里面显示的内容就是文档流。
文档流的组成单位就是html元素。大致可以分为两类:

元素类型	特点	举例
块级元素（block）	在文档流中独占一行，元素前后都有换行符	`div`、`p`
内联元素（inline）	多个内联元素在文档流中可以并排显示	`span`、`img`

块级元素和内联元素

看下面的例子

<style>
    .inline {
        border: 1px solid black;
    }

    .block {
        border: 1px solid black;
    }
</style>

<body>
   <span class="inline">hello</span>
   <span class="inline">world</span>
   <div class="block">
       hello world
   </div>

</body>

在这里插入图片描述

我们可以发现内敛元素并不是仅仅挨在一起的，中间是有一个空格的。
内联元素里面的换行符会被解析为空格。

<span class="inline">hello</span>
<span class="inline">w
    o
    r
    l
    d</span>

在这里插入图片描述

内联元素和块级元素转换

在内联元素前后加上一个换行符就能变为块级元素。我们只需要设置display:inline和display:block就可以进行内联元素和块级元素的转换。

无名氏*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML文档流

概念    我们编写的html文档是显示在浏览器上面的，我们可以将浏览器的屏幕比作河流的两岸，那么它里面显示的内容就是文档流。    文档流的组成单位就是html元素。大致可以分为两类:元素类型特点举例块级元素（block）在文档流中独占一行，元素前后都有换行符div、p内联元素（inline）多个内联元素在文档流中可以并排显示span、img块级元素和内联元素 &nb
复制链接

扫一扫