HTML Iframe 高度与宽度设置基本介绍iframe 标签用于在当前HTML文档中嵌入另一个文档，高度和宽度是控制iframe显示尺寸的重要属性。主要属性基本属性height: 设置iframe的高度（像素或百分比）width: 设置iframe的宽度（像素或百分比）语法使用方法固定像素值百分比值CSS扩展样式可以通过CSS更灵活地控制iframe尺寸：响应式设计技巧保持宽高比功能说明固定尺

CSS3中设置阴影的属性是box-shadow和text-shadow。box-shadow（盒子阴影）h-shadow：水平阴影位置（必需）v-shadow：垂直阴影位置（必需）blur：模糊距离（可选）spread：阴影尺寸（可选）color：阴影颜色（可选）inset：内阴影（可选）属性：box-shadow: h-shadow v-shadow blur spread color inse

CSS阴影效果主要通过box-shadow和text-shadow属性实现。1. box-shadow（盒子阴影）属性语法：参数说明：h-offset：水平阴影位置（必需）v-offset：垂直阴影位置（必需）blur：模糊距离（可选）spread：阴影尺寸（可选）color：阴影颜色（可选）inset：内阴影（可选）示例：2. text-shadow（文字阴影）属性语法：参数说明：h-offse

移动端布局方式推荐：响应式布局（Responsive Design）使用媒体查询（Media Queries）百分比/视口单位（vw/vh）弹性图片（max-width:100%）适合各种屏幕尺寸弹性盒子（Flexbox）一维布局解决方案简单实现元素对齐自动调整项目大小适合组件级布局网格布局（Grid）二维布局系统精确控制行列适合复杂页面结构需要较新浏览器支持流式布局（Fluid Layout）相

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

减少嵌套层级示例: 避免多层嵌套的Flex容器使用flex代替width/height示例: 优先使用flex属性控制尺寸避免频繁重排示例: 批量修改样式使用flex-basis替代固定宽度示例:限制flex-wrap使用示例: 仅在需要换行时使用优化align-items和justify-content示例: 使用一致的对齐方式避免动态修改Flex属性示例: 减少运行时样式变更使用will-ch

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