文档流的基本概念

三乐228
0 阅读2分钟

文档流

文档流是网页布局中元素默认的排列规则，决定元素在页面上的显示顺序和占据空间。

文档流有三种排列规则块级元素、行内块级、行内元素。 可以用这三个函数相互转化：display:inline、display:inline-block、display:block

文本流

是文档流的一部分，指字符的读取和输出顺序，通常是从上往下，从左往右 这就导致页面布局是默认从上往下，从左往右排列，呈现一种流式的排列

  • 块级元素：默认占据父容器的一整行，可以设置宽高（块级元素默认拥有行内块）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
     .box1{
            width:100px;
            height:100px;
            background-color:red;
       }
一
        .box2{
            width:100px;
            height:100px;
            background-color:green;
         } 
        </style>
</head>

<body>
      <div class="box1"></div>

    <div class="box2"></div>
</body>
</html>

52114ca00dcef73395e532e625ed065.png 如果想给所有元素加一个边距，可以在style中添加一个*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 5px;
            padding: 5px;
        }/* 将所有元素的外边距和内边距都设置为5像素 */
     .box1{
            width:100px;
            height:100px;
            background-color:red;
       }

        .box2{
            width:100px;
            height:100px;
            background-color:green;
         } 
        </style>
</head>

<body>
      <div class="box1"></div>

    <div class="box2"></div>
</body>
</html>

72d7eb391ec84424f2d75bd6c89bc9d.png

此时可以看得到，明明是两个小小的方块，却不是放在同一行，而是分了一行，就是因为红色方块和绿色方块是两个块级元素

  • 行内元素：可以同一行排列，但不能设置宽高

当我们把上面那一串代码中的两个块设置成行内元素试试看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 5px;
            padding: 5px;
        }/* 将所有元素的外边距和内边距都设置为5像素 */
     .box1{
            width:100px;
            height:100px;
            background-color:red;
            display:inline;
       }

        .box2{
            width:100px;
            height:100px;
            background-color:green;
            display:inline;
         } 
        </style>
</head>

<body>
      <div class="box1"></div>

    <div class="box2"></div>
   <a href="https://www.bilibili.com/">bilibili</a>
</body>
</html>

89e3b59b3a794c3358536e017bcf3a6.png

可以看到，明明之前设置了两个方块，就因为把他们通过display：inline给变成了行内元素，就消失不见了，这是为什么呢？其实并没有消失，只是把他们放在了排在了（0.0）的位置，而且宽高无法被设置，所以看上去就和消失了一样

  • 行内块级：可以同一行排列，也可以设置宽高

把上面那串代码的两个盒子改成行内块级试试看

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       *{
           margin: 5px;
           padding: 5px;
       }/* 将所有元素的外边距和内边距都设置为5像素 */
    .box1{
           width:100px;
           height:100px;
           background-color:red;
           display:inline-block;
      }

       .box2{
           width:100px;
           height:100px;
           background-color:green;
           display:inline-block;
        } 
       </style>
</head>

<body>
     <div class="box1"></div>

   <div class="box2"></div>
  <a href="https://www.bilibili.com/">bilibili</a>
</body>
</html>

afa4ab21a4248fa935a56879bdcc58e.png 此时可以看到，这两个盒子出现了，并且被同一行排列了，所以行内块级兼具了行内元素和块级元素两者的特点

avatar
文章
阅读
粉丝