【面试】909- 59 道 CSS 面试题(附答案)

Love The Way You Lie 2022-11-13 12:28 285阅读 0赞

![2d48a79430b96c3d98f076c08dd4901c.png][]

CSS部分的面试题主要考察应试者对CSS基础概念模型的理解，例如文档流、盒模型、浮动、定位、选择器权重、样式继承等。很多应试者认为CSS很简单，没多少内容，面试就是面试 JavaScript部分的内容，这些观点是错误的，面试的第一关往往会考察应试者对CSS的掌握情况。因此，CSS也常常是应试者掉入的第一个陷阱。

**1、CSS有哪些基本选择器？它们的权重是如何表示的？**

CSS基本选择器有类选择器、属性选择器和ID选择器。

CSS选择器的权重预示着CSS选择器样式渲染的先后顺序，元素样式渲染时，权重高的选择器样式会覆盖权重低的选择器样式。

通常将权重分为4个等级，可用0.0.0.0来表示这4个等级。

！important关键字优先级最高。

注意：！importont井非选择器，而是针对选择器内的单一样式设置的。当然，不同选择器内应用 ！important的权重也是不一样的，例如，在id选择器内的！important关键字权重要高于类选择器内的 ！important关键字权重，即下面所说的选择器权重组合。

内联样式（非元素器）的优先级可看成1.0.0.0。

ID选择器的优先级为0.1.0.0。

类属性选择器、属性选择器、伪类的优先级为0.0.1.0。

元素选择器、伪元素选择器的优先级为0.0.0.1。

通配符选择器对特殊性没有任何贡献值。

当把选择器组合使用的时候，相应的层级权重也会递增，例如\# id .class的权重为0.1.1.0。

**2、CSS的引入方式有哪些？ink和@ import的区别是什么？**

CSS有3种引入方式。

*  行内式是指将样式写在元素的 style属性内。
 *  内嵌式是指将样式写在 style元素内。
 *  外链式是指通过link标签，引入CSS文件内的样式。

通过link标签引入样式与通过@ import方法引入样式有如下区别。

（1）加载资源的限制。

link是 XHTML的标签，除了加载CSS文件外，还可以加载RSS等其他事务，如加载模板等。

@ import只能加载CSS文件。

（2）加载方式。

如果用link引用CSS，在页面载入时同时加载，即同步加载。

如果用@ import引用CSS，则需要等到网页完全载入后，再加载CSS文件，即异步加载。

（3）兼容性。

link是 XHTML的标签，没有兼容问题。

@ import是在CSS2.1中提出的，不支持低版本的浏览器。

（4）改变样式

link的标签是DOM元素，支持使用 JavaScript控制DOM和修改样式；@ import是种方法，不支持控制DOM和修改样式。

**3、浮动元素引起的问题和解决方法是什么？**

引起的问题有如下几个。

（1）父元素的高度无法被撑开，影响与父元素同级的元素。

（2）与元素同级的非浮动元素会紧随其后（类似遮盖现象）。

（3）如果一个元素浮动，则该元素之前的元素也需要浮动；否则，会影响页面显示的结构（即通常所说的串行现象）。

解决方法如下：

（1）为父元素设置固定高度。

（2）为父元素设置 overflow:hidden即可清除浮动，让父元素的高度被撑开。

（3）用 clear:both样式属性清除元素浮动。

注意：如果只有左浮动或只有右浮动，可以单独设置 clear:left或 clear:right，但是设置clear:both则都可以解决，所以此方法在工作中用得更多。

（4）外墙法是指在父元素外面，添加“一道墙”，设置属性 clear:both

（5）内墙法是指在父元素内部，浮动元素的最后面，添加“一道墙”，设置属性 clear:both

（6）伪元素是指为了少创建元素，对父元素添加afer伪元素，设置属性 content：""；display ：block；clear:both。

注意：这里所说的少创建元素，实际上并没有少创建，添加的伪元素也是元素，只不过没有写在HTML文档中而已。

（7）使用通用类 clearfix, clearfix的实现如下：

clearfix:after {  content " "；display:block;clear:both;}

注意：推荐以上这种方式，因为 clearfix已经应用在各大CSS框架（如 Bootstrap等）中，并成为行业的默认规范。

**4、position的值分别是相对于哪个位置定位的？**

relative表示相对定位，相对于自己本身所在正常文档流中的位置进行定位。absolute表示绝对定位，相对于最近一级（从直接父级元素往上数，直到根元素）定位，相对于 statIc的父元素进行定位。

fixed用于生成绝对定位，相对于浏览器窗口或 frame进行定位。

statIc是默认值，没有定位，元素出现在正常的文档流中。

sticky是生成黏性定位的元素，容器的位置根据正常文档流计算得出。

注意：CSS3的新增属性有点类似于 relative与 fixed的结合体。如果目标区域在屏幕中可见，表现为 relative；如果目标区域在屏幕中不可见，表现为fixed。

**5、请说明 position:absolute和float属性的异同。**

共同点是对内联元素设置float和 absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点是float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止， absolute会覆盖文档流中的其他元素，即遮盖现象。

**6、CSS选择器（符）有哪些？**

（1）id选择器（\#myld）。

（2）类选择器（ .my ClassName）。

（3）标签选择器（div,p,h1）

（4）相邻选择器（h1+p）

（5）子选择器（ul>li）

（6）后代选择器（li a）

（7）通配符选择器（\*）

（8）属性选择器（ button\[disabled="true"\]）。

（9）伪类选择器（ a:hover、 li:nth- child）表示一种状态。

（10）伪元素选择器（li:before、“：after”、“：first- letter”、“：first-line”、“；selecton”）表示文档某个部分的表现。

注意：在CSS3规范中，为了区别伪元素和伪类，CSS3建议伪类用单冒号“："，伪元素用双冒号"：："。

**7、CSS的哪些样式可以继承？哪些不可以继承？**

可继承的样式有font- size font-family color, UL LI DL DD DT。

不可继承的样式有 border、 padding, margin, width、 height。

注意：为了方便辨识，与字体相关的样式通常可以继承，与尺寸相关的样式通常不能继承。

**8、CSS优先级如何排序？**

优先级如下:

！important>style（内联）>ld（权重100）> class（权重10）>标签（权重1）。同类别的样式中，后面的会覆盖前面的。

**9、HTML是什么？CSS是什么？JavaScript是什么？**

（1）HTML（ Hyper Text Markup Language，超文本标记语言）是做网站时使用的些文本标记标签，比如div、span等

（2）CSS（ Cascading Style Sheet，层叠样式表）是做网站时为美化网站而为标签添加的样式，比如 background（背景）、 color（字体颜色） height（高度）、widh（宽度）等。

（3） JavaScript是网站中实现前后台交互效果、网页动画效果的一种开发语言，比如鼠标单击（ click）事件、前后台数据请求（Ajax）等。

**10、为什么要初始化CSS？**

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。

当然，初始化样式有时会对SEO产生一定的影响，但鱼和熊掌不可兼得，所以在力求影响最小的情况下初始化CSS。

最简单的初始化方法就是：\*\{ padding：0；margin：0；\}

**11、如何居中div？如何居中一个浮动元素？**

确定容器的宽高，例如宽400px、高200px的div.设置层的外边距。

div
    { 
    float:left；
    width：400px；
    height：200px；
    margin：-100px 0 0-200px；
    /*注意，由于左上外边距优先级高于右下外边距优先级，因此，还可以简化设置 margin：-150px-250px；*/
    position:relative；left：50%；top：50%；
    /*为方便看效果，添加一种背景色*/
    background-color:pink
    }

**12、构成CSS的基本语句是什么？**

构成CSS的基本语句如下。

选择器{属性名称1：属性值1；属性名称2：属性值2；}

例如

div{ margin-top：20px；border：2px solid #red；}

**13、display有哪些值？说明它们的作用。**

display的值有 block、none, inline、 inline- block、list-item、 table和 inherit。其作用如下。

block是指块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 none是指元素不会显示，已脱离文档流。

inline是指行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

inline- block是指默认宽度为内容宽度，可以设置宽高，同行显示。

list-item是指像块类型元素一样显示，并添加样式列表标记。

注意：例如，用div模拟li元素<ul>< div style=" display:list-item：">有课前端网</d></ul>。

table是指此元素会作为块级表格显示。

inherit是指从父元素继承 display属性的值。

**14、简要描述块级元素和行内元素的区别。**

块级元素的前后都会自动换行。默认情况下，块级元素会独占一行。例如<p><h1-h6><div>都是块级元素，当显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。

行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。例如<a><span>等，对于行内元素，不能设置其高度和宽度。

还有一种元素是行内块级元素，比如<img>< input>元素等。这些元素可以和其他行内元素位于同一行，同时可以设置其高度和宽度。

**15、如何用DIV+CSS实现3栏布局（左右固定200pX，中间自适应）？**

具体代码如下：

html

<div class="container">
    <div class="main">
    <h2>有课前端网</h2>
    </div>
    <div class="left">左边内容</div>
    < div class="right" >右边内容</div>
    </dv>

CSS

.container div {height：200px；}
    .container{ padding：0 200px；}
    .main,.left,.right{position:relative；float:left；}
    .left.right{width：200px；}
    .main{ width：100%；background:yellow；}
    .left {background:blue：margin-left：-100%；left：-200px；}
    .right {background:green；margin-left：-200px；left：200px；}

**16、解释浮动及其工作原理。**

浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素（父元素）或另一个浮动元素的边框为止。要想使元素浮动，必须为元素设置一个宽度（ width）。虽然浮动元素已不在文档流中，但是它浮动后所处的位置依然在浮动之前的水平方向上。

因为浮动元素不在文档流中，所以文档流中的块元素表现得就像浮动元素不存在一样，下面的元素会填补原来的位置。

有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时，要考虑浮动元素的边界，围绕浮动元素放置内联元素。也可以把浮动元素想象成被块元素忽略的元素，而内联元素会关注的元素。

**17、解释一下 CSS Sprite，以及如何在页面或网站中使用它。**

CSS Sprite其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“ background- image"“ background- repeat”“ background- position”的组合进行背景定位， background- position可以用数字精确地定位出背景图片的位置。

注意：在高级浏览器中，可以基于图片的bose64编码存储，将图片与其他类型的文件打包。

**18、在书写高效CSS时有哪些问题需要考虑？**

（1）样式，从右向左解析一个选择器

（2）类型选择器的速度，ID选择器最快， Universal（通配符\*）最慢。对于常用的4种类型选择器，解析速度由快到慢依次是ID、 class, tag和 universal。

（3）不要用标签限制ID选择器（如：ul\#main- navigation\{\}，ID已经是唯一的，不需要Tag来限制，这样做会让选择器变慢）。

（4）后代选择器最糟糕（换句话说， html body ul li a\{\}这个选择器是很低效的）。

（5）想清楚你的需求，再去书写选择器。

（6）CSS3选择器（如nth- child）能够漂亮地定位我们想要的元素，又能保证CSS整洁易读。然而，这些神奇的选择器会浪费很多的浏览器资源。

（7）我们知道ID选择器的速度最快，但是如果都用ID选择器，会降低代码的可读性和可维护性等。在大型项目中，相对于使用ID选择器提升速度，代码的可读性和可维护性带来的收益更大。

**19、说出几种解决IE6 Bug的方法。**

解决方案如下：

（1）双边距问题，是使用fLoat引起的。

解决方法是使用 display:inline。

（2）3像素问题，是使用float引起的。

解决方法是使用 margin- right：-3px。

（3）超链接 hover伪类样式，单击后失效。

解决方法是使用以下正确的书写顺序：L→V→H→A（link, visited, hover.， active）。

（4）z- index问题。

解决方法是给父级添加 position：relative

（5）PNG图片半透明问题。

解决方法是使用 JavaScript代码库，或使用IE滤镜

注意：在使用E滤镜解决PNG图片透明度的时候，在1E6中，会对事件产生影响。

**20、页面重构怎样操作？**

编写CSS，让页面结构更合理化，提升用户体验，达到良好的页面效果并提升性能

**21、display:none和 visibility:hidden的区别是什么？**

display:none隐藏对应的元素，在文档流中不再给它分配空间，它各边的元素会合拢，即脱离文档流。

visibility:hidden隐藏对应的元素，但是在文档流中仍保留原来的空间。

**22、内联元素可以实现浮动吗？**

在CSS中，任何元素都可以浮动。不论浮动元素本身是何种元素，都会生成个块级框。因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。

**23、简要描述CSS中 content属性的作用。**

content属性与：before及：after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器，为页面元素插入编号。比如，查看如下代码。

body{
    counter-reset:chapter；
    }
     h1:before{
     content："第" counter（ chapter）"章"
    }
    h1{
    counter-increment:chapter：
    }
    <h1></h1>
    <h1></h1>
    <h1></h1>

使用 content属性，并结合 :before选择器和计数器 counter，可以在每个<h1>元素前插入新的内容。

**24、如何定义高度很小的容器？**

因为有一个默认的行高，所以在IE6下无法定义小高度的容器。

两种解决方案分别是 overflow:hidden或font-size：容器高度px

**25、如何在图片下方设置几像素的空白间隙？**

定义img为 display:block，或定义父容器为font-size：0。

**26、如何解决IE6双倍 margin的Bug？**

使用 display:inline

**27、如何让超出宽度的文字显示为省略号？**

输入 overflow:hidden；width:xxx；white-space:nowrap；

text-overflow:ellipsis。

**28、如何使英文单词发生词内断行？**

输入word-wrap:break-word。

**29、如何实现IE6下的 position:fxed？**

具体代码如下：

html_{overflow:hidden；}
     body_{overflow:auto；height：100%：}
    .fixed{position:fixed；
    _position:absolute；
    left:0；
    top:0；
    padding：10px；
    background：#000；
    }

**30、如何让min- height兼容IE6？**

具体代码如下。

.min-height{
    min-height：100px；
    _height：100px；
    background：red；
    }

**31、已知高度的容器如何在页面中水平垂直居中？**

具体代码如下。

**32、px和em的区别是什么？**

px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是国定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px，所以未经调整的浏览器都符合lem=16px，那么12px=0.75em，10px=0.625em。

与cm对应的另一个长度单位是rem，是指相对于根元素（通常是HTML元素）字体的大小。

**33、什么叫优雅降级和渐进增强？两者有什么区别？**

优雅降级 graceful degradation是指一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

渐进增强 progressive enhancement是指针对低版本浏览器构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进并追加功能，以达到更好的用户体验。

两者的区别如下。

（1）优雅降级从复杂的现状开始，并试图减少用户体验的供给。

（2）渐进增强则从一个非常基础并且能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

（3）降级（功能衰减）意味着往回看，而渐进增强则意味着朝前看，同时保诬其根基处于安全地带。

**34、网页制作会用到哪些图片格式？**

用于网页制作的主流图像格式有JPG、PNG、GIF等。

JPG：压缩率高，文件小，最常用。

PNG：支持无损压缩，色彩损失小，保真度高，文件稍大。

GIF：支持动画显示，但只支持256色显示，目前已经被Fash大量取代。

**35、CSS的 content属性有什么作用？有什么应用？**

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

**36、对行内元素设置 margin-top和 margin- bottom是否起作用？**

不起作用（需要注意行内元素的替换元素img、 Input，它们是行内元素，但是可以设置它们的宽度和高度，并且 margin属性也对它们起作用， margin-op和 margin- botton有着类似于 inline- block的行为）

**37、div+css的布局较table布局有什么优点？**

（1）改版的时候更方便，只须改动CSS文件。

（2）页面加载速度更快、结构清晰、页面简洁。

（3）表现与结构分离。

（4）搜索引擎优化（SEO）更友好，排名更靠前。

**38、如果设置<p>的font-sze为10rem，那么当用户重置或拖曳浏览器窗口时，它的文本会不会受到影响？**

不会

**39、谈谈你对BFC规范的理解。**

BFC（ Block Formatting Context）指块级格式化上下文，即一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中，两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin会发生折叠。

BFC决定元素如何对其内容进行布局，也决定与其他元素的关系和相互作用。

**40、谈谈你对C规范的理解。**

IFC（ Inline Formatting Context）指内联格式化上下文，IFC的线框（ line box）高度由其包含行内元素中最高的实际高度计算而来（不受竖直方向的 padding/margin的影响）。IFC中的线框一般左右都贴紧整个IFC，但是会被foat元素扰乱。同一个IFC下的多个线框高度不同。

IFC中是不可能有块级元素的，当插入块级元素时（如在p中插入div），会产生两个匿名块，两者与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。

**41、谈谈你对GFC规范的理解。**

GFC（ GridLayout Formatting Context）指网格布局格式化上下文，即当把一个的 display值设为grid的时候，此元素将会获得一个独立的渲染区域。可以通过在网格容器（ grid container）上定义网格定义行（ grid definition row）和网格定义列（grid definition column），在网格项目（ grid item）上定义网格行（ grid row）和网格列（grid column）来为每一个网格项目定义位置和空间。

**42、谈谈你对FFC规范的理解。**

FFC（ Flex Formatting Context）指自适应格式化上下文，即 display值为fex或lne-flex的元素将会生成自适应容器。伸缩容器中的每一个子元素都是一个伸缩单元。伸缩单元可以是任意数量的。伸缩单元内和伸缩容器外的一切元素都不受影响。简单地说， Flexbox定义了伸缩容器内伸缩单元的布局。

**43、访问超链接后 hover样式就不出现的原因是什么？应该如何解决？**

因为访问过的超链接样式覆盖了原有的 hover和 active伪类选择器样式，解决方法是将CSS属性的排列顺序改为L→V→H→A（link, visited, hover, active）。

**44、什么是外边距重叠？重叠的结果是什么？**

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

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

（1）当两个相邻的外边距都是正数时，折叠的结果是它们两者中较大的值

（2）当两个相邻的外边距都是负数时，折叠的结果是两者中绝对值较大的值。

（3）当两个外边距一正一负时，折叠的结果是两者相加的和。

**45、rgba0和 opacity的透明效果有什么不同？**

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

**46、CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么？**

垂直方向的属性是 line-height.水平方向的属性是 letter-spacing。

**47、你知道哪些关于 letter- spacing的妙用？**

可以用于消除 inline- block元素间的换行符空格间隙

**48、有什么方式可以对一个DOM设置它的CSS？**

有以下三种方式。

*  外链式，即通过link标签引入一个外部CSS文件中。
 *  内嵌式，即将CSS代码写在 style标签内。
 *  行内式，即将CSS代码写在元素的 style属性中。

**49、在CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？**

最基本的方式如下。

设置 display属性为none，或者设置 visibility属性为 hidden技巧性的方式如下。

设置宽高为0，透明度为0，设置z- index位置为-1000。

**50、常用的块属性标签及其特征有哪些？**

常用块标签有div、hl、h6、ol、ul、li、d、 table、p、br、form。块标签的特征有独占一行，换行显示，可以设置宽、高，块可以套块和行。

**51、常用的行内属性标签及其特征有哪些？**

行标签有span、a、img、var、em, strong、 textarea、 select、 option、 input.行标签的特征有在行内显示，内容撑开宽、高，不可以设置宽、高（img, input、 textarea等除外），行只能套用行标签。

**52、浏览器标准模式和怪异模式之间的区别是什么？**

它们的区别是盒子模型的渲染模式不同。

可以使用 window. top document compatMode判断当前模式为何种模式结果为 Back Compat，表示怪异模式结果为 CSSICompat，表示标准模式。

**53、如何避免文档流中的空白符合并现象？**

空白符合并是标准文档流的特征之一，可以通过设置 white-spac修改这一特征，属性值如下。

pre表示不会合并空白符，渲染换行符，不会自动换行，相当于pre元素。

pre-wrap表示不会合并空白符，渲染换行符，自动换行pre-line表示合并空白符，渲染换行符，自动换行。

nowrap表示合并空白符，不会渲染换行符，不会自动换行。

normal表示默认值，按照文档流特点渲染，合并空白符，不会渲染换行符，自动换行。

**54、常见的兼容性问题有哪些？**

PNG24位的图片在IE6浏览器上出现背景，解决方案是改成PNG8，也可以引段脚本进行处理浏览器默认的 margin和 padding不同。解决方案是用一个全局的\*\{ margin：0 padding：0；\}来统一它们。

IE6双边距Bug是指在块属性标签float后又有横行的 margin时，在IE6中显示的margin比设置的大浮动IE产生的双倍距离（IE6的双边距问题是指在IE6下，如果对元素设置了浮动，同时又设置了 margin-left或 margin- right, margin的值会加倍）

#box{ float:left；width：10px；margin：00 100px；}

这种情况下IE会产生20px的距离，解决方案是在float的标签样式控制中加入display:inline，将其转换为行内属性（这个符号只会被IE6识别）。

用渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙地使用“\\9”这一标记，将IE浏览器从所有情况中分离出来。然后，再次使用“+”将IE8和I7、IE6分离开，这样IE8就能被独立识别。

CSS

.bb{
    background-color:#f1ee18；/所有识别*/ 
    background- color：#00deff\9；/IE6、7、8识别”/
    + background- color：#a200ff；/*E6、7识别*/ 
    background- color：#1e0bdl；/"IE6识别”/
    }

怪异模式问题是指漏写DTD声明， Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用\[hml5\]

推荐的写法是'< doctype html>'上下 margin重合的问题IE和FF中都存在，相邻两个div的 margIn-et和 margin- right不会重合，但是margin-top和 margin- bottom会重合。

解决方法是养成良好的代码编写习惯，同时采用 margin-top或者同时采用 margin- bottom。

**55、透明度具有继承性，如何取消透明度的继承？**

使用rgba给元素的背景设置透明度的方式，来替代使用opacity设置元素透明度的方式，解决子元素继承父元素透明度的问题。

**56、CSS中，自适应的单位都有哪些？**

自适应的单位有以下几个

*  百分比：%
 *  相对于视口宽度的单位：ww
 *  相对于视口高度的单位：vh
 *  相对于视口宽度或者高度（取决于哪个小）的单位：Vm
 *  相对于父元素字体大小的单位：em
 *  相对于根元素字体大小的单位：rem

**57、说说rem和em的区别。**

它们都是相对单位

*  rem表示相对于根元素的字体大小。
 *  em表示相对于父元素的字体大小

**58、什么是FOUC？如何避免FOUC？**

FOUC即无样式内容闪烁（ Flash Of Unstyled Content），是在IE下通过 @import方式导入CSS文件引起的，如：< style type=" text/css" media="all"@ Dimporturl('demo.css）；</style>

IE会首先加载整个HTML文档的DOM，然后再导入外部的CSS文件。因此，在页面DOM加载完成到CSS导入完成中间，有一段时间页面上的内容是没有样式的，这段时间的长短跟网速和电脑速度都有关系。

解决方法是在<head>之间加入一个<link>或< script>标签

**59、说说 display:none和 visibility:hidden的区别。**

display:none隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当它从来都不存在。

visibility:hidden隐藏对应的元素，但是在文档布局中仍保留原来的空间。

本文完~

![136a2a716f521d273b3c40c759cc294c.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 100[\+篇原创系列汇总][Link 1]

![35d4270a7faa8725388e8e1ba3688e5e.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 100+ 篇原创文章

[2d48a79430b96c3d98f076c08dd4901c.png]: /images/20221022/0adaba670441459995f890be602195d1.png
[136a2a716f521d273b3c40c759cc294c.gif]: /images/20221022/ac046ea1ebce40d4a32cfdd6df18dbdb.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[35d4270a7faa8725388e8e1ba3688e5e.gif]: /images/20221022/261bee9779fa4e958fb06c6b4a6c96a8.png