HTML 有序列表（Ordered List）标签：ol：定义有序列表li：定义列表项用法：用于显示按顺序排列的项目默认使用数字编号（1, 2, 3...）实例：功能：自动编号支持嵌套列表可通过type属性改变编号样式CSS扩展：属性扩展：start：设置起始编号（如start="5"）reversed：倒序编号（HTML5新增）type：编号类型（1, A,

HTML无序列表（Unordered List）详细介绍：用于展示一组没有特定顺序的项目默认每个列表项前显示实心圆点（bullet point）是HTML中常用的列表类型之一主要标签：- 定义无序列表容器- 定义列表项（list item）list-style-type: 改变项目符号样式（disc|circle|square|none）list-style-image: 使用自定义图片作为项目符

HTML 列表详细介绍HTML 列表用于在网页上展示有序或无序的项目集合。主要有三种类型：无序列表、有序列表和定义列表。标签无序列表ul - 定义无序列表li - 定义列表项有序列表ol - 定义有序列表li - 定义列表项定义列表dl - 定义定义列表dt - 定义术语/名称dd - 定义描述用法无序列表用于没有特定顺序的项目集合有序列表用于有顺序或编号的项目集合定义列表用于术语及其定义的展示实

基本概念Flex布局（弹性盒子布局）是一种CSS3布局模式，用于创建灵活的响应式布局结构。核心属性容器属性display: flex; - 定义Flex容器flex-direction: - 主轴方向row (默认)row-reversecolumncolumn-reverseflex-wrap: - 换行方式nowrap (默认)wrapwrap-reversejustify-content:

基本概念Flex布局（弹性盒子）是一种CSS布局模式，用于在容器内分配空间和对齐项目。导航栏实现步骤HTML结构CSS样式关键属性说明容器属性：display: flex：定义flex容器flex-direction：主轴方向（row/column）justify-content：主轴对齐方式align-items：交叉轴对齐方式项目属性：flex-grow：放大比例flex-shrink：缩小比

减少嵌套层级示例：避免多层flex容器嵌套使用flex-wrap合理换行示例：移动端适配时自动换行合理使用flex-grow示例：分配剩余空间避免不必要的重排示例：固定尺寸项目使用order属性优化DOM顺序示例：移动端优先显示重要内容利用align-self减少额外容器示例：单独对齐某个项目预定义flex-basis示例：避免布局抖动使用gap属性替代margin示例：统一间距控制

检查容器和项目属性确保父元素设置 display: flex检查 flex-direction (默认row)检查 flex-wrap (默认nowrap)常用调试工具浏览器开发者工具使用边框高亮：* { border: 1px solid red; }常见问题示例关键属性调试justify-content (主轴对齐)align-items (交叉轴对齐)flex-grow/shrink/bas

flex-wrap 控制 flex 容器内项目的换行行为。属性值：nowrap（默认）：不换行，所有项目排在一行。wrap：项目按需换行，从上到下排列。wrap-reverse：项目按需换行，从下到上排列。示例：用法：nowrap所有项目挤在一行，可能溢出容器。效果：三个 100px 宽的项目挤在 200px 容器内，溢出。wrap项目自动换行，避免溢出。效果：前两项目在第一行，第三项目换到第二行

Flexbox布局常见误区混淆主轴和交叉轴方向误区：认为flex-direction只改变主轴方向正确：同时影响交叉轴方向（主轴为column时，交叉轴变为水平方向）错误理解flex-grow误区：认为flex-grow按比例分配所有空间正确：只分配剩余空间（基础尺寸由flex-basis或内容决定后）默认对齐方式误解误区：项目默认在容器中居中正确：默认align-items: stretch（交