CSS与HTML5新特性、响应式布局与面试技巧

"面试题相关的IT知识" 面试题涵盖了多个CSS和JavaScript的相关知识点，以下是这些知识点的详细解析： ### CSS 居中方法 1. **margin: 0 auto** - 当元素具有固定宽度时，通过设置左右外边距为自动，可以使其在父容器中水平居中。 2. **父相子绝定位法** - 父元素相对定位，子元素绝对定位，设置top和left为50%，然后使用负的margin值等于子元素宽高的一半，以达到居中目的。要注意计算时包含边框宽度。 3. **转换为行内块元素** - 使用`display: inline-block`，然后配合`text-align: center`可以使元素在父元素中水平居中。 4. **Flexbox布局** - 设置`display: flex`，然后使用`justify-content: center`和`align-items: center`可使元素在主轴和侧轴上都居中。 ### CSS预处理器（Less或Sass）的优势 1. **嵌套规则** - 允许将相关样式嵌套在其他选择器内，提高代码的可读性和组织性。 2. **定义变量** - 可以创建变量存储颜色、尺寸等值，方便代码维护和一致性。 ### 响应式布局方法 1. **Flexbox** - 弹性盒模型可以轻松实现元素在不同屏幕尺寸下的布局调整。 2. **百分比单位** - 根据父元素尺寸变化调整元素大小。 3. **rem单位** - 相对于根元素（html）的字体大小，可用于实现基于字体的响应式设计。 4. **rpx（微信小程序）** - 小程序中的像素单位，根据设备像素比自动缩放，适合移动设备。 5. **@media 媒体查询** - 根据设备特征如屏幕宽度、分辨率等应用不同的CSS规则。 ### CSS Sprite（雪碧图） 雪碧图是一种优化技巧，将多个小图标合并到一张大图中，通过调整`background-position`来显示所需图标。 - **优点**： - 减少HTTP请求，提高页面加载速度。 - 避免因网络问题导致的多图加载不全问题。 - **缺点**： - UI维护困难，修改或添加图标需要重新制作雪碧图。 - 背景定位可能导致计算复杂。 ### CSS3与HTML5新特性 **HTML5新特性**： 1. **语义化标签** - 如`<header>`、`<footer>`、`<section>`等，提高页面结构的可读性和可访问性。 2. **Canvas** - 用于绘制图形和动画。 3. **Video/Audio** - 内建支持视频和音频播放。 4. **地理定位** - 允许获取用户地理位置信息。 5. **Web存储** - 包括localStorage和sessionStorage，用于客户端数据存储。 6. **WebWorkers** - 在后台运行脚本，提高网页性能。 7. **WebSocket** - 实现双向通信的持久连接。 **CSS3新特性**： 1. **复杂选择器** - 支持属性选择器、伪类、伪元素和兄弟选择器等，增强CSS的灵活性。 2. **边框圆角** - `border-radius`允许设置圆角边框。 3. **边框阴影** - `box-shadow`用于添加元素的阴影效果。 4. **渐变** - 支持线性渐变和径向渐变。 5. **转换** - `transform`用于元素的旋转、缩放、平移和倾斜。 6. **过渡** - `transition`实现元素状态改变时的平滑过渡。 7. **弹性盒子** - `display: flex`和`display: grid`提供更强大的布局能力。 8. **媒体查询** - `@media`用于根据设备特征应用不同的样式。 ### rgba()与opacity的区别 - **rgba()** - 用于设置元素背景色的透明度，不影响子元素的透明效果。 - **opacity** - 作用于整个元素及其内容，使得元素和所有子元素都具有相同的透明度。