HTML-文档流

王十四兄

已于 2023-01-02 14:25:34 修改

阅读量307

点赞数 1

分类专栏： html 文章标签：前端 html javascript web html5

于 2022-11-12 18:38:26 首次发布

本文链接：https://blog.csdn.net/weixin_64933233/article/details/127823665

版权

html 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文介绍了HTML文档流的概念，强调了块级元素和内联元素在文档流中的特点：块级元素占据整行，宽度默认为父元素100%，高度由内容决定；内联元素按行排列，宽度和高度受内容限制。同时讨论了'auto'值对元素宽度的影响。

摘要由CSDN通过智能技术生成

文章目录

文档流

文档流

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div style=" background-color: #bfa; padding-left: 200px;">
      <div style="height: 50px;"></div>
    </div>
    <div style="width: 100px; height: 100px; background-color: #ff0;"></div>
    <span style="background-color: yellowgreen;">我是一个span</span>
    <span style="background-color: yellowgreen;">我是一个span</span>
    <span style="background-color: yellowgreen;">我是一个span</span>
    <span style="background-color: yellowgreen;">我是一个span</span>
    <span style="background-color: yellowgreen;">我是一个span</span>
    <span style="background-color: yellowgreen;">我是一个span</span>
  </body>
</html>

请添加图片描述

1. 说明

文档流处在网页的最底层，他表示的是一个页面中的位置
我们所创建的元素默认都处在文档流中

2. 元素在文档流中的特点

块元素
- 块元素在文档流中会独占一行，块元素会自上向下排列
- 块元素在文档流中的默认宽度是父元素的 100%
- 块元素在文档流中的高度默认被内容撑开
内联元素
- 内联元素在文档流中只占自身的大小，会默认从左向右排列
- 如果一行中不足以容纳所有的内联元素，则会换到下一行，继续自左向右
- 在文档流中内联元素的宽度和高度默认都被内容撑开