前端面试css
时间: 2025-05-31 10:46:42 浏览: 23
### 前端面试中常见的CSS问题及解答
#### 1. 如何实现单行文本溢出显示省略号?
可以通过设置 `white-space` 属性为 `nowrap`,并配合 `overflow: hidden` 和 `text-overflow: ellipsis` 实现单行文本溢出时自动加上省略号的效果[^1]。
```css
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
```
#### 2. CSS样式的优先级是如何计算的?
CSS样式的优先级由选择器的具体程度决定。具体来说,内联样式具有最高优先级,其次是ID选择器,接着是类选择器、属性选择器以及伪类,最后是标签选择器和伪元素[^1]。如果存在冲突,则按照权重较高的规则应用样式;若权重相同,则遵循后定义覆盖先定义的原则。
#### 3. 使用Flexbox布局时如何让子项水平居中对齐?
通过给父容器添加 `display: flex; justify-content: center; align-items: center;` 可以使子项在水平方向和垂直方向都居中对齐[^3]。
```css
.container {
display: flex;
justify-content: center;
align-items: center;
}
```
#### 4. 解释BFC(Block Formatting Context)的概念及其应用场景。
BFC是一种网页HTML文档的渲染方式,在这种模式下,盒子会根据一系列特定规则进行排列。创建新的BFC可以解决浮动塌陷等问题。通常情况下,根元素、float值不为none的元素、position绝对定位或者相对定位且z-index非auto的元素都可以触发一个新的BFC环境[^3]。
#### 5. 清除浮动有哪些方法?
清除浮动的方法主要包括:
- 给父级元素添加clearfix hack;
- 设置父级元素的 `overflow` 属性为 `hidden` 或者其他非visible值;
- 利用`:after`伪元素来插入空白内容作为清浮工具[^1]。
```css
.clearfix::after {
content: "";
display: table;
clear: both;
}
```
---
阅读全文
相关推荐




















