CSS常见的面试题及其答案。
1. 请解释CSS盒模型，并说明两种不同类型的盒模型。
- 答案：CSS盒模型描述了元素在页面布局中的表现方式。它由内容(content)、内边距(padding)、边框(border)和外边距(margin)四部分组成。
- 标准盒模型(W3C盒模型)：宽度和高度只包括内容区域，不计算内边距和边框。
- IE盒模型(怪异盒模型)：宽度和高度同时包括内容、内边距和边框。
2. box-sizing属性有什么作用？
- 答案：box-sizing属性用来控制元素的盒子模型的解析模式。默认为content-box（标准盒模型），若设置为border-box，则元素的宽度和高度会包括内容、内边距和边框。
3. CSS选择器有哪些？并说明其优先级规则。
- 答案：CSS选择器包括：
- 元素选择器（如div、p）
- 类选择器（如.myClass）
- ID选择器（如#myId）
- 属性选择器（如[type="text"]）
- 伪类选择器（如:hover）
- 伪元素选择器（如::before）
- 组合选择器（如后代选择器A B、子代选择器A > B等）
4. 请简述Flexbox布局及其主要特性。
- 答案：Flexbox（Flexible Box）是一种现代布局模式，用于处理一维（行或列）布局，尤其适用于复杂、响应式的布局。主要特性包括：
- 灵活的对齐与方向
- 自动填充与拉伸
- 排序与顺序
- 包裹与换行
5. 请解释CSS Grid布局及其应用场景。
- 答案：CSS Grid是二维布局系统，能够创建复杂的、响应式的网页布局。应用场景包括但不限于：多栏布局、复杂网格布局、响应式设计、卡片布局等。
6. 什么是CSS选择器的特异性（Specificity）？
- 答案：CSS特异性是指浏览器确定应用哪个CSS声明的算法，当多个选择器匹配同一个元素且有冲突的样式声明时，特异性较高的选择器将胜出。特异性由四个部分组成：行内样式、ID选择器、类选择器、标签选择器。
7. CSS3新增了哪些伪类选择器？
- 答案：CSS3新增的伪类选择器包括：
:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child()、:enabled、:disabled、:checked等。
8. display属性有哪些常用的值？分别说明它们的作用。
- 答案：display属性的常用值包括：
none：隐藏元素，不占据空间。block：将元素显示为块级元素，占据整行。inline：将元素显示为内联元素，不占据整行。inline-block：将元素显示为内联块级元素，既具有内联元素的特性又具有块级元素的特性。flex：将元素设置为Flex容器，其子元素将作为Flex项目。grid：将元素设置为Grid容器，其子元素将作为Grid项目。
9. position属性有哪些值？分别说明它们的作用。
- 答案：position属性的值包括：
static：默认值，元素按照正常文档流进行排列。relative：不脱离文档流，相对于其正常位置进行定位。absolute：脱离文档流，相对于其最近的已定位（非static）祖先元素进行定位。fixed：脱离文档流，相对于浏览器窗口进行定位。sticky：根据用户的滚动位置在relative和fixed定位之间切换。
10. 请解释CSS中的响应式设计。
- 答案：响应式设计是一种网页设计方法，使得网站能够适应不同设备和屏幕尺寸，提供最佳的用户体验。通过使用媒体查询、弹性网格布局和图片等技术，网页可以在桌面电脑、平板电脑和手机等设备上呈现出不同的布局和样式。
11. 如何实现CSS中的垂直居中？
1. 使用Flexbox
Flexbox是CSS3中引入的一种布局模式，它提供了一种更加高效的方式来布局、对齐和分配容器中项目的空间，即使它们的大小未知或是动态变化的。
css
.container { | |
display: flex; | |
align-items: center; /* 垂直居中 */ | |
justify-content: center; /* 水平居中 */ | |
height: 100vh; /* 容器高度设置为视窗高度 */ | |
} | |
.child { | |
/* child样式 */ | |
} |
2. 使用Grid
CSS Grid布局是另一种强大的布局系统，它允许我们在两个维度上对元素进行布局。
css
.container { | |
display: grid; | |
place-items: center; /* 同时实现水平和垂直居中 */ | |
height: 100vh; /* 容器高度设置为视窗高度 */ | |
} | |
.child { | |
/* child样式 */ | |
} |
3. 绝对定位与transform
如果你不能使用Flexbox或Grid，你可以使用绝对定位结合transform属性来实现垂直居中。
css
.container { | |
position: relative; | |
height: 100vh; /* 容器高度设置为视窗高度 */ | |
} | |
.child { | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%); /* 向上移动自身高度的50% */ | |
left: 0; /* 根据需要调整水平位置 */ | |
right: 0; /* 根据需要调整水平位置，配合margin: 0 auto实现水平居中 */ | |
width: max-content; /* 根据内容调整宽度 */ | |
/* 其他样式 */ | |
} |
4. 垂直对齐的表格单元格
虽然这种方法不太常用，但在某些旧式布局中可能会看到。
css
.container { | |
display: table; | |
height: 100vh; /* 容器高度设置为视窗高度 */ | |
width: 100%; /* 容器宽度 */ | |
} | |
.child { | |
display: table-cell; | |
vertical-align: middle; /* 垂直居中 */ | |
text-align: center; /* 水平居中（如果需要） */ | |
} |
5. 使用margin: auto
在Flexbox或Grid中，你也可以通过给子元素设置margin: auto;（或margin-top: auto; margin-bottom: auto;对于非Flex/Grid容器）来实现垂直居中，但这通常与align-items或justify-content等属性结合使用。
css
/* Flexbox 示例 */ | |
.container { | |
display: flex; | |
height: 100vh; | |
} | |
.child { | |
margin: auto; /* 水平和垂直居中 */ | |
} | |
/* Grid 示例（类似） */ | |
.container { | |
display: grid; | |
place-items: center; /* 简化版，同时设置水平和垂直居中 */ | |
height: 100vh; | |
} | |
.child { | |
/* margin: auto; 在这里不是必需的，因为place-items已经处理了居中 */ | |
} |
