为什么要初始化 CSS 样式?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法： * { padding: 0; margin: 0; } （强烈不建议）
使用 normalize.css

CSS 优先级算法如何计算？

优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;

优先级为:

同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
!important > id > class > tag
!important 比内联优先级高

🔥 min-width、max-width、width 的包含（优先级）关系

属性的含义：

min-width 限制元素的最小宽度
max-width 限制元素的最大宽度
width 元素的宽度

三者之间的优先级：

min-width 和 max-width 的优先级都高于 width。即使 width 后面加上 !important。

当浏览器缩小导致元素宽度小于 min-width 时，元素的 width 就会被 min-width 的值取代，浏览器出现滚动条来容纳元素。
当浏览器放大导致元素的宽度大于 max-width 时，元素的 width 就会被 max-width 值取代。
当 min-width 值大于 max-width 时，则以 min-width 值为准。

所以三者优先级排序： min-width > max-width > width

当 min-width > width 时，以 min-width 为主

<style>
  .box {
    min-width: 600px;
    max-width: 1000px;
    /*当width值设为<600px时，盒子始终以宽600px呈现*/
    /*当width值设为>1000px时，盒子始终以宽1000px呈现*/
    width: 200px;
    height: 100px;
    background-color: red;
  }
</style>
<body>
  <div class="box"></div>
  <div class="item"></div>
</body>

当 max-width < width 时，以 max-width 为主

<style>
  .box {
    min-width: 600px;
    max-width: 1000px;
    /*当浏览器缩放过程中，计算得到width值<min-width时，则宽度为600px*/
    /*当浏览器放大程中，计算得到width值>max-width时，则宽度为1000px*/
    width: 100%;
    height: 100px;
    background-color: red;
  }
</style>
<body>
  <div class="box"></div>
  <div class="item"></div>
</body>

以下样式导致 span 文字的颜色是什么

.a1 { color: red; }
.a2 { color: blue; }
.a3 { color: yellow; }

则 test 的颜色是： A. red B. blue C.yellow D. 不确定

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

对于 height 属性来说是的。
对于 margin-top/bottom(padding-top/bottom) 来讲不是，而是相对于容器的宽度计算的

BFC（Block Formating Context）

理解
- 拥有一些特性，可以利用其帮助我们布局
触发条件
- 根元素，即 HTML 元素
- float: left | right
- position: absolute | fixed
- display: inline-block | table-cell | flex | inline-flex
- overflow: hidden | auto | scroll
解决问题
- 清除浮动：
  - 子浮动，父 overflow: hidden（缺点：阴影和下拉菜单）
- div 垂直方向 margin 上下合并：
  - 其中一个包 div ，设置 overflow：hidden
- div 垂直方向 margin 内外合并：
  - 父容器 1px 透明上边框
  - 父容器 overflow: hidden
- 右侧 div 自适应：左边浮动，右边设置 overflow：hidden

🔥 请解释一下为什么需要清除浮动？清除浮动的方式

清除浮动

原本作用
- 浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。
带来的影响
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响（div忽视它的存在，但文字环绕），为了解决这些问题，此时就需要在该元素中清除浮动。准确地说，并不是清除浮动，而是清除浮动后造成的影响
本质
- 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为 0 的问题。

方法

额外标签 clear: both
BFC父元素 overflow：hidden

伪元素

.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

🔥 你对 line-height 是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是 height 和 line-height，没有定义 height 属性，最终其表现作用一定是 line-height 。

🔥 display: none、visibility: hidden 和 opacity: 0 的区别？

display: none （不占空间，不能点击）（回流+重绘）
visibility: hidden （占据空间，不可点击）（重绘）
opacity: 0（占据空间，可以点击）（重建图层，性能较高）

🔥 浏览器如何解析 CSS 选择器的，换句话说 CSS 的匹配规则是什么？

从右向左，提高查找效率

浏览器根据选择器过滤掉 DOM 中的元素，并向上遍历其父元素以确定匹配项。
选择器链的长度越短，浏览器可以越快地确定该元素是否与选择器匹配。

（div p em）

如果从左到右，有无数多个 div 都得向下查找，效率低
反之，只有当当前元素是 em 时，才会向上查找，效率高

例如：

使用这个选择器 p span，浏览器首先找到所有元素，然后一直向上遍历其父元素直到根以找到元素。
对于特定的，一旦找到 ，它就知道  匹配并可以停止匹配。

响应式设计原理

通过媒体查询检测不同设备屏幕尺寸做处理

文字超长的省略号写法

单行文本省略

.single-line-ellipsis {
  width: 200px; /* 设置一个固定宽度，根据实际需求调整 */
  white-space: nowrap; /* 强制文本在一行内显示 */
  overflow: hidden; /* 超出宽度的部分隐藏 */
  text-overflow: ellipsis; /* 用省略号表示超出的文本 */
}

多行文本省略

.multi-line-ellipsis {
  width: 200px; /* 设置一个固定宽度，根据实际需求调整 */
  overflow: hidden; /* 超出宽度的部分隐藏 */
  text-overflow: ellipsis; /* 这行对于多行省略号只是辅助，主要靠下面的属性 */
  display: -webkit-box; /* 开启弹性伸缩盒子模型 */
  -webkit-line-clamp: 3; /* 显示的行数，超出部分用省略号表示，这里设置为 3 行，可根据需求修改 */
  -webkit-box-orient: vertical; /* 子元素垂直排列 */
}

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

场景：
- 有时，在写页面的时候，会需要将这个块状元素横排显示，此时就需要将 display 属性设置为 inline-block，此时问题出现了，在两个元素之间会出现大约8px左右的空白间隙。
原因：
- 浏览器的默认行为是把 inline 元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码 <li> 换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
解决：
- 给 ul 标签设置 font-size: 0; 并为 li 元素重新设置 font-size: XXpx;

🔥 图片为什么有左右上下间隙,怎么去除?

原因：

左右：因为 img 是 inline-block 行内块元素，行内元素之间有『换行（回车），空格，tab』时会产生左右间隙
上下：行内元素默认与父容器基线对齐，而基线与父容器底部有一定间隙，所以上下图片间有间隙。

解决办法：

移除上下间隙：
- img 本身设置 display: block;
- 父元素设置 font-size: 0; （基线与字体大小有关，字体为零，基线间就没距离了）
- img 本身设置 vertical-align: bottom;（让inline-block的img与每行的底部对齐）
移除左右间距：
- 行内元素间不要有换行，连成一行写消除间隙
- 第一行结尾写上  。即利用注释消除间距
- 父元素 font-size 设置 0

Chrome 中文字体小于 12px 文字

老版：webkit-text-size-adjust: none
新版：webkit-transform: scale(.8, .8)

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

🔥 style 标签写在 body 后与 body 前（head）有什么区别？

🔥 样式脚本书写顺序

⭐️ 为何要将 JS 放在 HTML 底部？

已知如下代码，如何修改才能让图片宽度为 300px ？

注意下面代码不可修改。

<img src="1.jpg" style="width:480px!important;">

方案1:

max-width: 300px;

方案2:

transform: scale(0.625);
transform-origin: top left;

textarea 如何禁止拉伸

使用 CSS 样式可以避免拉伸

textarea { resize: none; }

🔥 有没有使用过 css variable，它解决了哪些问题

css 变量减少样式重复定义，比如同一个颜色值要在多个地方重复使用，以前通过 less 和 sass 预处理做到，现在 css 变量也可以做到，方便维护，提高可读性

:root {
	--bgcolor: blue;
	--color: red;
}
p {
	color: var(--color);
}
div {
	backgroung-color: var(--bgcolor);
	color: var(--color)
}

方便在 js 中使用

// 设置变量
document.getElementById("box").style.setPropertyValue('--color', 'pink')
// 读取变量
doucment.getElementById('box').style.getPropertyValue('--color').trim()
// 删除变量
document.getElementById('box').style.removeProperty('--color')

🔥 '+' 与 '~' 选择器有什么不同

+ 选择器匹配紧邻的兄弟元素

~ 选择器匹配随后的所有兄弟元素

🔥 CSS 动画与 JS 动画哪个性能更好

事实上，大多数场景下，基于 CSS 的动画几乎是跟 JavaScript 动画表现一致——至少在 FireFox 上是如此。一些基于 Javascript 的动画库，像 GSAP 和 Velocity.JS，甚至声称他们在性能上可以做得比原生 CSS transition/animation 更好。这是可能的，因为在重绘事件发生之前，CSS transition 和 animation 在主的 UI 线程仅仅是重新采集元素的样式，这跟通过 requestAnimationFrame() 回调获取重新采集元素样式是一样的，也是在下一次重绘之前触发。假如二者都是在主 UI 线程创建的动画，那它们在性能方面没有差异。

但我们仍然认为 CSS 动画是更好的选择。为什么？关键是只要动画涉及的属性不引起 reflow（重新布局）（参考 CSS trigger 获得更多信息），我们可以把采样操作移出主线程。最常见的属性是 CSS transform。如果一个元素被提升为一个 layer，transform 属性动画就可以在 GPU 中进行。这意味着更好地性能，特别是在移动设备上。在 OffMainThreadCompositing 上寻找更多细节。

来源：

CSS 动画与 JavaScript 动画的性能 - Web 性能 | MDN

CSS3 的动画：
1. 在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化（比如专门新建一个图层用来跑动画）
2. 代码相对简单
3. 在动画控制上不够灵活
4. 兼容性不好
5. 部分动画功能无法实现（如滚动动画，视差滚动等）
JavaScript 的动画：
1. 正好弥补了 css 缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容 IE6
2. 功能强大
3. 如果动画比较复杂，在使用 requestAnimationFrame 时，回调函数中执行了大量的计算或操作，导致了每帧的执行时间过长。这样就会使得浏览器无法在每一帧中及时完成绘制，从而出现卡顿的情况。
总结：
- 对于一些复杂控制的动画，使用 javascript 会比较好。而在实现一些小的交互动效的时候，可以多考虑 CSS

为什么会发生样式抖动

因为没有指定元素具体高度和宽度，比如数据还没有加载进来时元素高度是 100px(假设这里是 100px)，数据加载进来后，因为有了数据，然后元素被撑大，所有出现了抖动

css 如何匹配前 N 个子元素及最后 N 个子元素

如何匹配最前三个子元素: :nth-child(-n+3)
如何匹配最后三个子元素: :nth-last-child(-n+3)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item:nth-child(-n + 3) {
        color: red;
      }
      .item:nth-last-child(-n + 3) {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>