文档流

2024-11-27

文档流

CSS文档流（Normal Flow）是指在CSS布局中，元素按照其在HTML文档中出现的顺序，从上到下、从左到右排列的自然布局方式。

块级元素：

• 通常独占一行，宽度默认填满父容器
• 典型块级元素包括<div>​、<p>​、<h1>​至<h6>​、<ul>​、<ol>​、<li>​、<header>​、<footer>​等
• 块级元素的宽度可以通过width和margin属性进行控制

内联元素：

• 与其他元素在一行内显示，不独占一行
• 典型内联元素包括<span>​、<a>​、<img>​、<strong>​、<em>​等
• 内联元素的宽度由内容决定，高度由行高决定。

内联块级元素：

• 既有内联元素的特性，又有块级元素的特性
• 典型内联块级元素包括<input>​、<button>​等
• 可以设置宽度和高度，同时也可以与其他元素并排显示

浮动元素：

• 通过float属性（如float: left;​或float: right;​）使元素浮动，从而允许其他元素围绕它排列
• 浮动元素会脱离文档流，因此不占据原本的空间

定位元素：

• 通过position属性（如position: absolute;​、position: relative;​、position: fixed;​、position: sticky;​）可以改变元素的定位方式
• 定位元素也会脱离文档流，除非使用position: relative;

格式化上下文：

• BFC和IFC
• 定义了元素如何对其内部元素进行布局

在文档流中，元素会根据其类型（块级元素或内联元素）和CSS属性（如float、position等）的不同，表现出不同的布局行为。