CSS标准文档流简介

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页面的搭建有着重要的作用,理清标准文档流的概念与特性,块级元素与行内元素的特点就可以了

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值