你了解CSS吗？面试考文档流是怎么回答？
本文以小白视角讨论CSS里面几个重要概念，以百度的一道面试题为背景讲解，包括文档流中行内和块级元素在绘制的时候定位的位置，盒子模型中水平和垂直定位三种方法。收藏等于学会，点赞下次面试必过~
先考对文档流理解
CSS（层叠样式表），文档外观的样式表语言，起到页面“化妆”，提升用户体验的作用。文档流就是css里面重要部分。
文档流（document），通俗来说：页面元素按照HTML代码顺序，从上到下，从左到右进行顺序排列。一般，块级元素会占据新的一行，而行内元素在同一行依次排列，直到无法容纳更多行内元素才会换行，图片元素img特别明显
上图看看：
简单解释：两个div块级元素分别占据一行，span标签下的文字和img下的图片进行同一行依次排布。在这里图片按照像素点进行绘制，但是一行明显不够容纳，会自动换行进行多行绘制，直到全部绘制完成。这时候span标签因为在同一行没有排满（相当栅格里面列不够），于是跟着到图片最末尾那一行。
块级和行内在文档流绘制小结
- 块级元素：从上至下排列，每个元素占据一行，宽度默认为父容器的100%，高度根据内容自动调整，根据内容高度进行调整。常见的块级元素有
<div>、<p>、<h1>至<h6>等。 - 行内元素：从左至右排列，高度和宽度由其内容决定。常见的行内元素包括
<a>、<b>、<span>、<img>、<input>、<select>、<textarea>、<label>、<br>等。
第二是盒子模型
CSS盒子模型是理解页面布局的基础。每个HTML元素都可以当成一个矩形盒子，盒子有内容（content），内边距（padding），边框（border），外边距（margin）四个部分组成
有盒子得定位
每个元素可以相当一个矩形盒子，在考虑位置和大小后，进行精准控制元素位置，主要定位类型：静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。fixed是固定位置，让部分元素不随着页面滚动，类似绝对定位；static默认定位，正常文档进行布局。下面重点讲relative，absolute。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档流</title>
<style>
*{
margin: 0;
padding: 0;
/* 清除默认的内外边距 */
}
#box1 {
margin: 20px;
width: 200px;
height: 200px;
padding: 1px;
border: 1px solid red;
background-color: green;
}
#box2 {
position: relative;
margin: 10px;
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<!-- box1 在box2上面，正常文档流
html 文档流和css结合 样式生效 盒模型
-->
<div id="box1">
</div>
<div id="box2">
box3
</div>
</body>
</html>
下图为绘制结果，调box2相对box1进行定位,relative找最近的祖先元素进行定位
罒ω罒发现掘金图片也是居中处理，正好文末讨论一下文本水平和垂直居中对齐
增加box3框框，看看这时候absolute和relative的不一样
#box3 {
position:absolute;
width:60px;
height: 60px;
background-color: pink;
left: 30px;
top: 30px;
}
// body里面
<div id="box2">
<div id="box3">box3</div>
</div>
当我们将 box3 的定位方式设置为 absolute 时，box3 将相对于最近的已定位（即定位值不是 static 的）祖先元素进行定位。如果找不到这样的祖先元素，那么 box3 将相对于初始包含块（通常是 <body> 元素，坐标原点为 (0,0)）进行定位。
另一方面，当一个元素的定位方式设置为 relative 时，它是相对于自己原本在文档流中的位置进行偏移的。这意味着该元素虽然从原始位置移动了，但它原先占据的空间仍然保留，不影响其他元素在文档流中的位置。通常情况下，我们会使用 left、top、right 和 bottom 属性来指定 relative 元素的具体偏移量。
加料：如何实现水平和垂直居中对齐
1.先上使用flexbox，grid代码
#box2 {//使用flexbox
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
//使用grid
{
display:grid;
place-items:center;
}
2.第三种使用绝对定位和负边距，呼应一下本次主题。可能疑问这个常不常见尼？
使用绝对定位和负边距的方法在实际项目中还是非常常见，特别是需要精确定位和布局时。具体步骤如下：
- 外层容器设置相对定位：将外层容器（如
#box2）设置为相对定位（position: relative;），使其成为内部绝对定位元素的参考点。 - 内部元素设置绝对定位：将内部元素（如
#box3）设置为绝对定位（position: absolute;），并使用top: 50%;和left: 50%;将其左上角移动到父元素的中心。 - 使用
transform调整位置：通过transform: translate(-50%, -50%);将内部元素向左和向上移动自身宽度和高度的 50%，从而实现元素的中心点与父元素中心点对齐。
这种方法不仅简单易用，还能灵活处理嵌套盒子的对齐操作。代码演示：
#box3 {
position:absolute;
width:60px;
height: 60px;
background-color: pink;
left: 30px;
top: 30px;
}
#box3{
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*向上左移动自身的50% */
}
