Flex弹性布局

一、知识点收获

1. Flex弹性布局 学会使用`display:flex`实现导航栏元素横向排列，掌握`justify-content`、`align-items`控制元素对齐；理解弹性布局相比浮动布局更适合自适应页面，快速完成一维方向上元素排布。

2. 媒体查询 Media Query（响应式核心）理解媒体查询作用：根据浏览器视口宽度，在不同尺寸下加载不同样式； 学会书写宽度断点判断 `@media screen and (宽度条件)`，区分大屏、中屏、小屏三套布局方案； 实现效果：大屏幕展示全部导航按钮；窄屏移动端隐藏导航按钮，展示汉堡菜单图标。

3. 图片自适应方案 掌握响应式图片写法：`width:100%;height:auto;`，让广告大图跟随屏幕宽度自动缩放，保持图片比例不变、不会拉伸变形，是网页banner通用方案。

4. 移动端基础适配 认识视口标签 `<meta name="viewport" content="width=device-width, initial-scale=1.0">` 不加该标签，手机浏览器无法正常识别页面宽度，响应式会失效。

5. 盒模型标准化 使用 `box-sizing: border-box`，元素宽高包含边框与内边距，布局尺寸更好控制，减少样式错位问题。

二、开发思想收获

1. 移动优先/响应式设计思维：网页不再只适配电脑，一套页面兼容手机、平板、电脑多种设备

2. 渐进式布局：屏幕尺寸变化时，自动切换组件显示形式（完整导航 → 收起为菜单）；

3. 结构与样式分离：HTML搭建页面内容结构，CSS负责外观与自适应，代码清晰易于维护。

三、实操能力 能够独立搭建响应式首页，根据效果图设置不同屏幕下的页面表现，通过调整浏览器窗口大小调试页面，完成多尺寸效果图需求。