《前端面试题之 CSS篇（第一集）》

1、CSS的盒模型
2、CSS选择器及其优先级
3、隐藏元素的方法有那些
4、px、em、rem的区别及使用场景
5、重排、重绘有什么区别
6、水平垂直居中的实现
7、CSS中可继承与不可继承属性有哪些
[8、Sass、Less 是什么？为什么要使用他们？](#8、Sass、Less 是什么？为什么要使用他们？)
9、CSS预处理器/后处理器是什么？为什么要使用它们？
10、CSS3新特性
11、rem是如何做适配的
12、移动端兼容性问题
13、display的属性值及其作用
14、display的block、inline和inline-block的区别

1、CSS的盒模型

2、CSS选择器及其优先级

对于选择器的优先级：
内联样式：1000
id 选择器：100
类选择器、伪类选择器、属性选择器：10
标签选择器、伪元素选择器：1
注意事项：

!important声明的样式的优先级最高；

如果优先级相同，则最后出现的样式生效；

继承得到的样式的优先级最低；

通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；

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

3、隐藏元素的方法有那些

4、px、em、rem的区别及使用场景

5、重排、重绘有什么区别

6、水平垂直居中的实现

7、CSS中可继承与不可继承属性有哪些

8、Sass、Less 是什么？为什么要使用他们？

9、CSS预处理器/后处理器是什么？为什么要使用它们？

10、CSS3新特性

11、rem是如何做适配的

主要功能是实现响应式布局的适配，确保在不同设备和屏幕宽度下，页面的布局和字体大小能够自适应。通过动态设置 rem单位和检测设备特性，代码可以解决高清屏上的 1px 边框问题，并确保布局的一致性。

javascript 复制代码

(function flexible(window, document) {
  // 首先是一个立即执行函数，执行的时候传入参数window和document
  var docEl = document.documentElement; // 返回文档的root元素，即根元素html
  var dpr = window.devicePixelRatio || 1; // 获取设备的dpr，即当前设置下物理像素与虚拟像素的比值

  // 调整body标签的fontSize
  // 设置默认字体的大小，默认字体的大小继承自body
  function setBodyFontSize() {
    if (document.body) {
      // 如果document.body存在，则直接设置body的字体大小
      document.body.style.fontSize = (12 * dpr) + 'px';
    } else {
      // 如果document.body不存在，则等待DOM加载完成后设置
      document.addEventListener('DOMContentLoaded', setBodyFontSize);
    }
  }
  setBodyFontSize(); // 调用函数设置body的字体大小

  // 设置 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 10; // 计算rem的值，将viewportWidth分为10份
    docEl.style.fontSize = rem + 'px'; // 设置html元素的字体大小为rem
  }
  setRemUnit(); // 调用函数设置rem单位

  // 在页面resize或者pageshow时重新设置rem
  window.addEventListener('resize', setRemUnit); // 窗口大小变化时重新设置rem
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) { // 某些浏览器，重新展示页面时，走的是页面展示缓存
      setRemUnit(); // 重新设置rem单位
    }
  });

  // 检测0.5px的支持，支持则root元素的class有hairlines
  // 解决1px在高清屏多像素问题
  if (dpr >= 2) { // 如果设备像素比大于等于2
    var fakeBody = document.createElement('body'); // 创建一个虚拟的body元素
    var testElement = document.createElement('div'); // 创建一个测试元素
    testElement.style.border = '.5px solid transparent'; // 设置测试元素的边框为0.5px
    fakeBody.appendChild(testElement); // 将测试元素添加到虚拟body中
    docEl.appendChild(fakeBody); // 将虚拟body添加到文档中
    if (testElement.offsetHeight === 1) { // 检测测试元素的高度是否为1
      docEl.classList.add('hairlines'); // 如果支持0.5px，则为html元素添加hairlines类
    }
    docEl.removeChild(fakeBody); // 移除虚拟body
  }
})(window, document);