申明
这些都是来自y03l2iufsbl.feishu.cn/docx/IM7ldY…
1，css 中的 animation、transition、transform 有什么区别？
1，animation：属性用于创建复杂的动画序列
属性允许创建一个在指定时间内播放的动画效果，可以包括多个关键帧。
通过指定关键帧动画的名称、持续时间、动画方式（timing function）、延迟时间、播放次数等来控制动画的效果。
属性可以实现更复杂的动画效果，例如循环动画、无限次播放等。
2，transition：属性用于在状态变化时平滑过渡
属性用于指定在元素状态改变时，要以何种方式过渡到新状态。
通过指定过渡的属性、持续时间、动画方式（timing function）、延迟时间等来控制过渡效果。
属性适用于元素从一种状态平滑过渡到另一种状态，例如颜色、大小、位置等属性的变化。
3，transform：属性用于对元素进行变形
属性用于对元素进行变形，例如平移、旋转、缩放、倾斜等。
可以改变元素的变形属性来创建动画效果。
2， 属性，可以改变元素的变形属性来创建动画效果。
1，响应式设计（Responsive Design）：
使用CSS媒体查询（Media Queries）来根据设备的特征（如屏幕宽度、高度、方向等）应用不同的样式。
通过设置百分比宽度、最大宽度或相对单位（比如 rem）来确保元素相对于其容器的大小进行自适应。
2，弹性布局（Flexbox）和网格布局（Grid）：
使用弹性布局和网格布局可以更方便地创建灵活的布局，使页面元素能够根据屏幕大小自动调整位置。
3，移动端优先（Mobile-first）：
首先定义移动端的样式，然后使用媒体查询逐渐添加更大屏幕上的样式，以确保基本功能在小屏幕上也能正常工作。
4，图片和多媒体适配：
使用max-width: 100%确保图片和多媒体在小屏幕上不会溢出其容器。
使用 piecture 和srcset 属性提供不同尺寸的图片。
5，交互友好：
使用合适的尺寸和间距，确保链接、按钮等可点击元素在触摸屏上易于点击。
6，测试和调试：
在不同设备和浏览器上测试你的样式，确保页面在各种情况下都有良好的表现。
使用浏览器开发者工具检查元素并模拟不同设备的情况。
3，CSS3新增了哪些特性？
1，选择器
2，新样式
边框：
border-radius：创建圆角边框
box-shadow：为元素添加阴影
border-image：使用图片来绘制边框
box-shadow：
水平阴影
垂直阴影
模糊距离(虚实)
阴影尺寸(影子大小)
阴影颜色
内/外阴影
背景：
background-clip
background-origin
background-break
文字：
word-wrap
text-overflow
text-shadow
text-decoration
颜色：
rgba
hlsa
3，transition 过渡
4，transform 转换
5，animation 动画
6，渐变
linear-gradient：线性渐变
radial-gradient：径向渐变
4，怎么理解回流跟重绘？什么场景下会触发？
回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制
浏览器解析渲染机制：
解析HTML，生成DOM树，解析CSS，生成CSSOM树
将DOM树和CSSOM树结合，生成渲染树(Render Tree)
Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
Display:将像素发送给GPU，展示在页面上
回流触发时机：
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
页面一开始渲染的时候（这避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight
触发回流一定会触发重绘
重绘触发时机：
颜色的修改
文本方向的修改
阴影的修改
5，如何实现单行／多行文本溢出的省略样式？
单行文本溢出
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
多行文本溢出
基于高度截断(伪元素+定位)
.demo {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.demo::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 0 10px;
}
基于行数截断
.demo {
width: 400px;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
6，说说对 CSS 工程化的理解
CSS 工程化
1，预处理器：Less、 Sass 等
嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系
支持定义 css 变量
提供计算函数
允许对代码片段进行 extend 和 mixin
支持循环语句的使用
支持将 CSS 文件模块化，实现复用
2，重要的工程化插件： PostCss
提高 CSS 代码的可读性：PostCss 其实可以做类似预处理器能做的工作
当我们的 CSS 代码需要适配低版本浏览器时，PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀
允许我们编写面向未来的 CSS：PostCss 能够帮助我们编译 CSS next 代码
3，Webpack loader
Webpack 在裸奔的状态下，是不能处理 CSS 的，Webpack 本身是一个面向 JavaScript 且只能处理 JavaScript 代码的模块化打包工具
Webpack 在 loader 的辅助下，是可以处理 CSS 的
Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader
css-loader：导入 CSS 模块，对 CSS 代码进行编译处理
style-loader：创建style标签，把 CSS 内容写入标签
在实际使用中，css-loader 的执行顺序一定要安排在 style-loader 的前面。因为只有完成了编译过程，才可以对 css 代码进行插入；若提前插入了未编译的代码，那么 webpack 是无法理解这坨东西的，它会无情报错
7，怎么触发BFC，BFC有什么应用场景？
1，定位流
position：absolute, fixed
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定
但是当元素祖先的 transform属性非none 时，会相对于该祖先进行定位
2，浮动流
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似
3，普通流
普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用
BFC的触发方式
1，根元素，<html>
2，浮动元素：float：left/right
3，overflow不为visible。auto，scroll，hidden
4，display：inline-block，table-cell，table-caption，table，inline-table，flex，inline-flex，gird，inline-grid
5，绝对定位元素：position：absolute/fixed
8，单行文本怎么实现两端对齐？
1，添加一行
根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行，实现如下：
<div class="item">
<span class="label">文字</span>:
<span class="value">文字</span>
</div>
.item {
height: 32px;
line-height: 32px;
margin-bottom: 8px;
.label {
display: inline-block;
height: 100%;
width: 100%;
text-align: justify;
vertical-align: top;
&::after {
display: inline-block;
width: 100%;
content: '';
height: 0;
}
}
.value {
padding-right: 10px;
}
}
2，text-align-last
text-align-last，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则
.item {
margin-bottom: 8px;
.label {
display: inline-block;
height: 100%;
width: 100%;
text-align: justify;
text-align-last: justify;
}
.value {
padding-right: 10px;
}
}
9，说说你对 CSS 模块化的理解
1，手写源生 CSS
2，使用预处理器 Sass/Less
3，使用后处理器 PostCSS
4，使用 css modules
5，使用 css modules
10，怎么让Chrome支持小于12px 的文字？
1，使用缩放比例：可以使用 CSS 的 transform 属性来缩放文本元素以达到小于 12px 的效果
2，使用 zoom：将容器或文本元素的 zoom 属性设置为小于 1 的值，例如 zoom: 0.8;这会缩小文本元素及其容器，使得文本看起来更小。请注意，zoom 是非标准的 CSS 属性，不一定在所有浏览器中都有效
3，使用 -webkit-text-size-adjust：将容器或文本元素的 -webkit-text-size-adjust 属性设置为 "none" 或 "auto" 可以控制 Chrome 浏览器对文本大小的调整行为。通过将其设置为 "none"，可以禁用 Chrome 浏览器的最小字体大小限制。请注意，-webkit-text-size-adjust 是针对 WebKit 内核（包括 Chrome 和 Safari）的私有属性
4，使用图片替代：如果需要应用较小的文字大小，并且无法使用缩放，可以将文本转换为图像，并将其作为背景图像或内联图像插入到元素中。这样可以绕过浏览器的最小字体大小限制。但要注意，这将增加页面加载时间并且不利于可访问性和响应式设计
11，flexbox（弹性盒布局模型）是什么，适用什么场景？
Flexbox（弹性盒布局模型）是一种用于创建灵活且自适应的网页布局的 CSS 模块。它提供了一种在容器和其子元素之间建立灵活关系的方式，以实现多个元素的对齐、分布和调整大小。
1，等高的多列布局：Flexbox 可以轻松创建等高的多列布局，使得每一列的高度相等，无论其内容的长度如何。
2，水平和垂直居中：Flexbox 提供了强大的对齐和居中功能，可以在容器中轻松实现水平和垂直居中元素。
3，自适应布局：Flexbox 具有弹性特性，可以根据可用空间自动调整项目的大小和位置，从而实现自适应的布局。
4，等间距的分布：通过使用 Flexbox 的 justify-content 和 align-items 属性，可以轻松地在容器中创建等间距的分布，使项目之间具有相等的间距。
5，响应式布局：Flexbox 是响应式设计的有力工具，可以通过简单的 CSS 更改来构建适应不同屏幕尺寸和设备类型的布局。
12，设备像素、css像素、设备独立像素、dpr、ppi 之间有什么区别？
设备像素、CSS 像素、设备独立像素 (DIP)、设备像素比 (DPR) 和每英寸像素密度 (PPI) 是与屏幕分辨率和显示质量相关的概念。它们之间的区别如下：
1，设备像素：设备像素是物理屏幕上的最小可见单元，用于实际渲染图像或文本。它表示硬件像素点的数量，通常用于描述屏幕的分辨率。设备像素的数量确定了屏幕的细节和清晰度。
2，CSS 像素：CSS 像素是在 Web 开发中使用的抽象单位，用于定义网页上的布局和样式。它是一个相对单位，不直接对应物理屏幕上的像素。CSS 像素可以通过缩放和变换来适应不同的设备和分辨率
3，设备独立像素 (DIP)：设备独立像素是一种逻辑像素单位，用于将 CSS 像素与实际渲染的设备像素进行关联。DIP 可以看作是在 CSS 像素与设备像素之间建立了一个转换层。在标准的 96 DPI（dots per inch）的情况下，1 DIP 等于 1 CSS 像素
4，设备像素比 (DPR)：设备像素比是设备的物理像素与 CSS 像素之间的比例关系。它表示在一个 CSS 像素中有多少个设备像素。例如，如果设备像素比为 2，那么 1 CSS 像素将对应 2 个设备像素。DPR 可以用来判断屏幕的高清程度，即 Retina 屏幕
5，每英寸像素密度 (PPI)：每英寸像素密度表示屏幕上每英寸区域内的像素数量。它是一个描述屏幕分辨率的物理指标。更高的 PPI 值通常意味着更高的像素密度和更细腻的图像显示
总结：
设备像素是物理屏幕上的最小可见单元
CSS 像素是 Web 开发中使用的抽象单位，用于布局和样式
设备独立像素是逻辑像素单位，建立了 CSS 像素与设备像素之间的转换关系
设备像素比是设备的物理像素与 CSS 像素之间的比例关系
每英寸像素密度表示屏幕上每英寸区域内的像素数量，反映了屏幕的分辨率和显示质量。
13，说说你对盒子模型的理解
W3C 标准盒子模型
1，盒子总宽度 = width + padding + border + margin
2，盒子总高度 = height + padding + border + margin
IE 怪异盒子模型
1，盒子总宽度 = width + margin
2，盒子总高度 = height + margin
Box-sizing
content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
14，怎么实现样式隔离？
1，作用域样式（Scoped Styles）：
在 Vue 单文件组件中，可以使用 scoped 特性将样式限定于当前组件的作用域。
在<style scoped>标签包裹的样式只对当前组件起作用，不会影响其他组件或全局样式。
Vue 会通过给每个选择器添加一个唯一的属性选择器来实现作用域样式，确保样式仅适用于当前组件。
2，CSS Modules：
Vue 支持使用 CSS Modules 来实现样式的模块化和隔离。
在 Vue 单文件组件中，可以借助 module 特性启用 CSS Modules 功能，在样式文件中使用类似 :local(.className) 的语法来定义局部样式。
CSS Modules 会自动生成唯一的类名，并在编译时将类名与元素关联起来，从而实现样式的隔离和局部作用域。
3，命名约定：
可以通过使用特定的命名约定来实现样式的隔离。
为了避免样式冲突，可以采用特定的命名规则或前缀，例如 BEM（Block Element Modifier）命名规范或基于组件名称的前缀。
通过在样式类名中添加前缀或特定的命名约定，可以减少样式冲突的可能性。
4，CSS-in-JS 方案：
Vue 也可以结合 CSS-in-JS 库（如 styled-componented，emotion 等）来实现样式的隔离。
使用这种方式，可以直接在组件代码中编写样式，并通过 JavaScript 对象或模板字符串的形式动态生成样式。
CSS-in-JS 方案将样式与组件紧密关联，实现了更高程度的样式隔离和可重用性。
15，flex 布局下，怎么改变元素的顺序？
可以使用order 属性来改变Flex布局下元素的顺序。
1，将元素定义为Flex容器
2，为每个子元素设置order属性，根据需要设置不同的值，值越小的元素会在前面，值相等的元素按照文档流原始顺序排列。
16，”flex: auto;“是什么意思？
flex是复合属性，是flex-flow，flex-shrink和flex-basis的简写，默认值为0 1 auto
1，flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间也不放大
2，flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
3，flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（相当于我们设置的width）
flex: auto => flex：1 1 auto 的简写，即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但在尺寸不足时会优先最大化内容尺寸。
1，当希望元素充分利用剩余空间，但是各自的尺寸按照各自内容进行分配的时候
2， 多用于内容固定，或者内容可控的布局场景，例如导航数量不固定，每个导航文字数量也不固定的导航效果就适合
17，object-fit 用法
object-fit css属性指定可替换元素）的内容应该如何适应到其使用高度和宽度确定的框。
属性：
1，contain
被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”
2，cover
被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
3，fill
被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
4，none
被替换的内容将保持其原有的尺寸。
5，scale-down
内容的尺寸与none 或contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些
18，行内元素和块级元素有什么区别
行内元素（Inline Elements）：
1，默认情况下，行内元素在水平方向上以行内的方式显示，不会独占一行。
2，行内元素只能容纳文本或其他行内元素，不能容纳块级元素。
3，行内元素的宽度和高度由其内容决定，无法设置固定的宽度和高度。
4，行内元素可以设置左右的外边距（margin）和内边距（padding），但上下外边距和内边距对行内元素不起作用。
5，元素包括<span>，<a>，<strong>，<em>，<img>等
块级元素（Block-level Elements）：
1，默认情况下，块级元素会独占一行的空间，即使它们宽度没有填满父元素的水平空间。
2，块级元素可以包含其他块级元素和行内元素。
3，块级元素的宽度、高度、内外边距都可以通过 CSS 设置。
4，块级元素会自动在其前后创建换行。
5，元素包括<div>，<p>，<h1>-<h6>，<ul>，<ol>，<table>等
19，em/px/rem/vh/vw 这些单位有什么区别？
1，px
px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中，px 的大小和元素的其他属性无关。有些人会把 px 认为是相对长度，原因在于在移动端中存在设备像素比，px 实际显示的大小是不确定
2，em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em=16px)。body font-size=62.5%，即16px*62.5 = 10px
em 的值并不是固定的
em 会继承父级元素的字体大小
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
任意浏览器的默认字体高都是 16px
3，rem
rem，相对单位，相对的只是HTML根元素font-size
rem单位可谓集相对大小和绝对大小的优点于一身
和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸
4，vh，vw
vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度
对于position: absolute;的元素是相对于已定位的父元素
对于position: fixed;的元素是相对于 ViewPort（可视窗口）
20，html和css中的图片加载与渲染规则是什么样的？
1，Web浏览器先会把获取到的HTML代码解析成一个DOM树，HTML中的每个标签都是DOM树中的一个节点，包括display: none隐藏的标签，还有JavaScript动态添加的元素等。
2，浏览器会获取到所有样式，并会把所有样式解析成样式规则，在解析的过程中会去掉浏览器不能识别的样式。
3，浏览器将会把DOM树和样式规则组合在一起（DOM元素和样式规则匹配）后将会合建一个渲染树（Render Tree），渲染树类似于DOM树，但两者别还是很大的：
渲染树能识别样式，渲染树中每个节点（NODE）都有自己的样式，而且渲染树不包含隐藏的节点（比如display:none的节点，还有</head>内的一些节点），因为这些节点不会用于渲染，也不会影响节点的渲染，因此不会包含到渲染树中。一旦渲染树构建完毕后，浏览器就可以根据渲染树来绘制页面了。
浏览器渲染Web页面大约会经过六个过程：
a，解析HTML，构成DOM树
b，解析加载的样式，构建样式规则树
c，DOM树和样式规则树进行匹配，构成渲染树
d，计算元素位置进行页面布局
e，绘制页面，最终在浏览器中呈现
图片加载渲染机制：
a，解析HTML时，如果遇到img或picture标签，将会加载图片
b，解析加载的样式，遇到background-image时，并不会加载图片，而会构建样式规则树
c，加载JavaScript，执行JavaScript代码，如果代码中有创建img元素之类，会添加到DOM树中；如查有添加background-image规则，将会添加到样式规则树中
d，DOM树和样式规则匹配时构建渲染树，如果DOM树节点匹配到样式规则中的backgorund-image，则会加载背景图片
e，计算元素（图片）位置进行布局
f，开始渲染图片，浏览器将呈现渲染出来的图片
Web页面中不是所有的图片都会加载和渲染！:
1，<img>，<picture>和设置background-image的元素遇到display:none时，图片会加载，但不会渲染。
2，<img>，<picture>和设置background-image的元素祖先元素设置display:none时，background-image不会渲染也不会加载，而img和picture引入的图片不会渲染但会加载
3，<img>，<picture>和background-image引入相同路径相同图片文件名时，图片只会加载一次
4，样式文件中background-image引入的图片，如果匹配不到DOM元素，图片不会加载
5，伪类引入的background-image，比如:hover，只有当伪类被触发时，图片才会加载
21，CSS中，有哪些方式可以隐藏页面元素？有什么区别?
1，display:none
特点：元素不可见，不占据空间，无法响应点击事件
2，visibility:hidden
特点：元素不可见，占据页面空间，无法响应点击事件
3，opacity:0
特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件
4，设置height、width模型属性为0
特点：元素不可见，不占据页面空间，无法响应点击事件
5，position:absolute
特点：元素不可见，不影响页面布局
6，clip-path
特点：元素不可见，占据页面空间，无法响应点击事件
22，CSS3 中 transition 和 animation 的属性分别有哪些？
transition:
1，transition-property：指定过渡效果应用的 CSS 属性名称，多个属性可以用逗号分隔
2，transition-duration：指定过渡效果的持续时间，单位可以是秒(s)或毫秒(ms)
3，transition-timing-function：指定过渡效果的时间曲线，也就是过渡的速度变化函数
4，transition-delay：指定过渡效果开始之前的延迟时间，单位可以是秒(s)或毫秒(ms)
animation:
1，animation-name：指定定义动画的关键帧名称
2，animation-duration：指定动画的持续时间，单位可以是秒(s)或毫秒(ms)
3，animation-timing-function：指定动画的时间曲线，也就是动画的速度变化函数
4，animation-delay：指定动画开始之前的延迟时间，单位可以是秒(s)或毫秒(ms)
5，animation-iteration-count：指定动画的重复次数，可以使用一个整数值或infinite
6，animation-direction：指定动画的播放方向，可以是 normal，reverse，alternate，alternate-reverse
7，animation-fill-mode：指定动画在非运行时的样式，可以是 none，forwards，backwards，both
8，animation-play-state：指定动画的播放状态，可以是 running，paused
23，说说对 CSS 预编语言的理解，以及它们之间的区别
CSS 预编语言是一种基于 CSS 的扩展语言，可以更加方便和高效地编写 CSS 代码。其主要作用是为 CSS 提供了变量、函数、嵌套、继承、混合等功能，以及更加易于维护和组织的代码结构
1，语法不同：Sass 和 Less 使用类似于 CSS 的语法规则，而 Stylus 则使用了更加简洁和灵活的缩进式语法
2，变量定义方式不同：Sass 使用 $ 符号来定义变量，Less 使用 @ 符号，Stylus 则直接使用变量名即可
3，操作符和函数库不同：Sass 和 Less 支持常见的操作符和函数库，例如运算符、颜色处理、字符串处理等，而 Stylus 的函数库更加强大，支持更多的特性和功能
4，编译方式不同：Sass 和 Less 都需要通过编译器进行编译，可以将预编译的代码转换成标准的 CSS 代码。而 Stylus 则可以直接在浏览器中解析和执行，可以动态调整样式和布局
24，::before 和::after 中双冒号和单冒号有什么区别、作用？
1，单冒号（:）用于 css3 的伪类
2，双冒号（::）用于 css3 的伪元素
区别：
1，双冒号（::）用于 css3 的伪元素
2，伪类与伪元素的本质区别就是是否抽象创造了新元素
3，伪类只要不是互斥可以叠加使用
4，伪元素在一个选择器中只能出现一次，并且只能出现在末尾
5，伪类与伪元素优先级分别与类、标签优先级相同
25，z-index属性在什么情况下会失效？
1，父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static
2，元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种
3，元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display: inline-block
26，position: fixed 一定是相对于浏览器窗口进行定位吗？
不一定
当元素祖先的transform，perspective 或 filter属性非none，容器由视口改为祖先
27，css选择器有哪些？优先级分别是什么？哪些属性可以继承？
属性选择器：
1，id #
2，类 .
3，标签 div
4，后代 div a
5，子选择器 div > a 选择div内部所有a
6，相邻同胞选择器 div + a 选择紧接 div 之后的所有 a
7，群组选择器 (div, a) 选择div，a的所有元素
伪类选择器
1，:link 选择未被访问的链接
2，:visited 选择已被访问的链接
3，:active 选择活动链接
4，:hover
5，:foucus
6，:first-child
伪元素选择器
1，:first-letter 选取指定选择器的首字母
2，:first-line 选取指定选择器的首行
3，:before 元素的内容前面插入内容
4，:after 元素的后面插入内容
属性选择器
[attribute]带有
[attribute=value]所有
[attribute~=value]包含
[attribute|=value]以value开头
优先级：
内联 > ID选择器 > 类选择器 > 标签选择器
继承属性
1，字体系列属性
font
font-family
font-weight
font-size
font-style
font-variant
2，文本系列属性
text-indent
text-align
line-height
word-spacing
letter-spacing
text-transform
direction
color
3，元素可见性
visibility
4，表格布局属性
5，列表元素
list-style-type
list-style-position
list-style
6，引用
7，光标
cursor
28，怎么实现一个宽高自适应的正方形？
1，利用vw来实现
.square {
width: 100%;
height: 100vw;
background: tomato;
}
2，利用元素的margin/padding百分比是相对父元素width的性质来实现：
.square {
width: 20%;
height: 0;
padding-top: 20%;
background: orange;
}
3，利用子元素的margin-top
.square {
width: 30%;
overflow: hidden;
background: yellow;
}
.square::after {
content: '';
display: block;
margin-top: 100%;
}
29，为什么有时候⽤translate来改变位置⽽不是使用position进行定位？
translate 是 transform 属性的⼀个值
改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）
⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合
transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU
因此translate()更⾼效，可以缩短平滑动画的绘制时间
⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况
30，什么是硬件加速？
硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得 animation 与 transition 更加顺畅
我们可以在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能
现在大多数电脑的显卡都支持硬件加速。鉴于此，我们可以发挥GPU的力量，从而使我们的网站或应用表现的更为流畅
31，CSS动画和JS实现的动画分别有哪些优缺点？
CSS动画
优点：
1，浏览器可以对动画进行优化
2，代码相对简单,性能调优方向固定
3，对于帧速表现不好的低版本浏览器，css可以做到自然降级，而js则需要撰写额外代码
缺点：
1，运行过程控制较弱,无法附加事件绑定回调函数
2，代码冗长，想用css实现稍微复杂一点动画，最后css代码都会变得非常笨重
JS动画
优点：
1，控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的
2，动画效果比css动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成
3，css3有兼容性问题，而js大多时候没有兼容性问题
缺点：
1，代码复杂度高于css动画
2，js在浏览器的主线程中运行，而主线程中还有其它需要运行的js脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况
32，如何从html元素继承box-sizing？
在大多数情况下我们在设置元素的 border 和 padding 并不希望改变元素的 width,height值，这个时候我们就可以为该元素设置 box-sizing: border-box
如果不希望每次都重写一遍，而是希望他是继承而来的，那么我们可以使用如下代码：
html {
box-sizing：border-box;
}
*,*:before,*:after {
box-sizing: inherit;
}
这样的好处在于他不会覆盖其他组件的 box-sizing 值，又无需为每一个元素重复设置 box-sizing:border-box;
33，CSSOM树和DOM树是同时解析的吗？
浏览器会下下载HTML解析页面生成DOM树，遇到CSS标签就开始解析CSS，这个过程不会阻塞，但是如果遇到了JS脚本，此时假如CSSOM还没有构建完，需要等待CSSOM构建完，再去执行JS脚本，然后再执行DOM解析，此时会阻塞
34，如何使用css来实现禁止移动端页面的左右划动手势？
CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)
html {
touch-action: none;
touch-action: pan-y;
}
html {
width: 100vw;
overflow-x: hidden;
}
35，如何检测浏览器所支持的最小字体大小？
可以使用 JS 设置 DOM 的字体为某一个值，然后再取出来，如果值设置成功，就说明支持
