css 布局方式
在 CSS 中，有多种布局方式，每种布局方式都有其特点和适用场景，以下是一些常见的 CSS 布局方式：
1. 普通流布局（Normal Flow）
普通流是元素默认的布局方式，元素按照它们在 HTML 文档中出现的先后顺序依次排列。块级元素会独占一行，从上到下垂直排列；内联元素会在一行内从左到右水平排列，直到这一行排满后自动换行。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p {
background-color: lightblue;
}
span {
background-color: lightcoral;
}
</style>
</head>
<body>
<p>这是一个块级元素段落。</p>
<p>这是另一个块级元素段落。</p>
<span>这是一个内联元素。</span>
<span>这是另一个内联元素。</span>
</body>
</html>
2. 浮动布局（Float）
浮动布局通过 float 属性让元素脱离普通流，向左或向右浮动，其他元素会围绕在浮动元素的周围。常用的值有 left、right 和 none（默认值）。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 100px;
height: 100px;
background-color: lightgreen;
float: left;
margin: 10px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
3. 定位布局（Positioning）
定位布局通过 position 属性来控制元素的位置，常用的定位值有：
static：默认值，元素按照普通流进行布局。relative：相对定位，元素相对于其正常位置进行定位，不会脱离文档流。absolute：绝对定位，元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块进行定位，会脱离文档流。fixed：固定定位，元素相对于浏览器窗口进行定位，会脱离文档流。sticky：粘性定位，元素在屏幕范围内时，按照普通流进行布局，当滚动到屏幕范围之外时，会固定在指定的位置。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.parent {
position: relative;
width: 300px;
height: 300px;
background-color: lightgray;
}
.child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
4. 表格布局（Table Layout）
CSS 提供了类似于 HTML 表格的布局方式，可以使用 display 属性值为 table、table-row、table-cell 等来实现。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.table {
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell">单元格 1</div>
<div class="cell">单元格 2</div>
</div>
<div class="row">
<div class="cell">单元格 3</div>
<div class="cell">单元格 4</div>
</div>
</div>
</body>
</html>
5. 弹性布局（Flexbox）
弹性布局是一种一维布局模型，用于为盒状模型提供最大的灵活性。通过设置 display: flex 或 display: inline-flex 可以将元素转换为弹性容器，其直接子元素成为弹性项目。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: lightyellow;
}
.flex-item {
width: 100px;
height: 100px;
background-color: lightcoral;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body>
</html>
6. 网格布局（Grid）
网格布局是一种二维布局模型，用于创建二维网格容器和项目。通过设置 display: grid 或 display: inline-grid 可以将元素转换为网格容器，其直接子元素成为网格项目。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
background-color: lightpink;
}
.grid-item {
background-color: lightseagreen;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
这些布局方式可以单独使用，也可以结合使用，以实现各种复杂的页面布局。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话