《前端面试题之 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 边框问题，并确保布局的一致性。

(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);

12、移动端兼容性问题

13、display的属性值及其作用

14、display的block、inline和inline-block的区别