Aybuai
Aybuai

2024 前端高频面试题之 HTML/CSS 篇

【前言】随着市场的逐渐恶劣，通过总结面试题的方式来帮助更多的coder，也是记录自己的学习过程，温故而知新。欢迎各位同胞大大点评补充~

前端面试题之 HTML/CSS 篇

    • 1、HTML 语义化？
    • 2、块级元素&内联样式
    • 3、盒子模型的理解？怪异和标准怎么切换？
    • 4、重排（回流）和重绘的区别？
    • 5、伪类和伪元素的区别？
    • 6、css 样式隔离方案？
    • 7、vue scoped 能做样式隔离的原理？
    • 8、css 优先级是怎样计算的？
    • 9、BFC 是什么？
    • 10、position 有哪些值？分别是干嘛的？
    • 11、flex：1 代表什么？
    • 12、css 画三角形？
    • 13、手写代码单行文本，多行文本字数过多显示...？
    • 14、css 怎么画 0.5px 的线？
    • 15、css3 怎么开启 GPU 加速？（css3 怎么开启硬件加速？）
    • 16、css 性能优化？
    • 17、垂直水平居中布局方案？行内元素垂直居中？
    • 18、怎么使元素隐藏？分别说出对 dom 树的影响和是否响应绑定事件？
    • 19、css 动画有哪些？怎么实现？
    • 20、transition 属性是什么？transition 和 animation 的区别？
    • 21、rem 和 em 的区别？移动端适配怎么做？（三种）
    • 22、浏览器会累计很多次再重新渲染机制（队列机制），怎么打破这个机制？（浏览器刷新渲染是一种队列排队机制，怎样才能立即重新渲染更新，告诉浏览器要立即拿到计算结果？）
    • 23、如何清除浮动？如何解决父元素高度塌陷？
    • 24、margin-left、margin-top、margin-right、margin-bottom 负值区别？
    • 25、圣杯布局和双飞翼布局的技术总结（考察 float 属性）
    • 26、如何使用 flex 布局实现三点筛子

1、HTML 语义化？

  • 增强代码可读性，方便维护（人）
  • 增强爬虫 SEO（机器）

2、块级元素&内联样式

  • display: block/table；div、h1-h6、table、p 等
  • display: inline/inline-block；span、input、button、img 等

3、盒子模型的理解？怪异和标准怎么切换？

  • 盒模型有两种，分别是标准盒模型和怪异盒模型。盒模型都是由四个部分组成，分别是 margin、border、padding、content。
  • 两种盒模型的区别在于设置宽高不同，标准盒模型：content；怪异盒模型：border、padding 和 content。
  • 通过修改 box-sizing 属性切换，content-box 标准盒模型（默认值）；border-box 怪异盒模型。

4、重排（回流）和重绘的区别？

页面渲染流程：

  • 解析 html 绘制 DOM 树
  • 解析 css 绘制 CSSOM 树
  • 把 DOM 和 CSSOM 组合生成 render 树
  • 基于 render 树布局
  • 绘制到屏幕上

布局这一过程就是重排（回流），绘制到屏幕上就是重绘。页面元素发生形状大小变化就是重排，外观发生变化就是重绘。重排一定会重绘,但是重绘不一定重排。

5、伪类和伪元素的区别？

伪元素：在内容元素前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。仅在外部可见，文档源代码找不到。例如：

p::before { content: '第一章' }
p::after { content: 'hot' }

伪类：将特殊的效果添加到特定的选择器上。它是已有元素添加类别，不会产生新的元素。
例如：

a:hover { color: #FF00FF }

6、css 样式隔离方案？

BEM：是一种 css 命名方法论，意思是块（Block）、元素（Element）、修饰符（Modifier）的简写

CSS Modules：顾名思义，css-modules 将 css 代码模块化，可以避免本模块样式被污染，并且可以很方便的复用 css 代码

CSS in JS：CSS in JS 是 2014 年推出的一种设计模式，它的核心思想是把 CSS 直接写到各自组件中，也就是说用 JS 去写 CSS，而不是单独的样式文件里

预处理器：css 预处理器会增加一些原生 css 不具备的特性，使之更加具有可读性且易于维护。例如：

  • 代码混合
  • 嵌套选择器
  • 继承选择器

常见的预处理器有：sass，less（预处理器：外面嵌套不同，同一文件同一名称可以分别生效）

Shadow DOM：由于子应用的样式作用域仅在 shadow 元素下，那么一旦子应用中出现运行时越界跑到外面构建 DOM 的场景，必定会导致构建出来的 DOM 无法应用子应用的样式的情况。
比如 sub-app 里调用了 antd modal 组件，由于 modal 是动态挂载到 document.body 的，而由于 Shadow DOM 的特性 antd 的样式只会在 shadow 这个作用域下生效，结果就是弹出框无法应用到 antd 的样式。解决的办法是把 antd 样式上浮一层，丢到主文档里，但这么做意味着子应用的样式直接泄露到主文档了，比较适用于微前端特殊场景。

vue scoped：当