HTML bdo 标签（Bi-Directional Override）用于覆盖文本的默认方向，控制文本的显示方向。标签属性dir：必需属性，指定文本方向，值包括：ltr：从左到右（left-to-right）rtl：从右到左（right-to-left）基本用法功能强制改变文本方向，忽略Unicode双向算法。适用于混合方向文本的场景。CSS扩展可以通过CSS进一步控制样式：注意事项主要用于特殊

Flex布局与Grid布局的对比1. 核心概念Flex布局：一维布局模型，用于处理行或列方向的布局。Grid布局：二维布局模型，可同时处理行和列方向的布局。2. 主要用途Flex布局：适合组件内部排列（如导航栏、卡片内容）。Grid布局：适合整体页面结构（如网格系统、复杂布局）。3. 示例与用法Flex布局示例关键属性：flex-direction：控制主轴方向（row/column）。flex-

align-self: auto作用：继承父容器的 align-items 值。示例：效果：子项垂直居中（与父容器 align-items 一致）。align-self: stretch作用：拉伸子项以填满交叉轴方向的空间（高度/宽度）。示例：效果：子项高度变为 200px（与父容器等高）。关键区别auto：依赖父容器的 align-items。stretch：强制拉伸，无视父容器设置。适用场景a

justify-content: flex-start 作用：将子元素对齐到容器起始位置（左/上）。示例： 效果：子元素紧贴容器左侧（默认方向）。justify-content: flex-end 作用：将子元素对齐到容器末尾位置（右/下）。示例： 效果：子元素紧贴容器右侧。注意：需配合display: flex使用，方向受flex-direction影响（如column时对齐顶部/底部）。

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