本文档汇总了几个重要的CSS和前端面试常见问题,包括CSS盒模型的理解、选择器优先级、隐藏元素的方法、单位px与rem的区别以及浏览器的重排与重绘概念,以及实现元素水平垂直居中的各种方法。
**1. CSS盒模型**
CSS盒模型是理解HTML元素布局的关键概念。它将元素分为四个部分:内容(content)、内边距(padding)、边框(border)和外边距(margin)。标准盒模型(`box-sizing: content-box`)的计算顺序是`content + padding + border + margin`,而IE盒模型(`box-sizing: border-box`)则是`content + padding + border`,后者有助于避免意外的宽度增加。选择合适的盒模型模式有助于控制元素的实际尺寸和布局。
**2. CSS选择器优先级**
CSS选择器的优先级用于决定元素最终显示的样式。规则的优先级依次为:`!important` > 行内样式(`style`属性) > ID选择器 (`#id`) > 类选择器 (`.`class) > 伪类/属性选择器 (`:pseudo-class`) > 标签选择器 (`element`) > 全局选择器(如`.class + .other`)。了解这个顺序对于确保特定样式生效至关重要。
**3. 隐藏元素**
隐藏元素的方法有四种:`display: none;`使元素完全消失且不占空间;`opacity: 0;`虽然可见但透明度为0,占用空间;`visibility: hidden;`元素不可见但占用空间,类似于隐藏状态;而`position: absolute;`则移除元素并使其相对于最近的定位祖先元素定位,不占用文档流位置。
**4. px与rem单位**
`px`是绝对单位,表示固定像素,适合于确定不变的尺寸。`rem`是相对单位,基于根元素`<html>`的`font-size`,提供了一种响应式的解决方案。例如,设置`html font-size: 62.5%;`意味着1rem等于10px。这种单位在移动端设计时特别有用,因为它可以根据设备视口缩放灵活调整。
**5. 重排与重绘**
重排(回流)是浏览器对元素布局的改变,如改变元素位置或大小时,需要重新计算其几何属性。而重绘仅针对样式变化,如颜色、背景等,不涉及布局。优化这两个过程可以提升页面性能,减少不必要的资源消耗。
**6. 垂直水平居中**
有多种方法实现元素的垂直和水平居中,包括:使用定位和`margin`进行偏移;利用`transform: translate`;应用flex布局的`justify-content`和`align-items`属性;grid布局的`justify-items`和`align-items`;以及table布局的特性。每种方法都有其适用场景,理解并熟练运用这些技术能提高布局的灵活性和响应性。
掌握以上知识点可以帮助面试者展现他们在CSS和前端开发方面的深厚理解和实践经验,是提升求职竞争力的重要方面。