"前端面试题第一套解析(1).md"
本文档主要涵盖了前端面试中的一些常见问题及其解答,涉及到了CSS布局、选择器优先级、单位使用、页面渲染原理以及Flexbox布局等多个核心知识点。
1. 盒子塌陷及解决方式
盒子塌陷通常发生在浮动元素导致父元素失去高度,或者嵌套盒子中子元素的外边距影响父元素的位置。解决方法包括清除浮动、给父元素设定高度、使用`overflow:hidden`等。
2. 不定宽高的div水平垂直居中
使用绝对定位,将父元素设置为相对定位,然后将子元素的`top`和`left`属性设置为50%,并利用`transform`的`translate`函数将元素向自身中心移动,实现居中效果。
3. CSS创建三角形
利用边框塌陷特性,通过设置不同边框宽度,只显示一个边框颜色来创建一个三角形。
4. CSS选择器的优先级
优先级顺序:`!important > 行内样式 > id选择器 > 类/属性/伪类选择器 > 伪元素/标签选择器 > 通配符选择器*`。优先级更高的选择器会覆盖优先级较低的选择器。
5. px、em和rem的区别
- `px`是固定单位,表示像素,不会随字体大小改变。
- `em`是相对单位,基于当前元素的字体大小,没有定义时则基于父元素的字体大小。
- `rem`同样是相对单位,但始终基于根元素(HTML)的字体大小。
6. 重绘与重排
- 重排(Reflow):当元素的几何属性(如宽、高)改变,需要重新计算渲染树,影响其他元素的位置和大小。
- 重绘(Repaint):在重排之后,更新屏幕上的视觉表现,仅改变元素外观,不涉及布局。
- 重排会触发重绘,而重绘不一定触发重排。频繁的重排会影响性能,应尽量减少。
7. Flexbox常用容器属性
- `flex-direction`:定义主轴方向,可以是`row`(默认)、`row-reverse`、`column`或`column-reverse`。
- `flex-wrap`:控制是否换行,可选值有`nowrap`(默认,不换行)、`wrap`(换行)和`wrap-reverse`。
- `justify-content`:设置主轴上的对齐方式,包括`flex-start`、`flex-end`、`center`、`space-between`、`space-around`等。
- `align-items`:单行项目在交叉轴上的对齐方式,可选值有`flex-start`、`flex-end`、`center`、`baseline`和`stretch`。
这些面试题和答案展示了前端开发者需要掌握的基础技能,包括布局技巧、CSS选择器应用、页面渲染优化以及响应式设计的关键概念。熟悉这些知识点对于提升前端开发能力至关重要。