理解CSS中的文档流与元素布局-优快云博客

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/124084700

文章目录

文档流（normal flow)概念
文档流和元素
- 在文档流中的元素
- 脱离文档流中的元素

文档流（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>