掌握CSS布局需先理解块级、行内元素特性，通过display切换类型；利用float实现基础两栏布局并注意清除浮动；运用position实现精确定位，如fixed固定按钮；重点掌握Flex布局，使用justify-content、align-items等属性快速构建居中导航等现代页面结构。
刚接触网页开发时，很多人对如何把文字、图片、按钮这些元素整齐地排布在页面上感到困惑。其实，CSS 提供了多种方式来控制页面结构和元素位置。下面从基础出发，一步步带你掌握 CSS 布局的核心方法。
理解网页的基本结构：块级与行内元素
在写布局之前，先要明白 HTML 元素默认的显示类型：
- 块级元素（block）：如 div、p、h1~h6，它们独占一行，能设置宽高，默认从上到下排列。
- 行内元素（inline）：如 span、a、img，它们在一行内依次排列，不能直接设置宽高。
- 行内块元素（inline-block）：结合两者特点，可以同行显示，又能设宽高，适合做横向排列的模块。
通过 display: block;、inline; 或 inline-block; 可以切换元素类型，这是控制布局的第一步。
使用浮动（float）实现简单横向排列
虽然现代布局更多用 Flex 和 Grid，但理解 float 仍有助于了解历史写法和兼容处理。
立即学习“前端免费学习笔记（深入）”；
比如要做一个两栏布局：左侧导航，右侧内容。
内容
CSS 设置如下：
.sidebar {float: left;
width: 200px;
background: #eee;
}
.content {
margin-left: 200px;
background: #f9f9f9;
}
注意：使用 float 后父容器可能塌陷，可用 overflow: hidden; 或添加清除浮动的元素来修复。
掌握定位（position）控制精确位置
CSS 的 position 属性让你能精准控制元素出现在哪里。
- static：默认值，按文档流排列，不受 top/left 影响。
- relative：相对自身原位置偏移，不脱离文档流，适合微调。
- absolute：相对于最近的已定位祖先元素定位，脱离文档流，适合做弹窗、悬浮按钮。
- fixed：相对于浏览器窗口固定，滚动也不动，适合顶部导航或返回按钮。
- sticky：滚动到某位置后变为 fixed，常用于表格表头或侧边栏吸附。
例子：做一个固定在右下角的“回到顶部”按钮
.back-top {position: fixed;
bottom: 20px;
right: 20px;
padding: 10px;
background: #000;
color: #fff;
border-radius: 5px;
}
推荐使用 Flex 布局快速构建现代页面
Flex 是目前最实用的布局方式，尤其适合一维排列（行或列）。
给父容器设置 display: flex; 后，子元素会自动横向排列，并可灵活调整对齐方式。
例如做一个居中的导航栏：
.nav {display: flex;
justify-content: center;
align-items: center;
height: 60px;
background: #333;
}
.nav a {
color: white;
margin: 0 15px;
}
常用属性说明：
- justify-content：控制主轴（默认横向）对齐，如 center、space-between。
- align-items：控制交叉轴（竖向）对齐，如 center、flex-start。
- flex-direction：改为 column 可纵向排列。
基本上就这些。从理解元素类型开始，到使用 float、position 掌握位置控制，最后用 Flex 快速搭建结构，这就是初学者进入 CSS 布局的合理路径。多写几个小页面，比如个人简介、产品卡片列表，动手练一遍，很快就能上手。
