从零开始前端入门之路 —— VS Code 插件安装 + CSS Reset + Flex 布局

UrbanJazzerati
344 阅读4分钟

作为一个前端初学者，我最近系统地学习了 HTML 与 CSS 的基础知识，并通过配置 VS Code 插件大幅提升开发效率。

一、高效开发：3 个必装的 VS Code 插件

工欲善其事，必先利其器。以下是我在学习过程中发现的 3 个提升效率的神器级插件：

插件作用
Emmet内置于 VS Code，输入 ! + Tab 即可生成完整的 HTML5 模板
Live Server右键“Open with Live Server”，保存代码自动刷新浏览器，无需手动刷新
Auto Rename Tag修改开始标签，结束标签自动同步，避免手动修改出错

📌 使用技巧：
在 .html 文件中输入 ! → 按 Tab 键，瞬间生成：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

二、让页面更美观：引入 Google 字体

我们可以通过以下方式从 Google Fonts 引入美观的字体（如 Poppins）：

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

然后在全局设置字体：

* {
  font-family: "Poppins", sans-serif;
}

💡 提示：推荐使用 <link> 标签引入，性能优于 @import。

三、CSS Reset：清除浏览器默认样式

浏览器会给 h1、p、body 等元素添加默认的 margin 和 padding，导致页面出现“看不见的空白”。我们可以用通配符选择器 * 一键清除：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

🔍 逐行解析：

属性作用
margin: 0; padding: 0;清除所有元素的默认边距
box-sizing: border-box;让 width 包含 padding 和 border，布局更可控
font-family: ...全局设置字体，优先使用 Poppins

✅ 这段代码建议放在每个项目的 style.css 文件最顶部。

四、布局神器：Flex 布局完全指南

🎯 为什么需要 Flex？

在 Flex 出现之前，我们只能用 float、position 等复杂方式布局，代码冗长且不易维护。Flex 布局让一维布局变得简单、灵活、响应式友好。

🧱 核心概念：容器 vs 项目

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
  • 容器（Container） ：.container，设置 display: flex
  • 项目（Items） ：.item，自动成为 flex 项目

⚙️ 容器上的 6 个关键属性

属性说明
flex-direction主轴方向：row（默认）或 column
justify-content主轴对齐：center、space-between 等
align-items交叉轴对齐：center、stretch 等
flex-wrap是否换行：wrap
align-content多行时的对齐方式
gap用于设置项目间距的关键属性，它允许我们在行和列之间创建均匀的间距，而无需使用margin技巧 gap: 20px 10px;/* 第一个值：行间距，第二个值：列间距 */

🔧 项目上的 3 个常用属性

属性说明
flex: 1简写，等价于 flex: 1 1 0%，用于等分布局或填充剩余空间
flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，该项目不会放大。
flex-shrink定义项目的缩小比例，默认为1，意味着如果有过多内容，项目可以缩小自身来适应容器。
flex-basis定义在分配多余空间之前，项目占据主轴空间的基本大小(px/%)，默认值是auto，表示根据其内容自动调整大小。
align-self单个项目覆盖 align-items

🏆 实战案例

✅ 案例 1：水平垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

✅ 一行代码解决“居中难题”！

✅ 案例 2：等分布局（导航栏）

.nav {
  display: flex;
}
.nav .item {
  flex: 1; /* 平分宽度 */
}

✅ 案例 3：圣杯布局（头-内容-尾）

.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.main {
  flex: 1; /* 填充剩余空间 */
}

✅ 案例 4：侧边栏 + 内容区

.sidebar-layout {
  display: flex;
}
.content {
  flex: 1; /* 内容区自适应 */
}

五、占位文本：Lorem Ipsum 是什么？

Lorem ipsum 是设计和排版中常用的虚拟文本，用于填充内容，避免注意力被真实文字干扰。

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..."

📌 VS Code 中使用：输入 lorem + Tab 自动生成；输入 lorem10 生成 10 个词。

六、总结：我的前端学习路径

阶段学习内容
第1步配置 VS Code，掌握 Emmet 快捷键
第2步学会使用 CSS Reset 统一页面起点
第3步掌握 Flex 布局，实现常见页面结构
第4步引入外部字体，提升视觉美感
avatar
文章
阅读
粉丝