【vue3js.cn】Css 系列

原文：https://vue3js.cn/interview/css/box.html

1. 说说你对盒子模型的理解?

一个盒子由四个部分组成：content、padding、border、margin

在CSS中，盒子模型可以分成：

• W3C 标准盒子模型
• IE 怪异盒子模型

默认情况下，盒子模型为W3C 标准盒子模型

2. css选择器有哪些？优先级？哪些属性可以继承？

关于css属性选择器常用的有：

• id选择器（#box），选择id为box的元素
• 类选择器（.one），选择类名为one的所有元素
• 标签选择器（div），选择标签为div的所有元素
• 后代选择器（#box div），选择id为box元素内部所有的div元素
• 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
• 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
• 群组选择器（div,p），选择div、p的所有元素
• 伪类选择器
• 伪元素选择器
• 属性选择器

优先级

内联 > ID选择器 > 类选择器 > 标签选择器

到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

• 如果存在内联样式，那么 A = 1, 否则 A = 0
• B的值等于 ID选择器出现的次数
• C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
• D 的值等于 标签选择器 和 伪元素 出现的总次数

3. 说说em/px/rem/vh/vw区别?

在css单位中，可以分为长度单位、绝对单位，如下表所指示

css单位
相对长度单位	em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位	cm、mm、in、px、pt、pc

总结

• px：绝对单位，页面按精确像素展示
• em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值
• rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算
• vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

4. 说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

Css像素 px是一个相对单位，相对的是设备像素（device pixel）

• 在同一个设备上，每1个 CSS 像素所代表的设备像素是可以变化的（比如调整屏幕的分辨率）
• 在不同的设备之间，每1个 CSS 像素所代表的设备像素是可以变化的（比如两个不同型号的手机）

px会受到下面的因素的影响而变化：

• 每英寸像素（PPI）
• 设备像素比（DPR）

设备像素 设备像素（device pixels），又称为物理像素

指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已

从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位为pt

设备独立像素 设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素

在javaScript中可以通过window.screen.width/ window.screen.height 查看

• dpr
  • dpr（device pixel ratio），设备像素比，代表设备独立像素到设备像素的转换关系，在JavaScript中可以通过 window.devicePixelRatio 获取
• ppi
  • ppi （pixel per inch），每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像

总结

• 无缩放情况下，1个CSS像素等于1个设备独立像素
• 设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变
• PC端中，1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下）
• 在移动端中，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素
• 设备像素比（dpr） = 设备像素 / 设备独立像素
• 每英寸像素（ppi），值越大，图像越清晰

5. css中，有哪些方式可以隐藏页面元素？区别?

通过css实现隐藏元素方法有如下：

• display:none
  • 将元素设置为display:none后，元素在页面上将彻底消失
• visibility:hidden
  • 从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘
• opacity:0
  • opacity属性表示元素的透明度，将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的
• 设置height、width模型属性为0
  • 将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素
  • 特点：元素不可见，不占据页面空间，无法响应点击事件
• position:absolute
  • 将元素移出可视区域
  • 特点：元素不可见，不影响页面布局
• clip-path
  • 通过裁剪的形式
  • 特点：元素不可见，占据页面空间，无法响应点击事件

6. 谈谈你对BFC的理解？

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

• 内部的盒子会在垂直方向上一个接一个的放置
• 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发条件 触发BFC的条件包含不限于：

• 根元素，即HTML元素
• 浮动元素：float值为left、right
• overflow值不为 visible，为 auto、scroll、hidden
• display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• position的值为absolute或fixed

7. 元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

实现元素水平垂直居中的方式：

• 利用定位+margin:auto
• 利用定位+margin:负值
• 利用定位+transform
• table布局
• flex布局
• grid布局

8. 如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

两栏布局 两栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在

实现思路也非常的简单：

• 使用 float 左浮左边栏
• 右边模块使用 margin-left 撑出内容块做内容展示
• 为父级元素添加BFC，防止下方元素飞到上方内容

三栏布局 实现三栏布局中间自适应的布局方式有：

• 两边使用 float，中间使用 margin
• 两边使用 absolute，中间使用 margin
• 两边使用 float 和负 margin
• display: table 实现
• flex实现
• grid网格布局

9. 说说flexbox（弹性盒布局模型）,以及适用场景？

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

容器属性有：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

应用场景 在以前的文章中，我们能够通过flex简单粗暴的实现元素水平垂直方向的居中，以及在两栏三栏自适应布局中通过flex完成

包括现在在移动端、小程序这边的开发，都建议使用flex进行布局

10. 怎么理解回流跟重绘？什么场景下会触发？

在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘

• 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
• 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

具体的浏览器解析渲染机制如下所示：

• 解析HTML，生成DOM树，解析CSS，生成CSSOM树
• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
• Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
• Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
• Display:将像素发送给GPU，展示在页面上

回流触发时机

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
• 页面一开始渲染的时候（这避免不了）
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

重绘触发时机

• 颜色的修改
• 文本方向的修改
• 阴影的修改

如何减少

• 如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
• 避免设置多项内联样式
• 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)
• 避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算
• 对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
• 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
• 避免使用 CSS 的 JavaScript 表达式

11. 什么是响应式设计？响应式设计的基本原理是什么？如何做？

响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

响应式网站常见特点：

• 同时适配PC + 平板 + 手机等
• 标签导航在接近手持终端设备时改变为经典的抽屉式导航
• 网站的布局会根据视口来调整模块的大小和位置

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

属性对应如下：

• width=device-width: 是自适应手机屏幕的尺寸宽度
• maximum-scale:是缩放比例的最大值
• inital-scale:是缩放的初始化
• user-scalable:是用户的可以缩放的操作

实现响应式布局的方式有如下：

• 媒体查询
• 百分比
• vw/vh
• rem

12. 如果要做优化，CSS提高性能的方法有哪些？

实现方式有很多种，主要有如下：

• 内联首屏关键CSS
• 异步加载CSS
• 资源压缩
• 合理使用选择器
• 减少使用昂贵的属性
• 不要使用@import

扩展

• 减少重排操作，以及减少不必要的重绘
• 了解哪些属性可以继承而来，避免对这些属性重复编写
• cssSprite，合成所有icon图片，用宽高加上backgroud-position的背景图方式显现出我们要的icon图，减少了http请求
• 把小的icon图片转成base64编码
• CSS3动画或者过渡尽量使用transform和opacity来实现动画，不要使用left和top属性

css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑，同时还要注意css代码的加载顺序

13. 如何使用css完成视差滚动效果?

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验

我们可以把网页解刨成：背景层、内容层、悬浮层

使用css形式实现视觉差滚动效果的方式有：

• background-attachment
• transform:translate3D

14. CSS如何画一个三角形？原理是什么？

可以看到，边框是实现三角形的部分，边框实际上并不是一个直线，如果我们将四条边设置不同的颜色，将边框逐渐放大，可以得到每条边框都是一个梯形

当分别取消边框的时候，发现下面几种情况：

• 取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的
• 当仅有邻边时， 两个边会变成对分的三角
• 当保留边没有其他接触时，极限情况所有东西都会消失

通过上图的变化规则，利用旋转、隐藏，以及设置内容宽高等属性，就能够实现其他类型的三角形

15. 让Chrome支持小于12px 的文字方式有哪些？区别？

Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制

原由 Chrome 团队认为汉字小于12px就会增加识别难度

• 中文版浏览器

与网页语言无关，取决于用户在Chrome的设置里（chrome://settings/languages）把哪种语言设置为默认显示语言

• 系统级最小字号

浏览器默认设定页面的最小字号，用户可以前往 chrome://settings/fonts 根据需求更改

而我们在实际项目中，不能奢求用户更改浏览器设置 对于文本需要以更小的字号来显示，就需要用到一些小技巧

常见的解决方案有：

• zoom
• -webkit-transform:scale()
• -webkit-text-size-adjust:none

16. 说说对Css预编语言的理解？有哪些区别?

扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便

本质上，预处理是Css的超集

包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件

Css预编译语言在前端里面有三大优秀的预编处理器，分别是：

• sass
• less
• stylus