css常见问题总结，阿里、百度、美团、携程、蚂蚁面经分享

由于提问中包含了很多不同公司的面试题，每个公司可能会有不同的面试题，因此我无法一一列举。但我可以提供一些通用的CSS问题，这些问题在各大公司的面试中可能会被问到。

1. CSS盒模型

   • 标准盒模型（W3C标准）：元素的宽度 = 内容宽度 + padding + border + margin
   • IE盒模型（怪异模式）：元素的宽度 = 内容宽度 + margin

2. CSS选择器

   • 标签选择器（元素选择器）
   • 类选择器
   • ID选择器
   • 通配选择器
   • 子选择器
   • 后代选择器
   • 相邻选择器
   • 伪类选择器
   • 属性选择器

3. CSS的优先级

   • 内联样式 > 内部样式表 > 外部样式表
   • ID选择器 > 类选择器 > 标签选择器
   • 相邻选择器（+）> 子选择器（>）> 后代选择器（空格）
   • 伪类选择器（如:hover）> 标签选择器

4. CSS布局

   • 静态布局（标准流）
   • 浮动布局（float）
   • 定位布局（position）
   • 弹性布局（Flexbox）
   • 网格布局（Grid）

5. CSS盒子模型、BFC、IFC

   • 盒子模型：content、padding、border、margin
   • BFC（Block Formatting Context）：解决外边距塌陷问题
   • IFC（Inline Formatting Context）：解决行内元素的布局问题

6. CSS的Hack

   • 浏览器特定的样式
   • 条件注释Hack（只适用于IE）

7. CSS的Filter效果

   • 模糊效果（blur()）
   • 灰度效果（grayscale()）
   • sepia效果（sepia()）
   • 饱和度效果（saturate()）
   • 对比度效果（contrast()）
   • 亮度效果（brightness()）
   • 反色效果（invert()）
   • 饱和度效果（hue-rotate()）

8. CSS动画和变换

   • 使用transition实现平滑的过渡效果
   • 使用animation实现复杂的动画序列
   • 使用transform实现2D或3D变换

9. CSS清除浮动

   • 使用额外标签法（在最后一个浮动元素后添加一个空的标签，设置样式为clear: both）
   • 使用伪元素清除法（在父元素上添加一个伪元素，设置样式为clear: both）
   • 使用父元素的overflow属性为auto或hidden（不推荐，可能会造成不需要的滚动条出现）

10. CSS优化

    • 减少HTTP请求数（合并文件、图片 sprites）
    • 使用内容分发网络（CDN）
    • 添加缓存控制（如Cache-Control、Expires）
    • 代码压缩（去除空格、换行、注释）
    • 使用CSS预处理器（如Sass、Less）
    • 优化CSS选择器

每个问题都可以展开讨论很多，以上只是一些基本的概览。在实际面试中，可能还会问到更具体的技术问题，如响应式布局、CSS3新特性、跨浏览器兼容性等。