0
点赞
收藏
分享

微信扫一扫

文档流——CSS

dsysama 2022-04-14 阅读 77
css3

文章目录

文档流(normal flow)概念

网页是一个多层的结构,一层摞着一层.
通过CSS可以分别为每一层来设置样式,但是作为用户来讲只能看到最顶上一层。
这些层中,最底下的一层称为文档流,文档流是网页的基础。

文档流和元素

我们所创建的元素默认都是在文档流中进行排列:
对于我们来元素主要有两个状态

  • 在文档流中
  • 不在文档流中(脱离文档流)

在文档流中的元素

在文档流中的元素有以下特点:

  • 块元素
    块元素会在页面中独占一行,自上向下垂直排列
    默认度是父元素的全部(会把父元素撑满)
    默认度是被内容撑开(子元素)
  • 行内元素
    行内元素不会独占页面的一行,只占自身的大小
    行内元素在页面中左向右水平排列,如果一行之中不能容纳下所有的行内元
    则元素会换到第二行继续自左向右排列(书写习惯一致)
    行内元素的默认宽度和高度都是被内容撑开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            width: 100px;
            background-color: pink;
        }
        #box2{
            width: 100px;
            background-color:salmon;
        }
        span{
            background-color: rgb(226, 202, 208);
        }
    </style>
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
    
</body>
</html>

输出:
在这里插入图片描述

脱离文档流中的元素

脱离文档流的情况:
float:https://blog.csdn.net/mantou_riji/article/details/124103109
绝对定位:https://blog.csdn.net/mantou_riji/article/details/124112864

举报

相关推荐

0 条评论