Web开发笔记网站示例盒子无法对齐问题求助

1. 标题 #

用#号表示，数量对应标题级别：

二级标题 #

三级标题 #

2. 列表项 #

用短横线-开头，支持嵌套：

• Web开发学习笔记
  • HTML核心标签
  • CSS布局技巧
• 项目实战记录
  • 响应式页面开发
  • 交互逻辑实现

3. 文本强调 #

用*包裹文本实现强调：
学习Web布局时，CSS盒模型是基础中的基础，Flex布局则是解决对齐问题的高效方案。

4. 代码/命令 #

单行代码用单反引号`包裹，多行代码用三个反引号包裹并指定语言：
单行命令示例：npm install styled-components
多行代码示例：

.code-example, .site-example {
  width: 50%;
  padding: 1.5rem;
  box-sizing: border-box;
}

5. 引用文本 #

用>开头标记引用内容：

当元素设置box-sizing: border-box时，内边距和边框会被纳入元素的宽高计算，这是解决盒子错位的关键之一。

6. 链接 #

格式为[链接文本](链接地址)：
查看Flex布局官方指南获取详细用法。

7. 图片 #

格式为[图片描述](图片地址)：