秋来九月八

一些css面试题讲解，即使没看过第一部分和第二部分也没关系，它们都是独立的。每一道题都有详细的讲解和说明，帮助你更好的理解，希望大家都能面试成功！！

前端css面试题的补充，涉及到一些基础和进阶的css知识点，一边总结一边复习中

一些常见的css面试题，也可以说是一些前端开发人员必备的css知识点，希望大家都能掌握，顺利通过面试，拿到满意的offer

最近在开发过程中，因为需要对一个icon进行旋转，而icon本身，是设置span的伪类来进行的，结果我发现无论怎么设置transform都无法使其生效。

最近在开发项目的过程中，发现了一个有趣的事情，与flex盒子有关，不知道算不算是一个bug，不过对于开发者来说，确实有些不方便，感兴趣的同学不妨也去试试。

flex布局是前端常用的布局方式之一，但在使用过程中，我们总是感觉不太方便，因为日常开发中，大多数时候，我们想要的效果是这样的即左右两端对齐并顶满，小盒子左右间距一致，并且从左至右排布。今天主要就来讨论，通过css，有几种方式来实现，以及它们的优缺点。三种方式中，第二种方式最简单，但兼容性有限；第一种方式代码量不少，兼容性适中，而且的问题严重，最后一种方式，最推荐，虽然有一些计算，并且也要合理分配宽度，但其兼容性最好，基本没啥场景不能适用，正所谓一招鲜，吃遍天。

https://www.iconfont.cn/阿里字体图标库网址选择首页顶部导航栏里面的 资源管理 —》 我的项目如果还未创建项目，请先创建项目，并添加想要的图标一.通过symbol引入svg图片（vue项目或者原生框架）第一步：拷贝项目下面生成的symbol代码：//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js第二步：加入通用css代码（引入一次就行）：<style type="text/css"> .icon {

这只是一个简单的示例，你可以根据自己的设计需求来自定义复选框的样式。通过修改上述CSS代码，你可以更改复选框的大小、颜色、形状和图标等。这种方法可以用于创建符合你网站或应用程序设计风格的自定义复选框。你可以使用CSS来自定义复选框（checkbox）的样式，使其外观更符合你的设计需求。这段CSS代码首先隐藏了原生的复选框，然后创建了一个自定义复选框的外观。当用户点击标签元素时，原生复选框将被切换。我自己用vue3写了一个checkbox组件，感兴趣的同学可以看看。，你可以根据复选框的状态来改变样式。

数据类型数字，1, 2, 13, 10px字符串，有引号字符串与无引号字符串，"foo", 'bar', baz颜色，blue, #04a3f9, rgba(255,0,0,0.5)布尔型，true, false空值，null数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serifmaps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)数字运算符+, -

前端实现动画的方式有多种，每种方式适用于不同的场景和需求。以下是一些常见的前端动画实现方式：css动画、js动画库、web动画、js帧动画等等

不需要根据内盒子的高度调整样式，但是兼容性只能满足主流浏览器及其版本，存在一定的兼容问题。transform的兼容性限制，ie9就会出现问题。的吸顶效果兼容性不好。vertical-align的兼容性还是可以的，总的来说这套方案兼容性很好。flex也存在一定的兼容性问题，不兼容ie9，兼容性不如calc。底部无论整体的内容有多高，底部始终出现在页面的最底部。float的兼容性没得说，calc是这种用法的限制。优点是兼容性较好，缺点是必须知道子组件的宽高。postion的兼容性是这几个里面最好的。

这只是一个简单的示例，你可以根据自己的需要和设计风格来调整图标的大小、颜色和其他样式属性。在上述代码中，我们使用 Unicode 字符来表示 √ 和 × 符号，并通过。你可以使用 CSS 来创建 √（勾号）和 ×（叉号）的图标，通常使用伪元素。伪元素将它们添加到元素的内容中。类，以应用 √ 和 × 的样式。和颜色以满足你的设计需求。上述 HTML 中的两个。

介绍一些常见的文本省略样式，很多面试题也会考，大家最好能记住，而不是每次要用时，去查去复制。真就成了CV程序员是吧。

前端渲染文字是最常见的应用场景，可有的时候，要求能够识别字符串中的换行。后端出来的数据可能是这样的，中间有一个回车符号，要求前端能够换行显示。如果不处理的话是没办法识别回车符号的，无法正确显示。对于前端来说，用css来控制是最简单的方式。.scf-textarea-text { white-space: pre-wrap; word-wrap: break-word; word-break: break-all;}white-space 用来控制文本字符串类的空白和换行no

在日常的开发中，我们经常在样式中使用css伪类，必要的时候，通过js操作需要改变css伪类的样式js获取css伪类通过getcomputed()方法，第一个参数dom元素，第二个参数伪类名称字符串。如下let spanBefore = document.querySelectorAll("span")[0]getComputedStyle(spanBefore,"::before")...

css改变盒子滚动条的样式谷歌浏览器如下// 改变滚动条的盒子::-webkit-scrollbar { width: 8px; background-color: #fff; }// 改变滚动条轨道::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius...