CSS标准文档流简介

最新推荐文章于 2024-02-26 17:21:54 发布

Huang_WeiHong

最新推荐文章于 2024-02-26 17:21:54 发布

阅读量521

点赞数

分类专栏： web 文章标签： css html

本文链接：https://blog.csdn.net/Huang_WeiHong/article/details/118857000

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS标准文档流简介

概念

文档流通俗的讲，就是一个web页面中，每一个模块只能从上到下从左往右的方式排列在页面上

特性

（1）空白折叠现象

无论多少个空格、换行或Tab都会折叠为一个空格

例如：

<img src = "C:\Test.png">	<img src = "C:\Test.png">
<!-- 此处空一个Tab键 -->

效果如下
在这里插入图片描述

<img src = "C:\Test.png">    
<img src = "C:\Test.png">
<!-- 此处空换行 -->

效果如下
在这里插入图片描述

另外，如果想要两张图片无缝连接，两个标签必须紧贴在一起

<img src = "C:\Test.png"><img src = "C:\Test.png">
<!-- 此处空无空格 -->

效果如下
在这里插入图片描述

（2）高矮不齐，底边对齐

如果标签之间高矮不一却又排在同一行中，标签底边对齐
例如

<p>
    七月<span style="font-size:100px;">真的</span>好热
    <img src = "C:\Test.png">
</p>

效果如下
在这里插入图片描述

（3）一行写满，自动换行

块级元素与行内元素

标准文档流等级森严，标签分为两种等级：

块级元素 div、h、dt、dd、li、p
行内元素 a、b、em、span、u、i

文本级标签除了< p >都是行内元素，所有容器级标签加上< p >标签全是块级元素
ps:因为< p >里面只能放文字、图片、表单元素，< p >里面不能放< h >和< ul >，也不能放< p>

（1）块级元素与行内元素的特点/区别

块级元素：一个块级元素 独占一整行，可以设置height与width，如果不设置width将默认设为与父级元素一样
行内元素：多个行内元素可以 共享一行，不能设置height与width，只能被其内容填充撑起
例如：给< div >不设置width，给< span >设置height与width

<!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>
    <style>
        .div1{
            height: 50px;
            background-color:cadetblue;
        }
        .div2{
            height: 50px;
            background-color: blue;
        }
        span{
            height: 50px;
            width: 50px;
            background-color:coral;
        }
    </style>
</head>
<body>
    <div class="div1">NO.1</div>
    <div class="div2">NO.2</div>
    <span>NO.3</span>
    <span>NO.4</span>
</body>
</html>

效果如下
在这里插入图片描述
从结果我们可以看到，两个< div >不设置width时宽度与父级元素一致，且独占一整行；两个< span >设置了height与width也同样不起作用

（2）块级元素与行内元素的相互转换

通过display属性可以将块级元素与行内元素相互转化
比如，块级元素转化为行内元素，那么意味着被转化的这个块级元素不再拥有块级元素特点，而是拥有行内元素特点，即该块级元素不能设置height与width，且不再独占一整行，而是和其他元素并排
举个例子：给转化为行内元素的< div >设置height与width

<!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>
    <style>
        .div1{
            display: inline;
            height: 50px;
            background-color:cadetblue;
        }
        .div2{
            display: inline;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">NO.1</div>
    <div class="div2">NO.2</div>
</body>
</html>

效果如下：
在这里插入图片描述

将行内元素转化为块级元素同理，被转化的行内元素可以设置height与width，且会独占一整行
比如：给被转化的< span >设置height与width

<!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>
    <style>
        .span1{
            display: block;
            height: 80px;
            width: 200px;
            background-color:cadetblue;
        }
        .span2{
            display: block;
            height: 80px;
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <span class="span1">NO.1</span>
    <span class="span2">NO.2</span>
</body>
</html>

效果如下：
在这里插入图片描述

总结

认识标准文档流对web页面的搭建有着重要的作用，理清标准文档流的概念与特性，块级元素与行内元素的特点就可以了

Huang_WeiHong

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS标准文档流简介

标准文档流简介概念文档流通俗的讲，就是一个web页面中，每一个模块只能从上到下从左往右的方式排列在页面上特性（1）空白折叠现象无论多少个空格、换行或Tab都会折叠为一个空格例如：<img src = "C:\Test.png"> <img src = "C:\Test.png">效果如下<img src = "C:\Test.png"> <img src = "C:\Test.png
复制链接

扫一扫

专栏目录