先掌握flex和grid布局核心技巧。flex用于一维排列，通过display: flex、justify-content、align-items和flex-wrap实现灵活排布；grid适用于二维页面结构，用display: grid、grid-template-columns和grid-gap快速划分区域；结合基础样式如字体、颜色、圆角与阴影提升视觉效果，通过小项目实践熟悉布局逻辑。
刚接触CSS布局时，Flex和Grid是绕不开的核心技能。它们让网页排版变得灵活又高效。别被术语吓到，从一个简单项目入手，边做边学最有效。
创建你的第一个Flex容器
Flex布局适合一维排列，比如导航栏、卡片列表或居中元素。想用Flex，先给父元素加上display: flex。
- 写一个包含几个子div的容器，设置display: flex，子元素会自动横向排列
- 用justify-content控制主轴对齐，比如center、space-between
- 用align-items控制交叉轴对齐，比如让内容垂直居中
- 加flex-wrap: wrap允许换行，适合响应式设计
试试做一个三栏布局，中间自适应，两边固定宽度，用flex属性分配空间比例。
用Grid实现二维页面结构
Grid适合整体页面划分，比如头部、侧边栏、主体区域。它像表格一样定义行和列。
立即学习“前端免费学习笔记（深入）”；
- 给外层容器设display: grid，再用grid-template-columns定义列宽，比如1fr 2fr表示等分可用空间
- 用grid-gap设置网格间距，让内容更清爽
- 通过grid-column和grid-row控制单个元素跨几格
- 做一个简单的仪表盘界面，顶部通栏，左侧菜单，右侧多块数据区，用Grid几行代码就能搞定
搭配基础样式提升视觉效果
布局搭好后，加点样式让它更像样。
- 统一字体：设置font-family，推荐系统默认无衬线字体
- 颜色搭配：主色+辅色不超过三种，背景用浅灰（如#f4f4f4）提升可读性
- 加一点圆角：border-radius: 8px让方块更柔和
- 阴影增强层次：box-shadow: 0 2px 5px rgba(0,0,0,0.1)
别忘了设置margin和padding，避免内容贴边。
基本上就这些。选个小项目，比如个人简介页或待办清单，用Flex排组件，用Grid划区域，再套点基础样式。动手几次，布局逻辑自然就熟了。
