盒子模型：文档流

Komorebi⁼

于 2024-10-10 21:23:20 发布

阅读量213

点赞数 11

文章标签： html 前端 css html5

本文链接：https://blog.csdn.net/2302_81659011/article/details/142829970

版权

1、文档流的概念

HTML网页默认的元素摆放机制

（1）块元素的文档流（自上而下流水线摆放）

代码如下：

<head>
    <style>
    div{
                width: 100px;
                height: 100px;
                background-color: gray;
                border: 2px solid red;
            }
    </style>
   
    
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

运行结果如下：

（2）行内元素的文档流（从左到右流水线摆放）

代码如下：

<head>
    <style>
     img{
            width: 100px;
            height: 100px;
            border: 2px solid red;   
        }
    </style>
   
    
</head>
<body>
    <img src="./背景.jpg" alt="">
</body>
</html>

运行结果如下：

2、缺陷

（1）元素摆放布局非常不灵活，元素间底边对齐，元素间间隙过小

代码如下：

<head>
    <style>
     b{
            width: 100px;
            height: 100px;
            
        }
        img{
            width: 100px;
            height: 100px;
            border: 2px solid red;   
        }
    </style>
   
    
</head>
<body>
    <b>我是加粗文本</b>
    <img src="../图片/背景.jpg" alt="">
</body>
</html>

（2）文本空格折叠

即使有许多个空格，最后网页只会显示一个空格


<head>
    <style>
     img{
            width: 100px;
            height: 100px;
            border: 2px solid red;   
        }
    </style>
   
    
</head>
<body>
    <b>我是加粗文本</b>
    <br>
    <b>我是       加粗文本</b>
</body>
</html>

运行结果如下：