CSS_关于文档流的问题

最新推荐文章于 2024-10-17 15:53:46 发布

NewBurlaSKing

最新推荐文章于 2024-10-17 15:53:46 发布

阅读量154

点赞数

分类专栏： HTML学习文章标签： html 前端 css3

本文链接：https://blog.csdn.net/qq_55961861/article/details/126250869

版权

HTML学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一.简介

文档流是文档中可显示对象在排列时所占用的位置/空间例如：块元素自上而下摆放，内联元素，从左到右摆放标准流里面的限制非常多，导致很多页面效果无法实现

二.文档流问题

高矮不齐，底边对齐
空白折叠现象
- 无论多少个空格、换行、tab，都会折叠为一个空格
- 如果我们想让img标签之间没有空隙，必须紧密连接
元素无空隙

问题展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <span>我们一起看海景吧</span>
    <img src="hh.webp" alt="" width="200px" height="200px">
    <p>有多个空格折叠，只显示一个：</p>
    <p>海景真       好看 哈哈哈哈~</p>
    <p>元素之间有空隙！</p>
    <img src="hh.webp" alt="" width="200px" height="200px">
    <img src="hh.webp" alt="" width="200px" height="200px">
</body>
</html>