【前端面试题】：CSS篇

1.详细说明 CSS3 新特性?

选择器：CSS3 提供了更多类型的选择器，包括属性选择器、伪类选择器、伪元素选择器和多重选择器等，使得开发者能够更精准地定位和操作页面元素。

盒模型：CSS3 中的盒模型得到了扩展，引入了新的 box-sizing 属性，使得开发者能够更灵活地控制元素的尺寸和布局。

颜色与透明度：CSS3 增加了对透明度的支持，可以使用 rgba()、hsla()或 opacity 等属性来设置元素的颜色和透明度，为页面设计提供了更多可能性。

边框与背景：CSS3 允许为元素的边框添加圆角效果，使用 border-radius 属性可以创建圆形、椭圆形或具有不同角度的矩形边框。同时，CSS3 还支持为元素添加投影效果，包括阴影的颜色、大小、模糊度和偏移量等，通过 box-shadow 属性实现。

渐变效果：CSS3 引入了线性渐变和径向渐变，允许在元素的背景中创建平滑过渡的颜色效果，极大地丰富了页面的视觉效果。

文字效果：CSS3 为文字提供了更多的特效选项，例如 text-shadow 属性可以为文字添加阴影效果，使得文字更加立体和醒目。

布局与流式布局：CSS3 引入了弹性盒子布局（Flexbox）和多列布局等新的布局模型，使得开发者能够更轻松地创建灵活且自适应的页面布局。

动画与过渡：CSS3 提供了丰富的动画和过渡效果，通过使用 transition 属性，可以实现在元素状态改变时平滑地过渡属性值，如颜色、大小、位置等。而@keyframes 规则则允许创建复杂的动画效果，通过定义关键帧和过渡细节来控制动画的执行。

响应式设计：CSS3 中的媒体查询（Media Queries）允许根据不同的媒体类型和设备特性来应用不同的样式，使得页面能够在不同设备和屏幕尺寸上呈现出最佳的效果，实现响应式设计。

2.请阐述 CSS3 新增伪类并举例?

:first-of-type 和 :last-of-type：这两个伪类选择器分别匹配属于其父元素的特定类型的首个子元素和最后一个子元素。例如，使用 :p:first-of-type 可以选择父元素中的第一个 <p> 元素，并为其应用特定的样式。同样地，:p:last-of-type 可以选择最后一个 <p> 元素。

:only-of-type：这个伪类选择器用于匹配其父元素中唯一的一个特定类型的子元素。如果父元素中只有一个 <p> 元素，那么 :p:only-of-type 将选择这个元素。

:nth-child(n) 和 :nth-of-type(n)：这两个伪类允许我们选择特定元素的第 n 个子元素或同类型元素。例如，:p:nth-child(2) 将选择父元素的第二个 <p> 子元素，而 :p:nth-of-type(3) 将选择父元素中第三个 <p> 类型的元素。

:not(selector)：这个伪类用于排除不符合特定选择器的元素。它可以帮助我们排除一些不需要应用样式的元素。例如，:not(.hidden) 可以选择所有没有 .hidden 类的元素。

:checked：这个伪类选择器用于表单元素，特别是复选框和单选框。当表单元素被选中时，:checked 伪类会应用相应的样式。

:target：这个伪类选择器用于选择当前活动的锚点元素。当用户点击一个链接并导航到页面上的某个部分时，这个部分通常由带有 id 的元素表示，:target 伪类可以为这个元素应用特定的样式，从而突出显示或改变其外观。

:hover、:active 和 :focus：虽然这些伪类在 CSS2 中就已经存在，但它们在 CSS3 中得到了更广泛的支持和应用。这些伪类用于处理用户的交互状态，如鼠标悬停、元素激活和获取焦点。

3.简明说一下 CSS 中 link 与 @import 的区别和用法？

区别：

加载顺序：link在页面加载时并行加载 CSS，而@import则是在页面加载完毕后加载，可能导致页面渲染延迟。

兼容性：link兼容性广泛，几乎支持所有浏览器；@import在一些旧浏览器中可能不被支持。

DOM 操作：link引入的样式可以通过 JavaScript 操作 DOM 来改变，而@import则不行。

优先级：link引入的样式优先级高于@import。

用途：link是 HTML 标签，除了加载 CSS 外，还有其他用途（连接外部资源、定义网站属性、优化页面加载速度等）；@import仅用于 CSS 内部导入样式。

用法：
link通常直接写在 HTML 中，如<link rel="stylesheet" href="my.css">；而@import则写在<style>标签内，如@import url(my.css);。

4.css 中的选择器有哪些？说说优先级和那些属性可以继承

• 元素选择器：这是最基本的选择器，它根据 HTML 元素的名称来选择元素。例如，p 选择器会选择所有的

  元素。

• 类选择器：类选择器使用点（.）后跟类名来选择元素。例如，.my-class 会选择所有具有 class=“my-class” 的元素。
• ID 选择器：ID 选择器使用井号（#）后跟 ID 名来选择元素。例如，#my-id 会选择具有 id=“my-id” 的元素。
• 属性选择器：这种选择器根据元素的属性来选择元素。例如，[type=“text”] 会选择所有 type 属性为 text 的元素。
• 伪类选择器：伪类选择器用于选择特定状态的元素，如鼠标悬停（:hover）、活动（:active）、已访问（:visited）等。
• 伪元素选择器：伪元素选择器用于选择元素的特定部分，如 ::before 和 ::after，它们分别在元素内容的前面和后面插入内容。
• 子元素选择器：> 选择器用于选择直接的子元素。例如，div > p 会选择所有 div 元素的直接

  子元素。

• 后代选择器（空格）：空格选择器用于选择后代元素，无论它们嵌套在多少层内部。例如，div p 会选择所有 div 元素内的

  元素。

• 相邻兄弟选择器（+）：+ 选择器用于选择紧接在另一个元素后的元素。例如，div + p 会选择所有紧接在 div 元素后的

  元素。

• 通用兄弟选择器（~）：~ 选择器用于选择所有在另一个元素之后的兄弟元素。例如，div ~ p 会选择所有在 div 元素之后的

  兄弟元素。

优先级从高到低依次是：
内联样式 > ID 选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器/伪元素选择器。
同时，如果优先级相同，则后出现的规则会覆盖先出现的规则。此外，还可以使用 !important 来强制应用某个样式规则，无论其优先级如何。但是，过度使用 !important 可能会导致样式表难以维护，因此通常建议尽量避免使用。

可以继承的属性：

• 文本相关属性：如color（文本颜色）、font（字体）、text-align（文本对齐）等。
• 列表相关属性：如list-style（列表样式）。
• 可见性相关属性：如visibility（可见性）。
• 光标相关属性：如cursor（光标样式）。

5.::before 和::after 中双冒号和单冒号有什么区别、作用？

语法规范： 在 CSS2 中，伪元素使用单冒号语法，如 :before 和 :after。然而，在 CSS3 中，为了区分伪元素和伪类（如 :hover 和 :active），引入了双冒号语法，即 ::before 和 ::after。因此，从规范的角度来看，使用双冒号语法是推荐的做法，特别是在 CSS3 及以后的版本中。

浏览器兼容性： 尽管双冒号语法是推荐的做法，但由于一些低版本的浏览器（特别是 IE 浏览器）对双冒号语法不兼容，开发者在实际开发中可能仍然会使用单冒号语法以确保跨浏览器的兼容性。因此，在编写 CSS 代码时，需要考虑到目标用户群体的浏览器使用情况，以决定使用哪种语法。

6.说说你对 css 盒模型的理解?

CSS 盒模型是 CSS 技术所使用的一种思维模型，用于描述 HTML 元素在网页中的布局和显示方式。在这个模型中，每个 HTML 元素都被视为一个矩形的盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分组成。这些部分共同决定了元素在网页上的实际大小和位置。

CSS 盒模型主要分为两类：

标准盒模型（W3C 盒模型）：在这种模型中，盒子的总宽度和总高度是由内容（content）的宽度和高度、内边距（padding）、边框（border）和外边距（margin）共同决定的。具体来说，盒子的总宽度 = 内容的宽度 + 左内边距 + 右内边距 + 左边框 + 右边框；盒子的总高度也有类似的计算公式。在这种模型下，内容的宽度和高度不包括内边距和边框。

怪异盒模型（IE 盒模型）：与标准盒模型不同，怪异盒模型在计算盒子的总宽度和总高度时，将内边距（padding）和边框（border）也包含在内。也就是说，盒子的总宽度 = 内容的宽度 + 左外边距 + 右外边距（注意，这里的内容宽度实际上已经包含了内边距和边框）。这种模型在一些旧的 IE 浏览器中较为常见。

盒模型之间的转换可以通过 CSS 的box-sizing属性来实现:

• 当box-sizing设置为content-box时，盒模型表现为标准盒模型
• 当box-sizing设置为border-box时，盒模型表现为怪异盒模型

7.区分弹性布局、浮动布局和 table 布局的定义和各自的优缺点 ?

弹性布局（Flexbox Layout）

定义：弹性布局是一种现代的 CSS 布局模式，它允许你设计复杂的布局结构，而无需使用浮动或定位。Flexbox 布局模型设计用来在容器内部以最佳的方式对齐和分布空间，即使容器大小动态变化或未知，也可以高效地填充可用空间。

优点：

• 灵活性高：可以轻松地设计复杂的布局结构，如垂直居中、等分布局等。
• 响应式设计：可以很好地适应不同屏幕和设备的大小。
• 控制性强：通过控制主轴和交叉轴上的对齐方式，可以精确控制元素的位置。

缺点：

• 嵌套复杂：对于特别复杂的布局，可能需要嵌套多个 flex 容器，这可能会增加代码的复杂性。
• 浏览器兼容性：虽然现代浏览器对 Flexbox 的支持已经很好，但在一些老旧的浏览器中可能存在问题。

浮动布局（Float Layout）

定义：浮动布局是通过使用 CSS 的 float 属性，使元素向左或向右移动，其周围的元素则围绕它。浮动最初是为了解决图文混排的问题而设计的。

优点：

• 简单方便：通过简单的 CSS 设置就可以实现元素之间的位置关系调整。
• 实现多栏布局：可以轻松实现文字环绕图像等效果，适合实现多栏布局。

缺点：

• 清除浮动：需要额外处理浮动元素带来的布局问题，如父元素高度塌陷等。
• 灵活性不足：对于复杂的布局，浮动布局可能难以精确控制元素的位置和大小。

表格布局（Table Layout）

定义：表格布局是通过 HTML 的 table 元素和相关的 tr、td 等元素来组织内容，并通过 CSS 来控制其样式。

优点：

• 简单易用：表格布局对于简单的数据展示非常有效，可以轻松地创建行和列。
• 兼容性较好：老版本的浏览器对表格布局的支持相对较好。

缺点：

• 灵活性差：表格布局不适合用于复杂的页面布局，其样式和响应式设计的控制有限。
• 语义化问题：使用 table 元素进行布局可能会引发语义化问题，因为 table 元素本质上是为了展示数据而设计的。
• 资源占用：表格布局可能会占用更多的资源，导致页面渲染速度变慢。

8.怎么让一个 div 水平垂直居中？

绝对定位方法：
不确定当前 div 的宽度和高度，采用 transform: translate(-50%,-50%); 当前 div 的父级添加相对定位（position: relative;）

div {
  top: 50%;
  left: 50%;
  background: red;
  position: absolute;
  transform: translate(-50%, -50%);
}

绝对定位方法：
确定了当前 div 的宽度，margin 值为当前 div 宽度一半的负值

div {
  left: 50%;
  top: 50%;
  width: 600px;
  height: 600px;
  background: red;
  position: absolute;
  margin-left: -300px;
  margin-top: -300px;
}

绝对定位方法：
绝对定位下 top left right bottom 都设置 0

通过定位和 transform 属性，你可以将一个 div 相对于其父元素居中。

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

div.child {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 600px;
  height: 600px;
  background: red;
  position: absolute;
  margin: auto;
}

flex 布局方法：
当前 div 的父级添加 flex css 样式

虽然这种方法较老，但在某些情况下仍然有效。

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

.box {
  height: 800px;
  -webkit-display: flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid #ccc;
}
div.child {
  width: 600px;
  height: 600px;
  background-color: red;
}

table-cell 实现水平垂直居中:
table-cell middle center 组合使用

<div class="table-cell">
  <p>我爱你</p>
</div>

.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 240px;
  height: 180px;
  border: 1px solid #666;
}

绝对定位：calc() 函数动态计算实现水平垂直居中

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

.calc{
  width: 400px;
  height: 160px;
  position: relative;
  border: 1px solid #ccc;
}
.calc .child{
  width: 200px;
  height: 50px;
  position: absolute;
  left:-webkit-calc((400px - 200px)/2);
  top:-webkit-calc((160px - 50px)/2);
  left:-moz-calc((400px - 200px)/2);
  top:-moz-calc((160px - 50px)/2);
  left:calc((400px - 200px)/2);
  top:calc((160px - 50px)/2);
}　

9.css 怎么画 0.5px 的线？

使用 transform 进行缩放：
你可以创建一个 1px 的线，然后使用transform: scale()来缩小它。这种方法的问题在于，它可能不会像真正的 0.5px 线那样锐利，特别是在高 DPI 的设备上。

.line {
  height: 1px;
  background-color: black;
  transform-origin: 0 0;
  transform: scale(0.5);
}

使用 SVG：
SVG（可缩放矢量图形）允许你以像素为单位精确地绘制线条。你可以使用 SVG 的<line>元素来绘制一个 0.5px 的线。

<svg height="2" width="100%">
  <line
    x1="0"
    y1="1"
    x2="100%"
    y2="1"
    style="stroke:rgb(0,0,0);stroke-width:0.5"
  />
</svg>

使用 border：
在某些情况下，你可以使用元素的边框来模拟 0.5px 的线。例如，你可以设置一个元素的border-bottom为 0.5px，但需要注意的是，这通常也不会在所有浏览器中精确呈现为 0.5px。

.line {
  border-bottom: 0.5px solid black;
}

使用视窗单位：
在某些情况下，使用视窗单位（vw、vh、vmin、vmax）可能是一种解决方案。这些单位是基于视窗（浏览器窗口）的大小来计算的。但是，这种方法可能不适用于所有场景，并且线的实际宽度可能会随着视窗大小的改变而改变。

10.用 css 画一个三角形？

原理:
采用的是均分原理,把矩形分为 4 等份,这 4 等份其实都是边框。核心就是给块级元素设置宽高为 0,设置边框的宽度,不需要显示的边框使用透明色;例如：

.square {
  width: 0;
  height: 0;
  margin: 0 auto;
  border: 6px solid transparent;
  border-top: 6px solid red;
}

11.如何实现一个品字布局？

HTML 结构：

<div id="box">
  <div class="top"></div>
  <div class="bottom">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

CSS 样式：

.top {
  width: 50%;
  height: 50vh;
  margin: 0 auto;
  background-color: #409eff;
}
.bottom {
  overflow: hidden;
}
.bottom div {
  width: 50%;
  float: left;
  height: 50vh;
}
.left {
  background-color: #67c23a;
}
.right {
  background-color: #f56c6c;
}

12.如何使用 flex 布局实现三点筛子？

要使用 Flex 布局实现一个类似于三点筛子的布局，可以使用display: flex属性以及justify-content和align-items来调整子元素的位置。以下是一个简单的示例，它创建一个包含三个点的筛子布局：

HTML 部分：

<div class="dice">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

CSS 部分：

.dice {
    width: 100px;
    height: 100px;
    display: flex;
}
.dot {
    width: 30px;
    height: 30px;
    background: brown;
}
.dot:nth-child(1){
	align-self:flex-end;
}
.dot:nth-child(2){
	align-self:center;
}

13.CSS 里的 visibility 属性有个 collapse 属性值，在不同浏览器显示下会有什么区别？

在 Firefox 中：当元素的 visibility 属性设置为 collapse 时，如果该元素是表格相关的元素（如 table, row, rowgroup, column, colgroup 等），那么这个元素将不再显示，并且它所占用的空间会被释放，就像使用了 display: none 一样。但对于非表格元素，collapse 的表现与 hidden 相同，元素不可见但仍占用空间。

在 Chrome 和 Safari 中：visibility: collapse 的表现与 visibility: hidden 没有区别。无论元素是否与表格相关，它都会变得不可见，但仍然会占用页面上的空间。

在 IE 和 Edge 中：在这些浏览器中，visibility: collapse 的表现通常与 visibility: hidden 一样，元素不可见且仍占用空间。但是，具体行为可能因浏览器版本而异。

14.几种定位布局 position 的 fixed、 relative 和 absolute 分别是相对于谁进行定位的？

static：默认文档流；

relative: 相对定位，相对于自身位置；

absolute：绝对定位，相对于非 static 父元素进行定位，脱离文档流；

fixed：固定定位，脱离文档流；

15.display:none 和 visibility：hidden 的区别？

空间占用：display:none不占用空间，而visibility:hidden占用空间。

布局影响：display:none不会影响布局，visibility:hidden可能会影响布局。

计数队列：display:none不会影响计数队列，visibility:hidden则可能影响计数队列。

CSS动画与过渡：display:none不支持transition，visibility:hidden支持transition。

可访问性：display:none会使元素完全不显示，不利于SEO和可访问性，而visibility:hidden虽然隐藏了元素，但仍保留其在DOM中的位置，有助于SEO和可访问性

16.rgba 和 opacity 的透明效果有什么不同？

作用范围：rgba只作用于元素的颜色或背景色，而opacity作用于整个元素及其内容。

透明度继承：opacity的透明度会被子级元素继承，而rgba设置的透明度不会影响子元素，除非它们也使用了rgba且指定了相同的透明度

应用场景：rgba适合于需要精确控制颜色透明度的场景，特别是背景色与其他元素颜色相同时。opacity则适用于需要整体调整元素透明度的场景，如滤镜效果或模态框

17.分析比较 opacity:0、visibility:hidden、display:none 优势和使用场景？

结构

• display: none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
• visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
• opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承

• display: none 和 opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
• visibility: hidden：是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显示。

性能

• display: none: 修改元素会造成文档回流,读屏器不会读取 display: none 元素内容，性能消耗较大
• visibility: hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取 visibility: hidden 元素内容
• opacity: 0:修改元素会造成重绘，性能消耗较少

18.display 的 block、inline 和 inline-block 的区别？

block： 会独占一行，多个元素会另起一行，可以设置 width、height、margin 和 padding 属性；

inline： 元素不会独占一行，设置 width、height 属性无效。但可以设置水平方向的 margin 和 padding 属性，不能设置垂直方向的 padding 和 margin；

inline-block： 将对象设置为 inline 对象，但对象的内容作为 block 对象呈现，之后的内联对象会被排列在同一行内。

19.px、em、rem 有什么区别？

定义：

px指的是像素，相对于显示器分辨率而定。适用于边框等不变化的属性；

em是相对于父节点的字体大小进行变化。适用于响应式布局；

rem是相对于根节点的字体大小进行变化。适用于响应式布局；
区别：
px为固定值，设置完成后不会随着屏幕大小的变化而改变，是固定值；

em是相对于父节点的 font-size 大小的改变，与其他节点无关；

rem是相对于 html 根元素的 font-size 大小的改变，与其他节点无关；

20.1rem、1em、1vh、1px、vmin、vmax 各自代表的含义？

以下是 1rem、1em、1vh、1px、vmin、vmax 各自代表的含义：

1rem：

• rem 是 CSS3 新增的一个相对单位，全称为“root em”。
• 使用 rem 为元素设定字体大小时，其大小是相对于 HTML 根元素的字体大小。即 1rem 等于根元素元素的 font-size 大小。
• rem 在响应式布局中特别有用，因为只需要修改根元素的字体大小，就可以按比例调整整个页面的元素大小。

1em：

• em 是一个相对长度单位，其大小相对于当前对象内文本的字体尺寸。
• 如果当前元素的字体大小没有被人为设置，那么它会继承其父元素的字体大小。例如，如果父元素的 font-size 为 20px，且子元素没有设置 font-size，那么子元素的 1em 就等于 20px。
• em 常用于设置相对于父元素字体大小的元素尺寸，例如宽度、高度、内边距和外边距等。

1vh：

• vh 是 Viewport Height 的缩写，代表视口的高度。
• 1vh 等于视口高度的 1%。这意味着如果视口的高度是 800px，那么 1vh 就等于 8px。
• vh 单位常用于响应式设计中，以确保元素的大小能够根据视口的高度进行动态调整。

1px：

• px 是像素（pixel）的缩写，是一个绝对长度单位。
• 它是相对于显示器屏幕分辨率而言的，代表屏幕上的一个像素点。
• 在 CSS 中，px 用于精确控制元素的大小和位置。

vmin：

• vmin 是 Viewport Minimum 的缩写，表示视口（Viewport）的最小尺寸。
• 它是视口宽度和高度中较小的那个值，以视口单位的百分比来表示。例如，如果视口的宽度为 1920px，而高度为 1080px，那么 1vmin= 1080px/100 = 10.8px。
• vmin 常用于确保元素在较小的视口中不会过大，从而提供更好的用户体验。

vmax：

• vmax 是 Viewport Maximum 的缩写，表示视口（Viewport）的最大尺寸。
• 它是视口宽度和高度中的较大的那个值，以视口单位的百分比来表示；例如，如果视口的宽度为 1920px，而高度为 1080px，那么 1vmin= 1920px/100 = 19.2px。
• vmax 常用于响应式设计中，以确保元素的大小能够随着视口尺寸的变化而自适应调整。

21.简述你对 BFC、 IFC、GFC、FFC 规范的理解?

BFC、IFC、GFC、FFC 是不同领域中的规范，它们各自具有特定的触发条件和应用场景。以下是对这四个规范的理解及其触发条件和应用的简述：

BFC（Block Formatting Context）：

理解：BFC 是 CSS 布局中的一个独立渲染区域，用于隔离内部元素与外部元素的布局。在 BFC 中，元素按照特定的规则进行布局，不会影响到其他 BFC 或外部元素。

触发条件：BFC 的触发条件包括：

• 根元素，即 HTML 元素;
• 元素浮动（float 不为 none）;
• overflow 属性不为 visible 的块元素等;
• 元素定位（position 为 absolute 或 fixed）;
• 元素转换类型（如 display 为 inline-block、table-cell、table-caption）;

布局规则

• 内部的 Box 会在垂直方向，一个接一个地放置。

• Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。

• 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

• BFC 的区域不会与 float box 重叠。

• BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

应用：

• BFC 常用于解决浮动元素引起的布局问题，如清除浮动、防止 margin 重叠等。
• 通过创建 BFC，可以确保内部元素与外部元素的布局互不干扰，实现更精准的页面布局。

IFC（Inline Formatting Contexts）：

理解：意为“内联格式化上下文”,IFC 中，盒子依次水平放置，从包含块的顶部开始。
**触发条件:**块级元素中仅包含内联级别元素
布局规则:

• 在一个行内格式化上下文中，盒是一个接一个水平放置
• 这些盒之间的水平 margin，border 和 padding 都有效
• 盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐
• 行内块级元素之间默认留有间隙
• 矩形区域包含着来自一行的盒子叫做 line box，line box 的宽度由浮动情况和它的包含块决定，高度由 line-height 的计算结果决定;

应用：

• 水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过设置父容器 text-align:center 则可以使其水平居中。
• 垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC（GridLayout Formatting Context）：

理解： 将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格；
**触发条件:**当为一个元素设置 display 值为 grid 的时候，此元素将会获得一个独立的渲染区域
布局规则: 通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间;

FFC（Flex Formatting Context）：

理解： 一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕，使用 Flex box 布局；
触发条件：当 display 的值为 flex 或 inline-flex 时，将生成弹性容器（Flex Containers）, 一个弹性容器为其内容建立了一个新的弹性格式化上下文环境;

布局规则：

• 设置为 flex 的容器被渲染为一个块级元素
• 设置为 inline-flex 的容器则渲染为一个行内元素
• 弹性容器中的每一个子元素都是一个弹性项目。弹性项目可以是任意数量的。弹性容器外和弹性项目内的一切元素都不受影响。简单地说，Flexbox 定义了弹性容器内弹性项目该如何布局

22.什么是 CSS 媒体查询？

在 CSS 中，媒体查询用于根据不同的屏幕尺寸设置不同的样式。可以使用媒体查询来设置移动端的样式，例如调整字体大小、元素的宽度和高度、图片的缩放比例等。

媒体查询语法
媒体查询的语法如下：

@media media-type and (media-feature-rule) {
/_ CSS rules go here _/
}

其中，media-type 是指定媒体类型的关键字，例如 “screen” 表示屏幕，“print” 表示打印，“speech” 表示语音朗读等。media-feature-rule 是指定媒体特征的条件，例如 “width <= 500px” 表示屏幕宽度小于 500px。

常用媒体查询
以下是一些常用的媒体查询：

@media screen and (max-width: 500px) { ... }：表示当屏幕宽度小于 500px 时，应用 CSS 规则。
@media screen and (min-width: 500px) { ... }：表示当屏幕宽度大于或等于 500px 时，应用 CSS 规则。
@media screen and (orientation: landscape) { ... }：表示当屏幕方向为横向时，应用 CSS 规则。
@media screen and (orientation: portrait) { ... }：表示当屏幕方向为纵向时，应用 CSS 规则。

设置移动端字体大小
以下是设置移动端字体大小的示例：

@media screen and (max-width: 500px) {
  body {
    font-size: 1.5rem;
  }
}

在上述代码中，我们使用 @media 查询来设置移动端的字体大小。当屏幕宽度小于 500px 时，body 元素的字体大小将设置为 1.5rem。

设置移动端图片缩放比例
以下是设置移动端图片缩放比例的示例：

@media screen and (max-width: 500px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

在上述代码中，我们使用 @media 查询来设置移动端图片的缩放比例。当屏幕宽度小于 500px 时，img 元素将尽可能保持原始宽度，高度会根据宽度自动调整。

其他用法

• 设置元素的宽度和高度
• 设置元素的颜色和背景色
• 设置元素的边框和阴影
• 设置元素的动画和过渡

23.实现响应式布局的方法？

使用媒体查询（Media Queries）：

• 媒体查询是 CSS3 中引入的一个功能，它允许你根据设备的特性（如视口宽度、屏幕比例、分辨率等）来应用不同的 CSS 样式。通过媒体查询，你可以为不同的屏幕尺寸或设备类型定义不同的样式规则。
• 例如，你可以使用max-width或min-width来指定不同屏幕尺寸下的样式变化。

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

流式布局（Fluid Layout）：

• 流式布局使用相对单位（如百分比%）来定义元素的宽度，而不是使用固定像素值。这样，元素的宽度就可以随着视口的变化而自动调整。
• 这种方法使得布局更加灵活，能够适应不同大小的屏幕。

.container {
  width: 100%;
}

.box {
  width: 50%; /* 使用百分比作为宽度 */
}

弹性布局（Flexbox）：

• 弹性布局（也称为 Flexbox）是 CSS3 引入的一种新的布局模式，它允许你在不同的屏幕和设备尺寸上更容易地对齐、分布和排列空间。
• 使用 Flexbox，你可以创建灵活的容器，其中的项目可以随着屏幕尺寸的变化而动态地调整其位置、大小和对齐方式。

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
}

.flex-item {
  flex: 1 1 200px; /* 弹性增长因子、弹性缩小因子和基础大小 */
}

网格布局（Grid Layout）：

• CSS Grid 布局是一个二维布局系统，可以同时处理行和列，使得复杂的布局成为可能。
• 通过定义网格容器和网格项，你可以创建出灵活且响应式的布局结构，使得内容可以根据屏幕大小进行适应和调整。

.grid-container {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(200px, 1fr)
  ); /* 根据视口大小自动调整列数 */
}

.grid-item {
  /* 网格项的样式 */
}

使用视窗单位（Viewport Units）：

• 视窗单位（如vw, vh, vmin, vmax）允许你根据视口（浏览器窗口）的大小来定义元素的尺寸。
• 例如，1vw等于视口宽度的 1%，1vh等于视口高度的 1%。这种单位使得元素的大小可以直接与视口的大小相关联，从而实现响应式效果。

.box {
  width: 50vw; /* 宽度为视口宽度的50% */
  height: 50vh; /* 高度为视口高度的50% */
}

图片和多媒体的响应式处理：

• 对于图片和多媒体内容，可以使用max-width: 100%和height: auto来确保图片不会超出其容器的边界，并且能够自适应大小。
• 还可以利用srcset和sizes属性为图片提供不同分辨率的版本，以便在不同屏幕尺寸和分辨率下加载最合适的图片。

使用前端框架：

• 有许多前端框架（如 Bootstrap、Foundation 等）已经内置了响应式布局的功能和组件，可以大大简化响应式设计的实现过程。

24.解释一下什么是 Css Sprite，以及如何在页面或网站中使用它 ?

CSS Sprite（精灵图）是一种网页图片应用处理方式，它将多个小图标或背景图像整合到一张大图中。然后，利用 CSS 的“background-image”、“background-position”等属性，将需要显示的图像部分“定位”到需要的位置上。
在页面或网站中使用 CSS Sprite 的基本步骤如下：

制作 Sprite 图：首先，你需要将所有要用到的小图标或者背景图像整合到一张大图中。通常，这些小图标会按照一定的规律排列，比如横向或纵向排列。

编写 CSS 代码：接下来，你需要为每一个小图标编写 CSS 代码，指定它的background-image属性为 Sprite 图的大图，并通过background-position属性来定位需要显示的部分。例如：

.icon1 {
  width: 30px;
  height: 30px;
  background-image: url("sprite.png");
  background-position: 0 0;
}

.icon2 {
  width: 30px;
  height: 30px;
  background-image: url("sprite.png");
  background-position: -30px 0;
}

在上面的代码中，.icon1和.icon2分别代表两个不同的图标。它们的background-image属性都指向同一张 Sprite 图，但是background-position属性的值不同，这样就可以显示出 Sprite 图中的不同部分。

在 HTML 中使用：最后，在你的 HTML 代码中，只需要为需要显示图标的元素添加相应的类名即可。例如：

<div class="icon1"></div>
<div class="icon2"></div>

优点：

• 减少 HTTP 请求，极大提高页面加载速度
• 增加图片信息重复度，提高压缩比，减少图片大小
• 更换风格方便，只需要在一张或几张图片上修改颜色或样式即可

缺点：

• 图片合并麻烦
• 维护麻烦

CSS 部分：

.dice {
  display: flex;
  justify-content: space-around; /* 子元素水平均匀分布 */
  align-items: center; /* 子元素垂直居中 */
  height: 100px; /* 根据需要设置筛子容器的高度 */
  width: 100px; /* 根据需要设置筛子容器宽度 */
  border: 2px solid black; /* 添加边框以更清晰地看到容器 */
  border-radius: 50%; /* 设置为圆形，以模拟筛子 */
}

.dot {
  width: 20px; /* 点的大小 */
  height: 20px; /* 点的大小 */
  background-color: black; /* 点的颜色 */
  border-radius: 50%; /* 设置为圆形，以模拟点 */
}

25.如何解决 IE6 双倍 margin 的 Bug?

产生原因： 在 IE6 中，当为一个向左浮动的元素添加左外边距，或者为一个向右浮动的元素添加右外边距时，这个外边距值将会是设置的值的两倍；

解决方法： 使用 display: inline;

.element {
  float: left;
  width: 100px;
  height: 100px;
  display: inline;
  margin-right: 10px;
}

26.style 标签写在 body 前和 body 后有什么区别及优缺点？

style 标签写在 body 前和 body 后的主要区别在于它们对浏览器渲染页面过程的影响，这导致了它们各自具有一些优点和缺点。

style 标签写在 body 前：

优点：

• 利于浏览器逐步渲染：当 style 标签在 body 标签前时，浏览器可以提前加载并解析 CSS 样式。这样在解析和渲染 HTML 元素时，可以直接应用相应的样式，使得页面能够逐步地、有序地显示出来。
• 减少重绘和重排：由于浏览器在渲染页面时已经有了完整的样式信息，因此可以更有效地避免因为样式改变而引发的重绘和重排，这有助于提升页面渲染的性能。

缺点：

如果样式表内容过大，可能会影响页面的加载速度，尤其是在网络状况不佳的情况下。

style 标签写在 body 后：

优点：

• 内容优先加载：当 style 标签在 body 后时，浏览器会首先加载和渲染页面的 HTML 内容，然后再加载样式。这可以确保用户在没有样式的情况下，仍然能看到页面的基本内容。

缺点：

• 可能出现 FOUC 现象：在样式表加载并应用之前，页面可能会以无样式或默认样式显示，然后在样式加载完成后突然改变样式，这被称为 FOUC（Flash of Unstyled Content）现象。这可能会给用户带来不好的体验，尤其是在样式变化较大的情况下。
• 可能导致页面加载速度变慢：浏览器需要等待 HTML 内容全部加载完成后，才开始加载样式表。如果样式表较大或网络状况不佳，可能会导致页面加载速度变慢。
• 可能增加重绘和重排的次数：当样式表加载并应用时，可能会引发大量的重绘和重排，尤其是在样式改变较多时，这会降低页面渲染的性能。

27.在网页中的应该使用奇数还是偶数的字体？为什么呢？

在网页设计中，通常推荐使用偶数字号的字体。这主要基于以下几个原因：

像素对齐：在像素屏幕上，字体的显示是以像素为单位的。偶数字号的字体更容易在像素边界上对齐，避免了字体在渲染时可能出现的半透明样式，从而提高了字体的清晰度和可读性。相比之下，奇数字号的字体在像素对齐方面可能会存在问题，导致字体显示不够清晰。

适应网页布局：网页设计中经常使用网格布局、栅格系统等结构化布局方式，这些布局方式通常采用偶数像素值。因此，使用偶数字号的字体可以更容易地适应这些布局要求，使页面更加美观和一致。

浏览器兼容性：一些旧的或特定的浏览器（如 IE6）在处理奇数字号的字体时可能会出现问题，将其渲染为附近的偶数字号。为了避免这种不一致性，使用偶数字号的字体可以提高跨浏览器的兼容性。

视觉平衡：对于汉字来说，偶数字号的字体在视觉上更容易达到平衡。例如，一个 12px 宽的汉字，在去掉 1 像素的间距后，实际填充的像素宽度是 11px，这样汉字的中竖线左右平分，显得更为均衡和美观。

比例关系：偶数字号更容易与页面中其他部分的字号构成一个比例关系。这使得在设计网页时，能够更方便地调整不同元素之间的字号大小，保持整体设计的协调性和一致性。

28.position 跟 display、overflow、float 这些特性相互叠加后会怎么样？

CSS 中的position、display、overflow和float属性在相互叠加时会产生一系列的效果和行为，这些效果取决于它们各自的值以及它们如何相互作用。以下是一些关于这些属性如何相互影响的概述：

position 与 display：

• 当元素的display值为none时，position属性（无论是static、relative、absolute还是fixed）都不会产生任何效果，因为元素不会被显示。
• 如果元素的position值为absolute或fixed，它将从文档流中脱离出来，并根据其最近的已定位祖先元素（而非视口）进行定位。此时，display属性的值可能会受到影响，因为某些类型的元素（如行内元素）在绝对定位时可能会表现得像块级元素。

position 与 float：

• 当元素的position值为absolute或fixed时，float属性将不起作用。这是因为绝对定位使元素脱离了正常的文档流，而浮动是相对于正常文档流中的元素而言的。
• 如果元素没有绝对定位，并且其float值不是none，那么它将浮动到其父元素的左侧或右侧，同时其他内容会围绕它流动。此时，元素的display值可能会根据浮动行为进行调整（例如，行内元素可能会变为块级元素）。

display 与 float：

• 浮动元素会生成一个块级框（或类似的框），无论它原本是什么类型的元素（行内、块级等）。这意味着，即使一个元素原本是行内元素（如span），当它浮动时，它也会表现得像块级元素一样具有宽度和高度。
• 某些display值（如inline-block）允许元素既像行内元素一样与其他元素并排显示，又像块级元素一样设置宽度和高度。当这样的元素浮动时，它们的行为类似于块级元素。

overflow 与其他属性：

• overflow属性规定了当一个块级元素（如<div>）的内容超出其规定的宽度或高度时应该如何处理。它有几个值可选，包括visible（默认，内容不会被裁剪）、hidden（内容会被裁剪，且不会显示滚动条）、scroll（内容会被裁剪，但会显示滚动条以便查看剩余内容）和auto（浏览器将决定是否显示滚动条）。
• 当元素的overflow值为hidden时，任何溢出该元素的内容（包括子元素和背景）都将被裁剪掉，并且不会显示滚动条。这可以与其他属性（如position、display和float）结合使用来控制元素的布局和可见性。
• 值得注意的是，overflow属性本身并不直接影响position、display或float的行为；相反，它更多地是处理这些属性导致的布局结果中可能出现的溢出情况。

29.如何解决移动端分辨率适配？

视口单位（Viewport Units）:

• vw (viewport width): 相对于视口的宽度，1vw 等于视口宽度的 1%。
• vh (viewport height): 相对于视口的高度，1vh 等于视口高度的 1%。
• vmin 和 vmax: 分别是视口宽度和高度中较小的那个的百分比，和较大的那个的百分比。

使用视口单位可以使得元素的大小直接与视口尺寸相关联，从而实现跨设备的适配。

媒体查询（Media Queries）:
使用媒体查询可以根据设备的特性（如宽度、高度、像素比等）应用不同的 CSS 样式。通过定义不同屏幕尺寸下的样式规则，可以实现更精细的适配。

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

弹性盒子布局（Flexbox）:
Flexbox 允许你以灵活的方式布局、对齐和分发空间在容器中的项，不管容器的大小如何变化。它尤其适用于响应式设计，可以很容易地适应不同屏幕尺寸和分辨率。

.container {
  display: flex;
  flex-direction: column;
}

网格布局（Grid）:
CSS Grid 是一个二维布局系统，可以同时处理行和列，适用于复杂的页面布局。通过定义网格容器和网格项，可以很容易地实现响应式布局。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

rem 单位:
rem是一个相对单位，它是相对于根元素<html>的font-size。通过动态设置根元素的font-size（通常基于视口宽度），可以使得其他使用rem单位的元素大小随视口变化而变化。

html {
  font-size: calc(100vw / 37.5); /* 例如，为了使1rem等于10px在375px宽的设备上 */
}

30.元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

31.CSS 中 1 像素问题是什么？有哪些解决方案？

1px 边框问题由来：
苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个物理像素使用，即使用 2x2 个像素显示原来 1 个物理像素显示的内容，从而让 UI 显示更精致清晰，这 2x2 个像素叫做逻辑像素。
像这种像素比（像素比（即 dpr）＝ 物理像素 / 逻辑像素）为 2 的视网膜屏幕也被称为二倍屏，目前市面上还有像素比更高的三倍屏、四倍屏。
而 CSS 中 1px 指的是物理像素，因此，设置为 1px 的边框在 dpr = 2 的视网膜屏幕中实际占用了 2 个逻辑像素的宽度，这就导致了界面边框变粗的视觉体验。

解决方案：使用 transform 解决
通过设置元素的 box-sizing 为 border-box，然后构建伪元素，再使用 CSS3 的 transform 缩放，这是目前市面上最受推崇的解决方法。这种方法可以满足所有的场景，而且修改灵活，唯一的缺陷是，对于已使用伪元素的元素要多嵌套一个无用元素。具体的实现如下：

.one-pixel-border {
  position: relative;
  box-sizing: border-box;
}

.one-pixel-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
}

这样就可以得到 0.5px 的边框。
还可以结合媒体查询（@media）解决不同 dpr 值屏幕的边框问题，如下：

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...;
}

@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...;
}

当然还有不少其他的解决方案：border-image、background-image、viewport + rem + js、box-shadow 等，但都有各自的缺点，不进行推荐，此处也不做详细介绍。

32.如何解决移动端 Retina 屏 1px 像素问题?

主要可以从 CSS 样式和图像处理两方面入手。以下是一些具体的解决策略：

使用媒体查询和 transform 属性：

• 通过媒体查询检测设备的devicePixelRatio，当值为 2 或 3 时，应用不同的样式规则。
• 使用 CSS 的transform: scale(0.5)属性，将元素的边框缩小到原来的一半，以此模拟 1px 的效果。这种方法适用于需要精细控制边框的场景。

使用视口单位(viewport units)和 rem：

• 设置视口宽度，并根据devicePixelRatio动态调整 rem 的基准值。
• 通过 rem 单位设置边框大小，以适应不同分辨率的屏幕。这种方法可以实现全局的适配，但需要对整个项目的样式进行重构。

使用边框图片：

• 将 1px 的边框制作成图片，并通过 CSS 的background-image属性应用到元素上。
• 通过调整图片的尺寸和位置，实现精确的边框效果。这种方法适用于需要复杂边框样式的场景。

使用 SVG 或 Canvas 绘图：

• 利用 SVG 或 Canvas 的矢量绘图能力，绘制出精确的 1px 边框。
• 这种方法可以确保边框在任何分辨率下都保持清晰，但可能需要更多的编程工作。

伪元素和 box-shadow：

• 使用 CSS 的伪元素（如:before或:after）和box-shadow属性来模拟边框效果。
• 通过调整box-shadow的模糊半径和颜色，可以创建出类似 1px 边框的视觉效果。

33.为什么 height:100%会无效？

对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。
原因是如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为 auto，因为解释成了 auto，所以无法参与计算。
使用绝对定位的元素会有计算值，即使祖先元素的 height 计算为 auto 也是如此。

34.CSS 加载会造成阻塞吗？

先说下结论：

• css 加载不会阻塞 DOM 树的解析
• css 加载会阻塞 DOM 树的渲染
• css 加载会阻塞后面 js 语句的执行

为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高 css 加载速度，比如可以使用以下几种方法:

• 使用 CDN(因为 CDN 会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间)
• 对 css 进行压缩(可以用很多打包工具，比如 webpack,gulp 等，也可以通过开启 gzip 压缩)
• 合理的使用缓存(设置 cache-control,expires,以及 E-tag 都是不错的，不过要注意一个问题，就是文件更新后，你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)
• 少 http 请求数，将多个 css 文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

35.脱离文档流有哪些方法？

**float：**使用 float 脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
**absolute：**absolute 称为绝对定位，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的 position 必须是非 static 定位的（static 是默认定位方式）。
fixed: 固定定位，完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于 html）

36.z-index 属性什么时候会失效？

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index 值越大就越是在上层。z-index 元素的 position 属性需要是 relative，absolute 或是 fixed。

z-index 属性在下列情况下会失效：

• 父元素 position 为 relative 时，子元素的 z-index 失效。解决：父元素 position 改为 absolute 或 static；
• 元素没有设置 position 属性为非 static 属性。解决：设置该元素的 position 属性为 relative，absolute 或是 fixed 中的一种；
• 元素在设置 z-index 的同时还设置了 float 浮动。解决：float 去除，改为 display：inline-block；

37 使用 CSS 预处理器的优缺点有哪些?

优点：

• 变量和混合：CSS 预处理器允许你定义可重用的 CSS 规则和值。例如，你可以定义一个颜色变量，然后在整个样式表中使用这个变量。如果需要改变颜色，只需改变变量的值即可。这极大地提高了代码的可维护性和复用性。
• 嵌套语法：CSS 预处理器支持选择器的嵌套，这使得 CSS 代码更加结构化，更易于阅读和维护。
• 编程特性：CSS 预处理器支持一些编程特性，如条件语句、循环、函数等，使得你可以编写更加动态的 CSS 代码。
• 模块化：CSS 预处理器支持导入其他 CSS 文件，这使得你可以将 CSS 代码分割成多个小的、可重用的模块，提高代码的可维护性。
• 厂商前缀自动化：一些 CSS 预处理器可以自动添加厂商前缀，这有助于解决 CSS3 在不同浏览器下的兼容性问题。

缺点：

• 需要编译：CSS 预处理器的代码需要编译成 CSS 代码才能在浏览器中运行。这可能会增加开发流程中的一步，需要额外的时间和工具来处理编译过程。
• 学习成本：对于初学者来说，CSS 预处理器引入的新语法和特性可能需要一定的学习成本。
• 可能降低对最终代码的控制力：CSS 预处理器的高级特性可能导致开发者对最终生成的 CSS 代码的控制力降低。
• 维护门槛提高：使用 CSS 预处理器可能会提高维护门槛，因为团队需要具备一定的预处理器知识才能有效地进行维护和修改。

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

理解： 扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便 。本质上，预处理是 Css 的超集 。 包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件
有哪些：sass,less,stylus

比较 less 和 sass：

相同点：

首先 sass 和 less 都是 css 的预编译处理语言，它们引入了 mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript 赋值等加快了 css 开发效率,当然这两者都可以配合 gulp 和 grunt 等前端构建工具使用

区别：

• less 是基于 JavaScript 的在客户端处理 所以安装的时候用 npm
• sass 是基于 ruby 所以在服务器处理

less 优缺点

优点： less 简单,易上手;属于 css 的基础拓展;less 更适合静态界面写样式时

缺点： JavaScript 引擎需要额外的时间来处理代码然后输出修改过的 CSS 到浏览器

sass 优缺点

优点： 功能强大,更加丰富的拓展 sass 适合游戏或者其他做效果时需要逻辑来更换不同样式

缺点： 复杂对于新手比较不友好

39.CSSOM 树和 DOM 树是同时解析的吗？

浏览器会下载 HTML 解析页面生成 DOM 树，遇到 CSS 标签就开始解析 CSS，这个过程不会阻塞，但是如果遇到了 JS 脚本，此时假如 CSSOM 还没有构建完，需要等待 CSSOM 构建完，再去执行 JS 脚本，然后再执行 DOM 解析，此时会阻塞。

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

回流是指当页面的布局发生变化时，浏览器需要重新计算渲染树中的元素的位置和大小，并更新布局。这个过程涉及到遍历渲染树，计算每个元素的几何属性，然后重新绘制页面。由于回流会涉及到整个页面或部分页面的重新渲染，因此是一种较为昂贵的操作，会消耗大量的性能。

重绘是指当页面的样式发生变化，但不影响其几何属性时，浏览器只需要重新绘制元素的外观，而不需要重新布局页面。重绘的代价相对较小，因为它不涉及元素的位置和大小的改变。

以下是一些可能触发回流和重绘的场景：

回流触发时机：

• DOM 结构发生改变，如添加或删除节点。
• 布局发生改变，如修改元素的宽度、高度、内边距、外边距、字体大小等。
• 窗口大小发生改变。
• 调用 getComputedStyle 方法获取元素的尺寸或位置信息。
• 内容发生变化，如文本变化或图片被另一个不同尺寸的图片所代替。
• 页面一开始渲染的时候。

重绘触发时机：

• 修改网页内容的样式时，比如文字颜色、背景颜色、边框颜色、文本方向的修改等。
• 触发回流一定会触发重绘。

理解回流和重绘对于优化网页性能非常重要。通过减少回流和重绘的次数，合理使用 CSS 和 JavaScript，可以提高页面的响应速度和用户体验。例如，避免设置多项内联样式和避免使用 CSS 的 JavaScript 表达式等方法，都可以有效地减少回流和重绘的发生。

41.Atom CSS 是什么？有哪些优缺点？

Atom CSS：原子 CSS，意思是一个类只干一件事。
不同于大家常用的 BEM 这类规则，原子 css 就是拆分，所有 CSS 类都有一个唯一的 CSS 规则
优点：

• 减少了 css 体积，提高了 css 复用
• 减少起名的复杂度

缺点：

• 增加了记忆成本。将 css 拆分为原子之后，你势必要记住一些 class 才能书写，哪怕 tailwindcss 提供了完善的工具链，你写 background，也要记住开头是 bg。
• 增加了 html 结构的复杂性。当整个 dom 都是这样 class 名，势必会带来调试的麻烦，有的时候很难定位具体 css 问题
• 仍需要起 class 名。对于大部分属性而言，你可以只用到 center,auto，100%，这些值，但是有时候你仍需要设定不一样的参数值，例如 left，top，这时候你还需要起一个 class 名；

42.CSS 动画和 JS 实现动画分别有哪些优缺点？

CSS 动画

优点

• 浏览器可以对动画进行优化
• 代码相对简单,性能调优方向固定
• 对于帧速表现不好的低版本浏览器，CSS3 可以做到自然降级，而 JS 则需要撰写额外代码

缺点

• 运行过程控制较弱,无法附加事件绑定回调函数
• 代码冗长，想用 CSS 实现稍微复杂一点动画,最后 CSS 代码都会变得非常笨重

JS 动画

优点

• 控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的;
• 动画效果比 css3 动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有 js 动画才能完成;
• CSS3 有兼容性问题，而 JS 大多时候没有兼容性问题;

缺点

• 代码的复杂度高于 CSS 动画;
• JavaScript 在浏览器的主线程中运行，而主线程中还有其它需要运行的 JavaScript 脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况;