（四）CSS前端开发面试会问到的问题有哪些？

⭐️ 作者：船长在船上
🚩主页：来访地址船长在船上的博客
🔨 简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！

👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。

上篇文章：

（一）前端开发面试会问到的问题有哪些？

（二）前端开发面试会问到的问题有哪些？

（三）CSS前端开发面试会问到的问题有哪些？

31.position 属性比较

固定定位 fixed：

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定

位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。

相对定位 relative：

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直

或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是

否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute：

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那

么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

粘性定位 sticky：

元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing

block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定

位，之后为固定定位。

默认定位 Static：

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声

明）。

inherit:

规定应该从父元素继承 position 属性的值。

32.浮动清除

方法一：使用带 clear 属性的空元素

在浮动元素后使用一个空元素如

，并在 CSS 中赋

予.clear{clear:both;}属性即可清理浮动。亦可使用
或

来进行清理。

方法二：使用 CSS 的 overflow 属性

给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动，另外在 IE6 中还

需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动

的效果。

方法三：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影

响布局，不推荐使用。

方法四：使用邻接元素处理

什么都不做，给浮动元素后面的元素添加 clear 属性。

方法五：使用 CSS 的:after 伪元素

结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和

IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪元素实

现元素末尾添加一个看不见的块元素（Block element）清理浮动。

33.css3 新特性

CSS3 边框如 border-radius，box-shadow 等；CSS3 背景如 background-size，

background-origin 等；CSS3 2D，3D 转换如 transform 等；CSS3 动画如 animation 等。

34.CSS 选择器有哪些，优先级呢

id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等

同一元素引用了多个样式时，排在后面的样式属性的优先级高；

样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器；

标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了

与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级

比较低，至少比标签选择器的优先级低；

带有!important 标记的样式属性的优先级最高；

样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户

自定义样式 > 浏览器默认样式

35.怎么样让一个元素消失

display:none; visibility:hidden; opacity: 0; 等等

36.css 动画如何实现

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长

以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是

由 @keyframes 规则实现，具体情况参见使用 keyframes 定义动画序列小节部分。

transition 也可实现动画。transition 强调过渡，是元素的一个或多个属性发生变化时产生

的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生

（例如 hover）时才能获取样式，这样就会产生过渡动画。

37.如何实现图片在某个容器中居中的？

父元素固定宽高，利用定位及设置子元素 margin 值为自身的一半。

父元素固定宽高，子元素设置 position: absolute，margin：auto 平均分配 margin

css3 属性 transform。子元素设置 position: absolute; left: 50%; top: 50%;transform:

translate(-50%,-50%);即可。

将父元素设置成 display: table, 子元素设置为单元格 display: table-cell。

弹性布局 display: flex。设置 align-items: center; justify-content: center

38.如何实现元素的垂直居中

法一：父元素 display:flex,align-items:center;

法二：元素绝对定位，top:50%，margin-top：-（高度/2）

法三：高度不确定用 transform：translateY（-50%）

法四：父元素 table 布局，子元素设置 vertical-align:center;

39.CSS3 中对溢出的处理

text-overflow 属性，值为 clip 是修剪文本；

ellipsis 为显示省略符号来表被修剪的文本；

string 为使用给定的字符串来代表被修剪的文本。

40.隐藏页面中某个元素的方法

display:none; visibility:hidden; opacity: 0; position 移到外部，z-index 涂层遮盖等等