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

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

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

  • 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 相对于根元素<html>的字体大小
vw 相对于视窗宽度的 1%
vh 相对于视窗高度的 1%

选择器优先度

优先级逐级增加：

序号 选择器 权重 示例
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 等。