面试过程中遇到的 CSS 问题。

• 如何实现水平，垂直居中？
• 使元素消失的办法有哪些？
• reset 的作用和用途?
• position 有哪些属性值？
• overflow 有哪些属性值？
• CSS 单位
• 选择器优先度
• 伪类和伪元素的区别？常见的有？

如何实现水平，垂直居中？

• 水平垂直居中：flex
• 水平垂直居中：绝对布局
• 水平垂直居中：transform

使元素消失的办法有哪些？

• opacity: 0 元素隐藏起来，但不会改变页面布局，如果元素绑定了事件，能够触发事件
• visibility: hidden 元素隐藏起来，但不会改变页面布局，但是不会触发该元素已经绑定的事件
• display: none 元素隐藏起来，并且会改变页面布局
• z-index: -1

reset 的作用和用途?

reset 重置浏览器的 CSS 默认属性。浏览器的品种不同，样式不同，然后重置，让他们统一。

position 有哪些属性值？

static（默认）, fixed, relative, absolute

overflow 有哪些属性值？

visible（默认）, hidden, scroll, auto

CSS 单位

单位	描述
px	Pixels 像素
em	相对于元素字体大小。但若用于字体大小，则值相对于父元素字体大小
rem	相对于根元素的字体大小
vw	相对于视窗宽度的 1%
vh	相对于视窗高度的 1%

• CSS values and units

选择器优先度

优先级逐级增加：

序号	选择器	权重	示例
1	通用选择器	0	*
2	元素选择器	1	<div></div>
3	类选择器	10	.class
4	属性选择器	10	ele[attr]
5	伪类选择器	10	ele:after
6	ID 选择器	100	#id
7	内联样式	1000	style=""
8	!important	无穷大	color: #f00 !important;

伪类和伪元素的区别？常见的有？

伪类与伪元素的区别：

• 伪类是选择器的一种，它用于选择处于特定状态的元素。
• 伪元素往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。

常见的伪类与伪元素有：

• 伪类的开头为单冒号:。常见的伪类有 :active, :hover，:nth-child 等。
• 伪元素开头为双冒号::。常见的伪元素有 ::after，::before 等。