CSS3 flexbox布局与过渡效果：前端面试重点解析

"前端CSS面试20道常见考题，涵盖了CSS3的新特性，如flexbox布局，CSS的盒模型，定位，浮动，过渡效果，优先级，以及性能优化方法等核心概念。" 在CSS3中，flexbox（弹性盒布局模型）是一种用于布局的先进方法，适用于创建响应式和动态的布局。它允许容器内的子元素在一行或一列中灵活地调整大小和排列，以适应不同的屏幕尺寸和方向。适⽤场景包括导航菜单、卡片式布局、响应式设计、以及需要动态调整元素顺序的情况。 CSS的新特性之一是`img`标签的`alt`和`title`属性。`alt`属性提供替代文本，当图片无法显示或用户使用屏幕阅读器时，这个文本将被读出，是图像内容的描述性文字，对SEO（搜索引擎优化）也很重要。而`title`属性则会在鼠标悬停在图片上时显示额外信息，不一定是必要的，但可以提供额外的提示。 创建纯CSS三角形的方法利用了边框塌陷的特性，通过设置一个边框宽度不为零，其他边框透明，可以产生一个指向不同方向的三角形。 CSS盒模型包括content、padding、border和margin四个部分。盒模型决定了元素占用空间的计算方式。`content-box`是W3C标准模型，元素的宽度和高度只包含内容区域；`border-box`是IE的传统模型，宽度和高度包括内容、内边距和边框。 水平居中一个`div`可以使用`margin: auto`，而水平垂直居中则可以通过`display: flex`和`justify-content: center; align-items: center;`在父元素上实现，或者使用绝对定位，配合`transform`属性的`translate(-50%, -50%)`。 浮动是为了实现元素的布局流体性，让元素脱离正常文档流并根据需要向左或向右移动。但浮动会导致父元素高度塌陷，影响同级元素。清除浮动通常有三种方式：使用`clearfix`类，添加`clear:both`，或者使用CSS3的`overflow:auto`或`display:table`。 CSS3的`transition`和`animation`都是实现动态效果，但有区别。`transition`主要用于单个属性的平滑过渡，当属性值改变时生效；而`animation`可以控制更复杂的动画序列，包括时间、速度曲线等。 CSS优先级决定了哪些样式会被应用，`!important`具有最高优先级，然后是行内样式、ID选择器、类选择器、标签选择器、通配符选择器，最后是继承和浏览器默认样式。 雪碧图是一种CSS精灵技术，将多个小图合并成一张大图，通过背景定位显示需要的图像，减少HTTP请求，提高页面加载速度。 `box-sizing`属性控制元素的盒模型解析方式，`content-box`遵循标准盒模型，`border-box`则是IE盒模型。 为了优化CSS性能，可以减少选择器复杂性、合并CSS文件、使用CSS预处理器、避免使用`@import`（因其阻塞页面渲染），以及使用CSS Sprites和适当的定位方法。 `margin`适合在元素之间创建间距，不应用背景色，比如在行内元素之间；`padding`则用于元素内部，增加内容与边框之间的距离，不影响其他元素的布局。