百度面试题之文档流首先我们来介绍介绍块级元素与行内元素在HTML和CSS中，元素被分为块级元素（block-level

首先我们来介绍介绍块级元素与行内元素

在HTML和CSS中，元素被分为块级元素（block-level elements）和行内元素（inline elements）。这两种元素类型在布局和样式上有很大的不同。

块级元素：
- 块级元素会生成一个块级盒子（block-level box），占据其父元素的全部宽度，即使它们本身可能并不需要这么多。例如，<div>、<p>、<h1>到<h6>、<form>、<header>、<footer>、<section>等都是块级元素。
- 块级元素会在内容前后都生成“换行”，也就是说，块级元素会占据一行，除非特意使用CSS的display属性将其设为其他类型。
- 默认情况下，块级元素的高度、宽度、边距、填充和边框都可以设置。
行内元素：
- 行内元素不会生成块级盒子，而是生成一个行内盒子（inline box），它们只占据内容所需要的宽度。例如，<span>、<a>、<img>、<button>、<input>等都是行内元素。
- 行内元素不会在其内容前后产生“换行”，也就是说，它们可以在一行中与其他元素并排显示。
- 默认情况下，行内元素不能设置宽度和高度，也不能设置外边距（margin），但可以设置内边距（padding）和边框（border）。

这两种元素类型在网页布局和样式设计中都非常重要，它们提供了不同的布局和样式选项，可以创建出各种复杂的网页布局和效果。
我们来看看他们怎么在网页布局的

块级元素：

宽度和高度：块级元素的宽度默认会占据其父元素的全部宽度，除非设置了特定的宽度值。同样，块级元素的高度可以根据内容或设置的高度值来确定。
宽度和高度设置：你可以通过CSS的width和height属性来设置块级元素的宽度和高度。例如，width: 50%;会将块级元素的宽度设置为父元素宽度的50%。
边距和填充：块级元素可以设置外边距（margin）和内边距（padding），这些属性可以用来调整元素之间的间距和元素内部的空白。

行内元素：

宽度和高度：默认情况下，行内元素的宽度和高度是由其内容决定的，而不是由CSS设置的。行内元素无法设置宽度和高度，除非将display属性设置为inline-block或block。
宽度和高度设置：如果将行内元素的display属性设置为inline-block，则可以通过CSS的width和height属性来设置其宽度和高度。但是，需要注意的是，这可能会导致行内元素之间的间距出现问题，因为行内元素通常会考虑内容宽度和默认的间距。
边距和填充：行内元素可以设置内边距（padding），但默认情况下，无法设置外边距（margin）。如果需要将行内元素的外边距生效，可以将其display属性设置为inline-block或block。

总的来说，块级元素和行内元素在宽度和高度上的处理方式有很大的不同。块级元素可以自由地设置宽度和高度，而行内元素则需要通过调整display属性或其他技术来实现类似的效果。值得注意的是，通过CSS的display属性，可以改变元素的显示类型，例如，可以将块级元素设为行内元素，或将行内元素设为块级元素。

我们来看看一段代码-

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>


<div style="border: 1px solid black;">div1 </div>
<div style="border: 1px solid red;">div2 </div>
<span style="border: 1px solid blue;">这是一张图片 </span>
<img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/2b14c533a43a46e591cf2a8ec876b7a6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Y-k6JOs6I6x5o6M566h546J57Gz55qE56We:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMjY1NDYzNDc0ODk1ODI2NyJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1732717526&x-orig-sign=d3f8ZqHCGoV1e9%2B5gKfOmF6iMfU%3D">

我们来看看在浏览器的效果

我们发现div标签与span标签，img标签都是在代码中按照顺序排版的，浏览器的显示明显是两个div占据浏览器一整行，span标签与img标签占据一行的两块，现在我们引入文档流的概念：

文档流（Document Flow）是网页布局的一种基本机制，它决定了网页元素如何排列和定位。文档流中的元素默认按照其在HTML代码中的顺序，从上到下，从左到右进行排列。每个元素都占据其在文档流中应得的空间，并尽可能地向右或向下延伸。

在示例HTML代码中，有4个元素：两个<div>元素、一个<span>元素和一个<img>元素。这些元素都遵循文档流规则进行布局。

两个<div>元素（一个黑色边框，一个红色边框）是块级元素，它们各自占据一行，并垂直排列。因为<div>元素是块级元素，它们会占用其包含块（即父元素，在这里是<body>元素）的全部宽度，除非你设置了特定的宽度。
<span>元素（带有蓝色边框）是行内元素，它不会独占一行，而是与其他文本或行内元素并排显示。因此，它紧接在“div2”文本之后出现，并且其高度和宽度只由其内容决定。
<img>元素是行内块元素<img>元素是行内块元素，但它在布局上通常表现得像块级元素，因为它可以设置宽度和高度，而且通常会独占一行。但在某些情况下，它可能不会独占一行，这取决于其他元素、CSS样式和容器的大，。这个图片元素会独占一行，其大小由你提供的URL中的图片决定。

整个文档的布局会按照这些元素在HTML代码中的顺序进行，这就是文档流的基本原理。当元素的大小和位置受到CSS样式的影响时，它们仍然遵循文档流的规则，只是具体的排列和定位方式可能会改变。

需要注意的是，有些CSS属性，如position、float和display，可以改变元素在文档流中的默认行为。例如，使用position: absolute;或position: fixed;会将元素从文档流中移除，使其位置相对于最近的定位祖先元素（而不是其他元素）来确定。使用float: left;或float: right;会使元素浮动在文档流中，使其与其他元素并排显示。

现在我们进入正题

position的属性和原理

position是CSS中的一个属性，用于控制元素的定位方式。它可以有以下几个值：

static：这是默认值，元素按照正常的文档流进行定位。top、right、bottom、left和z-index属性将无效。
relative：元素相对于其正常位置进行定位，然后根据top、right、bottom、left属性的值进行偏移。其他元素的位置不会调整以填补该元素留下的空间。
absolute：元素相对于最近的已定位祖先元素（而不是正常的文档流）进行定位。如果没有已定位的祖先元素，那么它会相对于初始包含块进行定位。元素的位置通过top、right、bottom、left属性进行规定。元素的定位不会受到其他元素的影响，也不会影响其他元素的布局。
fixed：元素相对于浏览器窗口进行定位，即使页面滚动，它也会停留在相同的位置。元素的位置通过top、right、bottom、left属性进行规定。
sticky：元素在滚动到某位置之前根据相对定位定位，然后根据固定定位定位。这是一个混合类型，它基于用户的滚动位置来改变元素的定位。

z-index属性与position属性一起使用，用于控制元素的堆叠顺序（哪个元素应该位于其他元素的前面或后面）。只有当元素的position属性为relative、absolute、fixed或sticky时，z-index属性才会生效。

我们来看看这段代码你能更加了解position属性

我是一个相对定位的容器

我是绝对定位的元素，相对于上面的容器进行定位。

  <div style="height: 2000px;">
    <div style="position: fixed; top: 0%; right: 0%; background-color: lightgreen;">
      我是一个固定定位的元素，无论页面如何滚动，我都会保持在屏幕的右上角。
    </div>
    <p>Scroll down to see the content...</p>
  </div>

  <div style="height: 1000px; overflow-y: scroll;">
    <div style="position: sticky; top: 0; background-color: lightgreen;">
      我是一个粘性定位的元素，当我滚动到页面顶部时，我会固定在顶部。
    </div>
    <p>Scroll down to see the effect...</p>
    <!-- More content here -->
  </div>

  <div style="position: relative; width: 50%; height: 200px; border: 1px solid black;">
    我是一个相对定位的容器--------------------------------------------------------------------
    <div style="position: relative; bottom: 100px;width: 50%;height: 100%;background-color: lightgreen;border: 1px,solid red;">
      我是相对定位的元素，相对于我原本的位置进行偏移。
    </div>
  </div>

第一段代码

相对定位的容器：
- position: relative;：这意味着容器相对于其原始位置进行定位。
- width: 300px; height: 300px;：设置容器的宽度和高度。
- border: 1px solid black;：设置容器的边框为1像素的实线，颜色为黑色。
绝对定位的元素：
- position: absolute;：这意味着元素相对于最近的已定位的祖先元素（这里是相对定位的容器）进行定位。
- top: 20px; right: 20px;：设置元素距离容器顶部的距离和距离容器右侧的距离。
- background-color: lightgreen;：设置元素的背景颜色为浅绿色。第二段代码 固定定位的元素：

position: fixed;：这意味着元素相对于浏览器窗口进行定位，而不是其包含块。
top: 0%; right: 0%;：设置元素距离页面顶部的距离和距离页面右侧的距离。
background-color: lightgreen;：设置元素的背景颜色为浅绿色

第三段代码

粘性定位的元素：
- position: sticky;：这意味着当元素到达视口（即用户可见的部分）的顶部时，它会“粘”在那里，就像固定在顶部一样。
- top: 0;：设置元素距离页面顶部的距离。
- background-color: lightgreen;：设置元素的背景颜色为浅绿色。

第四段代码

相对定位的容器：
- position: relative;：这意味着容器相对于其原始位置进行定位。
- width: 50%; height: 200px;：设置容器的宽度和高度。
- border: 1px solid black;：设置容器的边框为1像素的实线，颜色为黑色。
相对定位的元素：
- position: relative;：这意味着元素相对于其原始位置进行定位。
- bottom: 100px;：设置元素距离容器底部的距离。
- width: 50%; height: 100%;：设置元素的宽度和高度。
- background-color: lightgreen;：设置元素的背景颜色为浅绿色。