二、CSS相关1. css sprite是什么,有什么优缺点优点：减少HTTP请求数：将多个小图片合并成一张大图，减

1. css sprite是什么,有什么优缺点

CSS Sprite（CSS精灵）是一种将多个小图片合并到一张大图中的技术。通过在页面中引用这张大图，并设置合适的background-position和尺寸，可以显示出所需的小图标或背景图案。

优点：

减少HTTP请求数：将多个小图片合并成一张大图，减少了浏览器与服务器之间的请求次数，提高了页面加载速度。
提高性能：由于减少了请求数，减少了网络传输时间和延迟，加快了页面加载速度，提升了用户体验。
减小图片大小：合并后的大图可以使用更高效的压缩算法进行压缩，减小了图片的文件大小。
方便更换风格：只需要替换或修改一张大图中的小图标或背景图案，就可以改变整个页面的样式，维护和更换风格更加方便。

缺点：

图片合并麻烦：合并图片需要手动调整和拼接小图标或背景图案，需要一定的工作量。
维护麻烦：如果需要修改其中一个小图标或背景图案，可能需要重新布局整个大图，并且需要更新相应的CSS样式。

总结：CSS Sprite通过将多个小图片合并成一张大图，减少了HTTP请求，提高了页面加载速度和性能。它的优点包括减少请求数、提高性能、减小图片大小和方便更换风格。然而，它的缺点在于图片合并和维护的麻烦。

3. `display: none;`与`visibility: hidden;`的区别

display: none;会使元素完全从渲染树中消失，不占据任何空间，而visibility: hidden;不会使元素从渲染树中消失，仍然占据空间，只是内容不可见。
display: none;是非继承属性，子孙节点消失是因为元素本身从渲染树中消失，修改子孙节点的属性无法使其显示。而visibility: hidden;是继承属性，子孙节点消失是因为继承了hidden属性，通过设置visibility: visible;可以使子孙节点显示。
修改具有常规流的元素的display属性通常会导致文档重排（重新计算元素的位置和大小）。而修改visibility属性只会导致本元素的重绘（重新绘制元素的可见部分）。
读屏器（屏幕阅读软件）不会读取display: none;元素的内容，但会读取visibility: hidden;元素的内容。

综上所述，display: none;和visibility: hidden;虽然都可以使元素不可见，但在元素在渲染树中的位置、对子孙节点的影响、性能方面有所不同。选择使用哪种方式取决于具体的需求和场景。

2. `link`与`@import`的区别

<link>是HTML方式，@import是CSS方式。<link>标签在HTML文档的<head>部分中使用，用于引入外部CSS文件；@import是在CSS文件中使用，用于引入其他CSS文件。
<link>标签最大限度地支持并行下载，浏览器会同时下载多个外部CSS文件；而@import引入的CSS文件会导致串行下载，浏览器会按照顺序逐个下载CSS文件，这可能导致页面加载速度变慢，出现FOUC（Flash of Unstyled Content）问题。
<link>标签可以通过rel="alternate stylesheet"指定候选样式表，用户可以在浏览器中切换样式；而@import不支持rel属性，无法提供候选样式表功能。
浏览器对<link>标签的支持早于@import，一些古老的浏览器可能不支持@import方式引入CSS文件，而可以正确解析<link>标签。
@import必须出现在样式规则之前，而且只能在CSS文件的顶部引用其他文件；而<link>标签可以放置在文档的任何位置。
总体来说，<link>标签在性能、兼容性和灵活性方面优于@import**。**

因此，在实际使用中，推荐使用<link>标签来引入外部CSS文件。

使用<link>标签引入CSS文件的通常写法如下：

<link rel="stylesheet" type="text/css" href="路径/到/你的/样式表.css">

这里是各个属性的说明：

rel="stylesheet"：这个属性指定了当前引入的是一个样式表。
type="text/css"：这个属性声明了样式表使用的 MIME 类型。在HTML5中，这个属性不是必需的，因为text/css是<link>标签的默认类型。
href="路径/到/你的/样式表.css"：这个属性指定了样式表文件的位置。可以是相对路径或绝对路径。

4. 什么是FOUC?如何避免

FOUC（Flash Of Unstyled Content）指的是在页面加载过程中，由于外部样式表（CSS）加载较慢或延迟，导致页面先以无样式的方式显示，然后突然闪烁出样式的现象。

为了避免FOUC，可以采取以下方法：

将样式表放置在文档的<head>标签中：通过将样式表放在文档头部，确保浏览器在渲染页面内容之前先加载和解析样式表，从而避免了页面一开始的无样式状态。

<!-- public/index.html --> 
<head>
  ... 
  <link rel="stylesheet" href="https://example.com/some-external-style.css"> 
</head>

使用内联样式：将关键的样式直接写在HTML标签的style属性中，这样即使外部样式表加载延迟，页面仍然可以有基本的样式展示，避免出现完全无样式的情况。
使用样式预加载：在HTML的<head>中使用<link rel="preload">标签，将样式表提前预加载，以确保在页面渲染之前样式表已经下载完毕。
使用媒体查询避免不必要的样式加载：通过媒体查询（@media）在适当的条件下加载特定的样式，避免在不需要的情况下加载不必要的样式。

5. 如何创建块级格式化上下文BFC(block formatting context),它有什么用

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响

要创建一个块级格式化上下文（BFC），可以应用以下方法：

使用float属性：将元素的float属性设置为除none以外的值，可以创建一个BFC。
使用overflow属性：将元素的overflow属性设置为除visible以外的值，例如auto或hidden，可以创建一个BFC。
使用display属性：将元素的display属性设置为inline-block、table-cell、table-caption等特定的值，可以创建一个BFC。
使用position属性：将元素的position属性设置为absolute、fixed、relative或sticky，可以创建一个BFC。

开发中的应用

阻止margin重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
可以阻止元素被浮动元素覆盖

6. display、float、position的关系

1. `display: none`

当元素的display属性设置为none时，元素不会在页面上产生任何可见的框，即它完全不占据空间且不可见。此时，position和float属性不会有任何效果，因为元素没有被渲染出来。

2. `position: absolute` 或 `fixed`

如果元素的position属性设置为absolute或fixed，这意味着元素是绝对定位的，脱离了正常的文档流。在这种情况下：

float属性的计算值将被忽略（实际上视为none），因为浮动对绝对定位的元素不适用。
display属性可能会根据元素是否为替代元素或非替代元素进行调整。通常，非替代元素（如普通的<div>或<span>）会被视为block或inline-block，而替代元素（如<img>）保持其原有的display值。

3. `float` 不是 `none`

当元素的float属性不是none（即元素被设置为浮动），元素将脱离正常的文档流但仍占据空间。此时： display属性会根据元素是否为块级或内联元素进行调整。通常，内联元素（如<span>）会被视为block，以便能够正确处理浮动效果。

4. 元素是根元素

如果元素是根元素（通常是<html>元素），display属性可能会进行特殊调整，以确保页面布局的正确性。通常，根元素会被视为块级元素。

7. 清除浮动的几种方式，各自的优缺点

父级 div 定义 height： 将父级容器的高度设置为已浮动元素的高度。优点是简单易实现，缺点是需要提前知道浮动元素的高度，如果高度发生变化，需要手动调整。
结尾处加空 div 标签 clear:both： 在浮动元素后面添加一个空的 div 标签，并设置 clear:both。优点是简单易实现，缺点是需要添加多余的空标签，不符合语义化。
父级 div 定义伪类 :after 和 zoom： 父级容器使用伪元素 :after 清除浮动，并设置 zoom:1 触发 hasLayout。优点是不需要额外添加多余的标签，清除浮动效果好，缺点是对老版本浏览器的兼容性需要考虑。
父级 div 定义 overflow:hidden： 将父级容器的 overflow 属性设置为 hidden。优点是简单易实现，不需要添加额外的标签，缺点是可能会造成内容溢出隐藏。
父级 div 也浮动，需要定义宽度： 将父级容器也设置为浮动，并定义宽度。优点是清除浮动效果好，缺点是需要定义宽度，不够灵活。
结尾处加 br 标签 clear:both： 在浮动元素后面添加 br 标签，并设置 clear:both。和第2种方式类似，优缺点也相似。
使用 clearfix 类： 在父级容器上应用 clearfix 类，该类包含伪元素清除浮动。优点是代码简洁易懂，不需要额外添加标签，缺点是需要定义并引用 clearfix 类。

总体而言，使用伪类 :after 和 zoom 的方式是较为常见和推荐的清除浮动的方法，它可以避免添加多余的标签，并具有较好的兼容性。然而，不同场景下适合使用不同的清除浮动方式，需要根据实际情况选择合适的方法。

8. 怎么样初始化CSS样式？为什么？

为什么？

不同浏览器的默认样式可能会略有不同，这可能会导致网页在不同浏览器中的显示效果有所差异。通过初始化CSS样式，开发者可以从一个相对一致的基线开始构建网站样式，减少浏览器差异带来的问题。

怎么做？ 一般有两种方式。

一种是 CSS Reset 。即创建reset.css文件，移除所有元素的默认样式。通过将元素的边距、填充、字体大小等设置为统一的值（通常是0或相同的值）；一种是全局或局部引入Normalize.css，Normalize.css保留了有用的默认值，而不是移除所有的默认样式。它也会修复浏览器之间的差异，而不是去除这些差异。

9. css3有哪些新特性

新增选择器：例如:nth-child()、:first-of-type、:last-of-type等，可以根据元素在父元素中的位置进行选择。
弹性盒模型：通过display: flex;可以创建弹性布局，简化了元素的排列和对齐方式。
多列布局：使用column-count和column-width等属性可以实现将内容分为多列显示。
媒体查询：通过@media可以根据设备的特性和屏幕大小应用不同的样式规则。
个性化字体：使用@font-face可以引入自定义字体，并在网页中使用。
颜色透明度：通过rgba()可以设置颜色的透明度。
圆角：使用border-radius可以给元素添加圆角效果。
阴影：使用box-shadow可以为元素添加阴影效果。
倒影：使用box-reflect可以为元素添加倒影效果。
背景效果：使用background-size可以控制背景图片的大小。
转换：使用transform可以实现元素的旋转、倾斜、位移和缩放等变换效果。
动画：通过@keyframes和animation可以创建元素的动画效果。

CSS3引入了许多新的伪类，以下是一些常见的新增伪类：

:nth-child(n)：选择父元素下的第n个子元素。
:first-child：选择父元素下的第一个子元素。
:last-child：选择父元素下的最后一个子元素。
:nth-of-type(n)：选择父元素下特定类型的第n个子元素。
:first-of-type：选择父元素下特定类型的第一个子元素。
:last-of-type：选择父元素下特定类型的最后一个子元素。
:empty：选择没有任何子元素或者文本内容的元素。
:target：选择当前活动的目标元素。
:enabled：选择可用的表单元素。
:disabled：选择禁用的表单元素。
:checked：选择被选中的单选框或复选框。
:focus：选择当前获取焦点的元素。
:hover：选择鼠标悬停在上方的元素。

10. display有哪些值？

block：将元素转换为块状元素，独占一行，可设置宽度、高度、边距等属性。
inline：将元素转换为行内元素，不独占一行，只占据内容所需的空间，无法设置宽度、高度等块级属性。
none：设置元素不可见，在渲染时将其完全隐藏，不占据任何空间。
inline-block：使元素既具有行内元素的特性（不独占一行），又具有块级元素的特性（可设置宽度、高度等属性），可以看作是行内块状元素。
table：将元素作为块级表格显示，常用于构建表格布局，类似于<table>元素。
inherit：规定应从父元素继承display属性的值，使元素继承父元素的框类型。

11. 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

有两种，IE盒子模型、W3C盒子模型；

盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；

区别： IE的content部分把border和padding计算了进去;

标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高。

box-sizing属性用于控制元素的盒模型类型，常用的属性值有：

content-box：默认值，使用标准的W3C盒模型，元素的宽度和高度仅包括内容区域（content），不包括填充、边框和外边距。
border-box：使用怪异的IE盒模型，元素的宽度和高度包括内容区域（content）、填充（padding）和边框（border），但不包括外边距（margin）。即元素的宽度和高度指定的是内容区域加上填充和边框的总宽度和高度。
inherit：继承父元素的box-sizing属性值。

12. CSS优先级算法如何计算？

CSS优先级计算的一般规则：

!important：样式规则使用了!important标记，具有最高优先级，无论其位置在哪里。
内联样式：直接应用在元素上的style属性具有较高的优先级。
ID选择器：使用ID选择器的样式规则具有较高的优先级。例如，#myElement。
类选择器、属性选择器和伪类选择器：使用类选择器（例如.myClass）、属性选择器（例如[type="text"]）和伪类选择器（例如:hover）的样式规则的优先级较低于ID选择器。
元素选择器和伪元素选择器：使用元素选择器（例如div）和伪元素选择器（例如::before）的样式规则的优先级较低于类选择器、属性选择器和伪类选择器。

当存在多个样式规则具有相同的优先级时，会根据以下规则进行决定：

就近原则：当同一元素上存在多个具有相同优先级的样式规则时，最后出现的样式规则将被应用。
继承：某些样式属性可以被子元素继承，如果父元素具有样式规则，子元素将继承该样式。

13. 谈谈浮动（float）和清除浮动

浮动（float）是CSS中的一种布局方式，它允许元素向左或向右浮动并脱离文档的正常流，其他元素会围绕浮动元素进行布局。

特点：元素浮动后，其原位置会被其他元素填充，不再占据文档流中的空间。

清除浮动：

空元素清除浮动：在浮动元素后面添加一个空的块级元素，并设置其clear属性为both，使其在浮动元素下方换行，达到清除浮动的效果。
父级元素使用overflow属性：给包含浮动元素的父元素设置overflow属性为auto或hidden，可以触发BFC（块格式化上下文），从而包含浮动元素。
使用伪元素清除浮动：使用::after伪元素给包含浮动元素的父元素添加一个清除浮动的样式，例如设置content为空字符串、display为table等。

14. position的值

position 属性用于控制元素的定位方式，常用的取值包括：

static：默认值，表示元素在文档流中正常定位，不会受到 top、right、bottom、left 属性的影响。
relative：生成相对定位的元素，相对于其正常位置进行定位，通过设置 top、right、bottom、left 属性来调整元素的位置，不会脱离文档流，周围的元素仍然会按照正常布局进行排列。
absolute：生成绝对定位的元素，相对于最近的非 static 定位的父元素进行定位，如果没有非 static 定位的父元素，则相对于文档根元素（即浏览器窗口）进行定位。绝对定位的元素会脱离文档流，不占据空间，可以通过设置 top、right、bottom、left 属性来精确控制元素的位置。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，不会随着页面的滚动而改变位置。可以通过设置 top、right、bottom、left 属性来指定元素的位置。
inherit：规定从父元素继承 position 属性的值。

15. display:inline-block 的元素之间为什么会显示间隙？怎么解决？

inline-block：使元素既具有行内元素的特性（不独占一行），又具有块级元素的特性（可设置宽度、高度等属性），可以看作是行内块状元素。

display: inline-block 元素在默认情况下会产生间隙，这是因为它们被视为行内元素，会保留默认的行框高度和基线对齐。然而，可以采取一些方法来消除这些间隙，使元素紧密排列，例如在携程网站中的布局。

以下是一些消除间隙的常见方法：

使用负值 margin：通过设置负值的左右外边距（margin）来抵消间隙。例如，可以使用 margin-right: -4px; 来消除间隙。
使用 font-size: 0;：将 inline-block 元素的父元素的字体大小设置为 0，然后在 inline-block 元素上重新设置所需的字体大小。这样可以消除间隙，因为元素内部没有文字导致的间隙。
使用 letter-spacing：在 inline-block 元素的父元素上设置负值的 letter-spacing（字间距），例如 letter-spacing: -4px;，可以消除间隙。
使用 word-spacing：在 inline-block 元素的父元素上设置负值的 word-spacing（词间距），例如 word-spacing: -4px;，可以消除间隙。

16. PNG\GIF\JPG的区别及如何选

如果需要动画效果，可以选择GIF格式。
如果是照片或复杂图像，需要高质量和丰富的颜色，可以选择 JPG 格式。
如果需要透明背景或简单的透明效果比如图标、背景、按钮，可以选择 PNG 格式。

17.行内元素float:left后是否变为块级元素？

当行内元素设置了 float: left; 后，并非直接变为块级元素，而是表现出类似行内块级元素 (inline-block) 的特性。

行内元素设置了 float: left; 后会产生以下效果：

行内元素会脱离文档流，并根据设置的浮动方向向左浮动。
其宽度不再受到文本内容的限制，而是根据内容的宽度来确定。
可以设置 padding-top、padding-bottom、width、height 等属性，并产生相应的效果。
相邻的行内元素会环绕在其周围，形成类似于文本环绕的效果。

需要注意的是，设置了浮动的行内元素不会自动填充父元素的宽度，而是根据内容的宽度进行布局。如果希望行内元素具有块级元素的宽度特性，可以设置 width: 100%;

总结：行内元素设置了 float: left; 后，它的表现类似于行内块级元素，但仍然属于行内元素的性质，只是在布局和尺寸上有所改变。

18. ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号(:)： 单冒号用于表示伪类。伪类是用于选择元素的特定状态或动作的关键字，例如 :hover、:active、:focus 等。伪类表示元素的某种状态或行为，它们通常用于选择元素的特定状态并应用相应的样式。
双冒号(::)： 双冒号用于表示伪元素。伪元素是用于在文档中生成或插入特定内容的关键字，例如 ::before、::after、::first-line、::first-letter 等。伪元素可以创建或修改元素的一部分内容，它们允许开发人员在元素的特定位置添加样式或内容，而无需在文档中实际插入额外的 HTML 元素。

关于 ::before 和 ::after 伪元素的作用：

::before： ::before 伪元素用于在选中元素的内容前插入生成的内容。通过设置 content 属性和应用样式，可以在元素的开始位置插入额外的内容，这样就可以实现一些装饰性效果或添加额外的元素内容。（content：attr（data-text）可以引入）
::after： ::after 伪元素用于在选中元素的内容后插入生成的内容。与 ::before 类似，通过设置 content 属性和应用样式，可以在元素的结束位置插入额外的内容，从而实现装饰性效果或添加其他元素内容。

19. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms
如果需要手动编写动画，建议将最小时间间隔设置为 16.7ms，即每帧动画的时间间隔。这是因为大多数显示器的默认刷新频率是 60Hz，也就是每秒刷新 60 次。在这种情况下，将动画的时间间隔设置为 16.7ms 可以确保每帧动画都能够在显示器刷新之前完成。
如果时间间隔小于 16.7ms，则会导致某些帧在显示器刷新之后才能呈现，造成不连续的动画效果，也称为"跳帧"现象。因此，将时间间隔设置为 16.7ms 是一个相对较小的值，可以保证较平滑的动画效果，并且适应大多数显示器的刷新频率。

20. CSS合并的方法

内联 CSS: 将 CSS 直接写在 HTML 文件的 <style> 标签中或者通过 style 属性添加到具体元素中。这样可以减少 HTTP 请求并提高页面加载速度，但可维护性较差。
CSS 预处理器: 使用 CSS 预处理器如 Sass、Less 或 Stylus，它们提供了更灵活和可维护的方式来编写 CSS，并且可以将多个 CSS 文件合并为一个。
合并工具（Webpack）: 使用构建工具如 Grunt、Gulp 或 Webpack，通过配置任务来合并 CSS 文件。这些工具提供了任务运行、文件合并、压缩等功能，可以自动化合并 CSS，并在开发过程中或上线前进行处理。
HTTP 请求合并: 如果使用多个 CSS 文件，可以通过服务器端配置将它们合并成一个文件，并通过单个 HTTP 请求加载。这样可以减少请求的数量，提高页面加载速度。
压缩: 对合并后的 CSS 文件进行压缩，去除空格、注释等无关字符，以减小文件大小，提高加载速度。

21. CSS不同选择器的权重(CSS层叠的规则)

!important规则：具有最高的优先级，优先级为最大。
行内样式：通过 style 属性直接定义的样式具有较高的权重，优先级为 1000。
ID 选择器：每个 ID 选择器的权重为 100。
类选择器、属性选择器和伪类选择器：每个类选择器、属性选择器或伪类选择器的权重为 10。
元素选择器：每个元素选择器的权重为 1。

下面是一个权重计算的示例：

/* 权重为 1 */
div {
}

/* 权重为 10 */
.class1 {
}

/* 权重为 100 */
#id1 {
}

/* 权重为 101 (100 + 1) */
#id1 div {
}

/* 权重为 11 (10 + 1) */
.class1 div {
}

/* 权重为 21 (10 + 10 + 1) */
.class1 .class2 div {
}

22. CSS在性能优化方面的实践

压缩和合并CSS：使用CSS压缩工具将CSS文件压缩，并将多个CSS文件合并为一个文件，减少网络请求次数和文件大小。
使用Gzip压缩：配置服务器开启Gzip压缩，可以减小CSS文件的大小，加快文件传输速度。
将CSS文件放在<head>标签中：将CSS文件的引用放在HTML文档的<head>标签中，以便在页面渲染前加载CSS样式。
避免使用@import：避免在CSS中使用@import导入其他CSS文件，因为@import会增加额外的请求延迟，推荐使用<link>标签引入CSS文件。
使用缩写属性：尽量使用CSS的缩写属性，如margin、padding、font等，可以减少CSS文件的大小。
避免使用滤镜：某些CSS滤镜效果会导致性能下降，特别是在大型页面中使用，尽量避免滤镜的使用。
合理使用选择器：选择器的复杂性会影响CSS选择器的匹配速度，尽量避免使用过于复杂的选择器，减少选择器的层级和嵌套。
避免使用CSS表达式：CSS表达式会在每次页面重绘时重新计算，影响性能，尽量避免使用。
使用缓存：通过设置适当的HTTP响应头，将CSS文件缓存到浏览器中，减少重复请求。
使用媒体查询：针对不同设备和屏幕尺寸，使用媒体查询来加载不同的CSS样式，提高响应性能。

23. CSS3动画（简单动画的实现，如旋转等）

依靠CSS3中提出的三个属性：transition、transform、animation
transition（过渡）：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
transform（转换）：定义元素的变化结果，包含rotate、scale、skew、translate。
animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

以下是一个使用CSS3动画实现旋转的示例：

/* 定义动画关键帧 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 应用动画到元素 */
.element {
  animation-name: rotate; /* 指定动画名称 */
  animation-duration: 3s; /* 动画持续时间 */
  animation-timing-function: linear; /* 动画速度曲线 */
  animation-delay: 0s; /* 动画延迟时间 */
  animation-iteration-count: infinite; /* 动画重复次数，这里设置为无限循环 */
  animation-direction: normal; /* 动画播放方向 */
}

24. base64的原理及优缺点

定义：Base64是一种将二进制数据编码为ASCII字符的方法，通过将二进制数据转换为由64个字符组成的可打印字符序列，实现二进制数据的传输和存储。

原理：

将待编码的数据按照每3个字节一组进行分组。
将每组3个字节转换为4个6位的Base64字符。
如果最后一组不足3个字节，根据需要进行填充。
将转换后的Base64字符拼接在一起，形成最终的Base64编码结果。

优点：

可以将二进制数据转换为文本数据，方便在文本环境中传输和存储。
减少了HTTP请求，可以将小的图片或其他资源直接嵌入到HTML、CSS或JavaScript代码中，减少了对服务器的请求次数。

缺点：

Base64编码会使数据的大小增加，因为每3个字节的原始数据会转换为4个字节的Base64编码数据。
Base64编码是一种可逆的编码方法，虽然可以加密数据，但并不提供真正的安全性。
编码和解码过程涉及到字符转换和处理，消耗了一定的CPU资源。

25. stylus/sass/less区别

Sass, Less, 和 Stylus 是三种常用的 CSS 预处理器，它们在功能和语法上有一些区别：

语法差异：Sass 使用类似 Ruby 的缩进语法，而 Less 和 Stylus 使用类似 CSS 的语法。Sass 使用严格的缩进表示层次与嵌套关系，而 Less 和 Stylus 可以使用大括号 {} 表示层次和嵌套关系。
变量：Sass、Less 和 Stylus 都支持变量，用于存储和复用值。在 Sass 和 Less 中，变量以 $ 符号开头，而在 Stylus 中，变量以 $ 或者 @ 符号开头。
混合：混合（Mixins）允许将一组 CSS 规则集合存储为一个可重用的样式块。Sass 和 Less 使用 @mixin 定义混合，而 Stylus 使用 mixin 关键字定义混合。
嵌套：Sass、Less 和 Stylus 都支持嵌套规则，可以在父级规则内部定义子级规则。Sass 使用缩进表示嵌套关系，Less 和 Stylus 使用大括号 {} 表示嵌套关系。
继承：继承（Inheritance）允许一个选择器继承另一个选择器的样式。在 Sass 中，使用 @extend 实现继承，而在 Less 和 Stylus 中，使用 & 符号实现继承。
颜色混合：颜色混合（Color blending）允许将两个颜色混合生成一个新的颜色。Sass 使用 mix() 函数实现颜色混合，Less 使用 blend() 函数，而 Stylus 使用 mix() 函数。
环境和工具支持：Sass 是基于 Ruby 的，需要安装 Ruby 环境来编译，而 Less 和 Stylus 可以通过 Node.js 的 NPM 安装相应的库来编译。

26. postcss的作用

可以直观的理解为：它就是一个平台。为什么说它是一个平台呢？因为我们直接用它，感觉不能干什么事情，但是如果让一些插件在它上面跑，那么将会很强大

PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树

通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixer

postcss可以对sass处理过后的css再处理最常见的就是autoprefixer

PostCSS 是一个用于转换 CSS 的工具，它提供了一个插件化的架构，可以通过加载各种插件来处理 CSS。主要作用包括：

转换 CSS：PostCSS 可以将 CSS 解析成抽象语法树（AST），并允许开发者编写插件来修改和转换 CSS。这使得开发者可以自定义和扩展 CSS 的功能，从而提供更灵活的编写样式的能力。
自动添加浏览器前缀：PostCSS 的插件生态系统中最常用的插件之一是 autoprefixer。它可以根据配置和浏览器兼容性自动为样式属性添加浏览器前缀，以确保在不同浏览器中正确显示样式。
代码优化和压缩：PostCSS 的插件可以用于优化和压缩 CSS 代码，删除不必要的空格、注释、重复规则等，以减小文件大小并提高加载速度。
使用未来的 CSS 语法：PostCSS 可以支持使用未来的 CSS 语法和功能，例如使用 CSS Variables、CSS Modules、CSS Grid 等。通过一些插件，可以在现有浏览器中使用这些新特性，而无需等待浏览器的更新。

27. 如何美化CheckBox

<label> 属性 for 和 id
隐藏原生的 <input>
:checked + <label>

要美化复选框（CheckBox），可以按照以下步骤进行操作：

使用 <label> 标签和关联的 <input> 元素：将复选框包裹在 <label> 标签中，并使用 for 属性与对应的 <input> 元素的 id 进行关联，确保点击标签时也可以触发复选框的选择状态。

<label for="myCheckbox">Checkbox Label</label>
<input type="checkbox" id="myCheckbox">

隐藏原生的 <input> 元素：使用 CSS 样式将原生的 <input> 元素隐藏起来，使其不可见。

input[type="checkbox"] {
  display: none;
}

使用 CSS 样式美化复选框：利用 CSS 样式为复选框创建自定义的外观效果。

input[type="checkbox"] + label {
  /* 定义复选框的样式 */
}

input[type="checkbox"]:checked + label {
  /* 定义选中时复选框的样式 */
}

在上述样式中，:checked 选择器用于选中状态下的样式，+ 选择器用于选择紧接在 <input> 元素后的兄弟 <label> 元素。

通过调整这些样式，您可以改变复选框的外观，如更改背景颜色、添加边框、改变图标等。可以使用 CSS 属性如 background-color、border、color、content 等来设置样式。

例如，以下示例将复选框的背景颜色设置为蓝色，并在选中时添加一个打勾的图标：

input[type="checkbox"] + label {
  display: inline-block;
  padding-left: 25px;
  position: relative;
  cursor: pointer;
}

input[type="checkbox"] + label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  border-radius: 3px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: 2px;
}

input[type="checkbox"]:checked + label:before {
  background-color: blue;
  border-color: blue;
  content: "\2713";
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  color: #fff;
}

28. 什么是外边距重叠？重叠的结果是什么？

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

下面是详细分析

外边距重叠（margin collapse）指的是在某些情况下，相邻的两个元素之间的外边距会发生合并，并且取两者之间的较大值作为最终的外边距值。外边距重叠主要发生在垂直方向上，而水平方向上的外边距不会发生重叠。

外边距重叠的结果是两个相邻元素的外边距被合并成一个单独的外边距，这可能会导致布局上的一些意外效果，比如元素之间的间距变得比预期的要大。

下面是一些常见情况下外边距重叠的例子：

相邻的兄弟元素的外边距重叠：

<div class="box"></div>
<div class="box"></div>

.box {
  margin-top: 20px;
  margin-bottom: 30px;
}

在这个例子中，两个相邻的兄弟元素之间的上下外边距会发生重叠，最终的外边距值为30px，而不是预期的50px。

父元素与第一个/最后一个子元素的外边距重叠：

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  margin-bottom: 20px;
}

.child {
  margin-top: 30px;
}

在这个例子中，父元素的下外边距和子元素的上外边距发生重叠，最终的外边距值为30px，而不是预期的50px。

29. rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

30. css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height

通过设置 line-height 属性，可以控制行高，从而实现文字在垂直方向上的重叠。将 line-height 的值设置为大于文字大小的值，可以使文字垂直居中或与其他文字重叠。

.text {
  line-height: 1.5; /* 行高为文字大小的1.5倍 */
}

水平方向：letter-spacing

通过设置 letter-spacing 属性，可以控制字符之间的间距，从而实现文字在水平方向上的重叠。将 letter-spacing 的值设置为负数，可以让字符紧密排列，产生重叠效果。

.text {
  letter-spacing: -2px; /* 字符间距为负数，产生重叠效果 */
}

31. 除了flex布局，如何垂直居中一个浮动元素

表格布局：将父元素的display属性设置为table，并将子元素的display属性设置为table-cell，然后使用vertical-align属性将子元素垂直居中

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

** 绝对定位和负边距**：对于已知高度的子元素，将父元素设置为相对定位，子元素设置为绝对定位，并使用top: 50%将其垂直居中，然后通过负边距的方式将子元素向上移动一半的高度。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  margin-top: -50px; /* 假设子元素高度为100px的一半 */
}

文本垂直居中：对于单行文本，可以设置父元素的line-height属性和高度相等，从而实现文本的垂直居中

.parent {
  height: 100px;
  line-height: 100px;
}

CSS3位移：使用CSS3的transform属性的translateY函数将子元素向上位移一半的高度实现垂直居中

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

32. px和em的区别

px和em是两种不同的长度单位，它们的区别如下：

px（像素）是一个绝对单位，表示固定的像素大小。无论父元素的字体大小如何，px的值都不会改变，它是一个固定的长度单位。
em（倍数）是一个相对单位，它相对于父元素的字体大小来确定自身的大小。如果没有设置字体大小，则1em等于浏览器默认的字体大小（通常是16px）。如果父元素的字体大小是16px，那么1em就等于16px，2em就等于32px，以此类推。

由于em是相对单位，它具有一定的灵活性和可扩展性。当需要调整整个页面的字体大小时，只需更改根元素的字体大小，其他使用em作为单位的元素会自动按比例调整大小，从而实现页面的整体缩放效果。

33. css的content属性。有什么作用？有什么应用？

css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

/**一种常见利用伪类清除浮动的代码**/
.clearfix ::after {
    content:".";       //这里利用到了content属性
    display:block;
    height:0;
    visibility:hidden;
    clear:both; 
 }
.clearfix {
    *zoom:1;
}

ps: content属性只对::before和::after伪元素起作用，对于其他元素并没有效果。此外，content属性必须与display属性一起使用，通常为block或inline-block，以确保生成的内容具有正确的布局。

34. 除了flex布局，如何水平居中的方法

.parent {
  text-align: center;
}

.element {
  margin-left: auto;
  margin-right: auto;
}

.element {
  position: absolute;
  left: 50%; //元素的左边缘与容器中心对齐，而不是元素的中心。
  transform: translateX(-50%); //将元素向左移动其自身宽度的 50%
}

35. 如何使用CSS实现硬件加速

1. 使用 `transform` 和 `opacity`

transform 和 opacity 属性可以触发硬件加速（在支持的浏览器上）。因为浏览器知道这些变化可以通过 GPU 更高效地处理。例如：

.accelerated-element {
  transform: translateZ(0);
  opacity: 0.99;
}

使用 translateZ(0) 或者其他 3D 变换（如 translate3d(0,0,0)）可以提示浏览器为该元素创建一个新的复合层，从而可能利用 GPU 加速。而 opacity 在不改变其值的前提下（或只进行轻微修改），也能达到相似的效果。

2. 使用 `will-change`

will-change 属性允许开发者提前通知浏览器某个元素即将进行哪种变化，这样浏览器可以做出优化以提高性能。例如，如果你知道一个元素将会进行动画处理，你可以这样写：

cssCopy code
.future-changed-element {
  will-change: transform, opacity;
}

这样可以让浏览器知道该元素的 transform 和 opacity 属性即将发生变化，从而可能提前进行一些优化处理。

36. 重绘和回流（重排）是什么，如何避免？

重绘（Repaint） 是指当元素的外观属性（如颜色、背景等）发生改变，但不影响布局时的重新绘制过程。重绘不会影响元素的几何尺寸和位置。
回流（Reflow） 是指当元素的布局属性（如尺寸、位置、隐藏/显示等）发生改变，导致浏览器重新计算元素的几何属性，重新构建渲染树的过程。回流会导致其他相关元素的回流和重绘。
回流必将引起重绘，而重绘不一定会引起回流

避免重绘和回流对于提高页面性能和响应速度至关重要。以下是一些减少重绘和回流的方法：

1. 最小化或批量 DOM 操作

例子：使用 DocumentFragment 来批量添加列表项，而不是逐一添加。

const list = document.getElementById("myList");
const fragment = document.createDocumentFragment();

for (let i = 0; i < 10; i++) {
  const li = document.createElement("li");
  li.innerHTML = `Item ${i}`;
  fragment.appendChild(li);
}

list.appendChild(fragment);

2. 优化 CSS 选择器

例子：避免深层次选择器，使用类选择器代替。

避免：

body #container .sidebar nav ul li a { /* 样式 */ }

3. 使用 transform 和 opacity 进行动画

例子：使用 transform 来移动元素，而不是 margin-left 或 left。

避免：

.animate-left {
  animation: moveLeft 2s infinite;
}

@keyframes moveLeft {
  from { left: 0; }
  to { left: 100px; }
}

4. 避免触发同步布局事件

例子：批量读取元素尺寸信息后再一次性更新样式。

// 读取
let heights = Array.from(document.querySelectorAll('.item')).map(el => el.offsetHeight);

// 更新
heights.forEach((height, index) => {
  document.querySelectorAll('.mirror')[index].style.height = `${height}px`;
});

5. 层的合理利用

例子：使用 will-change 提示浏览器某元素将要发生变化。

.scroll-item {
  will-change: transform;
}

6. 减少重排区域

例子：对于一个动态更新内容的小部件，确保它的位置和大小不会影响到周围的布局。

.widget {
  position: absolute;
  top: 10px;
  right: 10px;
}

7. 避免不必要的固定定位

例子：减少或优化使用 position: fixed 的元素，尤其是在滚动页面时。

优化前：

.header {
  position: fixed;
  width: 100%;
}

优化后（如果可能，考虑替代的布局策略，如使用静态定位配合滚动监听来动态改变样式）：

.header {
  position: static;
}

37. 说一说css3的animation

CSS3的animation属性是用于创建动画效果的一种方式。它可以通过关键帧（@keyframes）来定义动画的每一帧，以实现元素的平滑过渡和动态效果。

使用animation属性时，需要设置以下几个关键的子属性：

animation-name：定义动画的名称，对应@keyframes中的动画名。
animation-duration：定义动画的持续时间，可以设置为具体的时间值，如2s表示2秒，或者使用关键词infinite表示无限循环。
animation-timing-function：定义动画的时间函数，控制动画在不同时间点的速度变化，常见的取值有linear（线性）、ease（缓入缓出）、ease-in（缓入）、ease-out（缓出）、ease-in-out（缓入缓出）等。
animation-delay：定义动画的延迟时间，即动画开始之前的等待时间。
animation-iteration-count：定义动画的循环次数，可以设置为具体的次数，或者使用关键词infinite表示无限循环。
animation-direction：定义动画的播放方向，包括正常播放（normal）、反向播放（reverse）、交替反向播放（alternate）等。
animation-fill-mode：定义动画播放之前和之后的样式状态，包括保持初始状态（none）、保持最后状态（forwards）、保持初始和最后状态（both）等。
animation-play-state：定义动画的播放状态，可以控制动画的暂停和继续播放，包括paused（暂停）和running（运行）。

38. 左边宽度固定，右边自适应

左侧固定宽度，右侧自适应宽度的两列布局实现

html结构

<div class="outer">
    <div class="left">固定宽度</div>
    <div class="right">自适应宽度</div>
</div>

在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度

方法1：左侧div设置成浮动：float: left，右侧div宽度会自动适应

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.right {
    height: 200px;
    background-color: blue;
}

方法2：对右侧:div进行绝对定位，然后再设置right=0，即可以实现宽度自适应

绝对定位元素的第一个高级特性就是其具有自动伸缩的功能，当我们将 width设置为 auto 的时候（或者不设置，默认为 auto ），绝对定位元素会根据其 left 和 right 自动伸缩其大小

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    position: absolute;
    left: 200px;
    top:0;          
    right: 0;
}

方法3：将左侧div进行绝对定位，然后右侧div设置margin-left: 200px

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
}
.right {
    height: 200px;
    background-color: blue;
    margin-left: 200px;
}

 
        @程序员poetry: 代码已经复制到剪贴板

方法4：使用flex布局

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    display: flex;
    flex-direction: row;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    flex: 1;
}

39. 实现已知或者未知宽度的垂直水平居中

/** 1 绝对定位margin**/
.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
  }
}

/** 2 绝对定位transform**/
.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/** 3 flex**/
.wraper {
  .box {
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100px;
  }
}

/** 4 table布局vertical-align: middle**/
.wraper {
  display: table;
  .box {
    display: table-cell;
    vertical-align: middle;
  }
}

40. 如何实现小于12px的字体效果

1. 直接设置 CSS

尽管这是最直接的方法，但要注意不是所有用户的浏览器都会允许小于 12px 的字体大小。某些浏览器可能会有最小字体大小的设置。

.small-text {
  font-size: 10px;
}

2. 使用 `transform` 缩放

如果浏览器不允许直接设置小于 12px 的字体大小，可以使用 CSS 的 transform 属性来缩小文本。首先设置字体大小为 12px 或更大，然后用 scale() 函数进行缩放。

.small-text {
  font-size: 12px; /* 设置为浏览器允许的最小字体大小 */
  transform: scale(0.8); /* 缩放到所需大小 */
  transform-origin: left top; /* 设置变换的原点 */
}

3. 使用 `viewport` 单位

viewport 单位（如 vw、vh）可以根据视窗的大小动态计算字体大小。这种方法能让字体大小的调整更加灵活，但需要小心使用，以确保在不同屏幕尺寸上的可读性。

.small-text {
  font-size: 1vw; /* 根据视窗宽度动态调整字体大小 */
}

41. hack原理及常用hack（了解即可）

CSS Hack 主要是为了解决不同浏览器（尤其是旧版本的浏览器）之间在渲染 CSS 时存在的兼容性问题。它通过针对特定浏览器编写特定的样式规则来实现，使得开发者可以为不同浏览器提供不同的样式，从而确保网页在多种浏览器上都能正常显示。

常用的 CSS Hack

属性级 Hack

IE Hack：为 IE 浏览器指定样式。

.example { 
  color: red; /* 所有浏览器 */
  _color: blue; /* 仅 IE6 识别 */
  *color: green; /* IE7 和 IE6 识别 */
  color: yellow\9; /* IE8、IE9、IE10 识别 */
}

选择器级 Hack

IE Hack：利用不同 IE 版本不支持的选择器。

.example { color: red; } /* 所有浏览器 */
+html .example { color: green; } /* 仅 IE7 识别 */
*:first-child+html .example { color: blue; } /* 仅 IE7 识别 */

非 IE Hack：针对非 IE 浏览器设置样式。

cssCopy code
.example:not(:root) { color: green; } /* 除 IE 外的现代浏览器 */

条件注释 Hack（仅限 IE）
- 条件注释是一种仅在 IE 浏览器中有效的特殊注释，可以用来针对不同版本的 IE 应用不同的 CSS 文件或样式规则。
```

```

42. CSS有哪些继承属性

字体相关： font font-family font-size font-weight
文本排版相关： word-break（判断单词内部断行） letter-spacing word-spacing white-space（处理元素内的空格） line-height
其他：color, visibility, cursor

43. CSS3新增伪类有那些

:root：选择文档的根元素，等同于html元素。
:empty：选择没有子元素的元素。
:target：选取当前活动的目标元素。
:enabled：选择可用的表单元素。
:disabled：选择禁用的表单元素。
:checked：选择被选中的表单元素。
:after：在元素内部最前添加内容。
:before：在元素内部最后添加内容。
:nth-child(n)：匹配父元素下指定子元素中排序第n个的元素。
:nth-of-type(n)：匹配父元素下指定类型的子元素中排序第n个的元素。

44. 用纯CSS创建一个三角形的原理是什么

使用纯CSS创建三角形的原理是利用元素的边框属性来实现。

具体步骤如下：

创建一个具有宽度和高度为0的元素。
设置元素的边框宽度为一个较大的值，例如 20px。
设置元素的边框样式为 solid，表示实线边框。
通过调整元素的边框颜色，使得四条边中的一条边有颜色，其余三条边颜色为透明，从而形成三角形的形状。

/* 把上、右、左、三条边隐藏掉（颜色设为 transparent） */
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

45. li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法

li 与 li 之间的看不见的空白间隔是由于 HTML 中的换行符和空格字符造成的。这些空白字符会被解析为文本节点，而文本节点默认会应用一定的样式，导致 li 之间产生间隔。

解决这个问题的方法有多种，以下是一些常见的解决办法：

使用负 margin：可以将 li 的 margin 设置为负值，例如 margin-right: -4px;。这样可以抵消掉 li 之间的间隔。

ul {
  margin: 0;
  padding: 0;
}

li {
  margin-right: -4px;
  padding-right: 4px;
  list-style: none;
}

使用浮动：给 li 添加 float: left; 属性，使其浮动在一行内，消除间隔。

ul {
  margin: 0;
  padding: 0;
  overflow: auto;
}

li {
  float: left;
  list-style: none;
}

使用 Flexbox 布局：将 ul 设置为 Flex 容器，使 li 自动排列在一行内，间隔消失。

ul {
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  list-style: none;
}

46. 几种隐藏元素的方法

visibility: hidden;: 设置元素为隐藏状态，但仍然占据空间。
opacity: 0;: 将元素的透明度设置为0，使其完全透明。
position: absolute;或left: -9999px;: 将元素定位到屏幕可见区域之外，实现隐藏效果。
display: none;: 将元素设为不可见，并且不占据页面布局空间。
transform: scale(0);: 将元素的缩放比例设置为0，元素将不可见，但原始位置仍保留。
<div hidden="hidden">: 使用hidden属性来隐藏元素，与display: none;效果相同，但用于记录元素的状态。
filter: blur(0);: 使用filter属性将元素的模糊度设置为0，从视觉上使元素“消失”。

47. 网站图片文件，如何点击下载？而非点击预览

可以通过在 <a> 标签中添加 href 属性来指定图片文件的路径，并使用 download 属性来指示浏览器下载该文件而非预览。

<a href="logo.jpg" download>下载</a>

上述代码会在网页中显示一个链接，点击该链接会下载名为 logo.jpg 的图片文件。

您还可以通过添加 download 属性的值来指定下载文件的名称，如下所示：

<a href="logo.jpg" download="网站LOGO">下载</a>

上述代码会下载名为 网站LOGO.jpg 的图片文件。

48. line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

带单位：使用像素 (px) 或其他单位 (如 em) 进行赋值。当使用固定值（如 px）时，line-height 会直接采用该固定值作为行高。而当使用相对单位（如 em）时，line-height 会根据元素的父元素的字体大小 (font-size) 来计算行高，即乘以相应的倍数。
纯数字：直接使用数字进行赋值。这种情况下，数字会被传递给后代元素，作为其行高的比例因子。例如，如果父元素的行高为 1.5，而子元素的字体大小为 18px，那么子元素的行高就会被计算为 1.5 * 18 = 27px。
百分比：使用百分比进行赋值。百分比值会相对于父元素的字体大小进行计算，并将计算后的值传递给后代元素作为其行高。

49. 设置元素浮动后，该元素的 display 值会如何变化

设置元素浮动后，元素的 display 值并不会自动变成 block，而是保持原有的 display 值。
然而，浮动元素会生成一个块级框，并且脱离了正常的文档流，会影响其他元素的布局。
需要注意的是，对于一些内联元素，如 span、a 等，默认的 display 值是 inline，当设置这些内联元素为浮动时，会自动转换为 block。

50. 让页面里的字体变清晰，变细用CSS怎么做？

针对webkit内核的浏览器，ios平台：-webkit-font-smoothing : antialiased;
调整为较小的值来使字体变得更细：font-weight : 300 / lighter;

51. font-style 属性 oblique 是什么意思

font-style: oblique; 是用来设置字体样式为倾斜（oblique）的。当字体本身没有提供 italic 斜体样式时，可以使用 oblique 属性来模拟倾斜效果。

52. 一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

方案1：
- .sub { height: calc(100%-100px); }
方案2：
- .container { position:relative; }
- .sub { position: absolute; top: 100px; bottom: 0; }
方案3：
- .container { display:flex; flex-direction:column; }
- .sub { flex:1; }

53. css 的渲染层合成是什么浏览器如何创建新的渲染层

在 DOM 树中每个节点都会对应一个渲染对象（RenderObject），当它们的渲染对象处于相同的坐标空间（z 轴空间）时，就会形成一个 RenderLayers，也就是渲染层。渲染层将保证页面元素以正确的顺序堆叠，这时候就会出现层合成（composite），从而正确处理透明元素和重叠元素的显示。

浏览器创建新的渲染层的条件包括但不限于以下情况：

定位属性：元素具有 position: fixed、position: relative、position: sticky、position: absolute 等定位属性时，会创建新的渲染层。
透明度和混合模式：元素的透明度设置小于 1（opacity: 0.5）或具有非 normal 的混合模式（mix-blend-mode: multiply）时，会创建新的渲染层。
3D 变换：元素具有 3D 变换（transform: translateZ(0)）时，会创建新的渲染层。
滤镜效果：元素应用了滤镜效果（filter: blur(5px)）时，会创建新的渲染层。
遮罩效果：元素应用了遮罩效果（mask-image: url(mask.png)）时，会创建新的渲染层。
CSS 动画：元素正在进行 CSS 动画（animation、transition）时，会创建新的渲染层。

二、CSS相关