CSS 面试题及答案

CSS 面试题及答案

1. 问题：什么是盒模型（Box Model）？

   答案： 盒模型是指在网页布局时，每个元素都被看作一个矩形盒子，包括内容区域、内边距、边框和外边距。这些部分组合在一起构成了元素的盒模型。

2. 问题：请解释 CSS 中的选择器优先级是如何计算的？

   答案： 选择器优先级是根据选择器的特定性进行计算的，特定性由四个部分组成：行内样式、ID 选择器、类选择器和标签选择器。特定性值越高的选择器优先级越高。例如，行内样式的特定性为 1000，ID 选择器为 100，类选择器为 10，标签选择器为 1。

3. 问题：什么是响应式设计（Responsive Design）？

   答案： 响应式设计是一种网页设计方法，使得网站能够适应不同设备和屏幕尺寸，提供最佳的用户体验。通过使用媒体查询、弹性网格布局和图片等技术，网页可以在桌面电脑、平板电脑和手机等设备上呈现出不同的布局和样式。

4. 问题：CSS 中的 Flexbox 是什么，有什么优势？

   答案： Flexbox 是一种用于布局设计的 CSS 模块，通过灵活的盒子模型，可以轻松实现复杂的布局结构。Flexbox 提供了简洁的语法和强大的功能，使得在处理对齐、分布和排序等方面比传统布局更加便捷。

5. 问题：CSS 中如何实现垂直居中？

   答案： 实现垂直居中的方法有多种，其中一种常用的方式是使用 Flexbox 布局。通过设置父元素为 display: flex;，并添加 align-items: center; 属性，可以实现元素在垂直方向上的居中对齐。