1.css sprite（雪碧图、精灵图）是什么,有什么优缺点

  • 就是将页面上需要的多个小图标放在同一张图片上，通过background-positon和background-size调整。测量位置时要把雪碧图缩小一半后再测量x，y偏移量，才能得到准确位置。

优点

  • 以减少页面为了请求这些图片的请求数，只需要请求一次就可以。提高页面加载速度。

缺点

  • 图片合并麻烦。你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内不会出现不必要的背景。
  • 维护麻烦，修改一个图片可能需要从新布局整个图片样式。

2.页面导入样式时，使用link和@import有什么区别
link：

    <link rel="stylesheet" href="css/base.css">

@import：

<style>

　　@import(&#39;相对路径下的文件全名&#39;);

　　p{color:red;}

</style>
  • link属于XHTML标签，除了加载CSS外，还有rss、rel指定候选样式等作用。@import是CSS提供的，只能用于加载CSS;
  • 页面被加载的时，link会同时被加载，最大限度支持并行下载，而@import引用的CSS会等到页面被加载完再加载;
  • @import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
  • 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式

3.什么是FOUC?如何避免
Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。需要将css样式的引入放在head。js脚本放在末尾。

4.说一下什么是BFC
块级格式化上下文(block formatting context)
文档流分为：浮动流、定位流、普通的标准流，而普通标准流其实就是BFC中的FC。Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
常见的FC：BFC(块级格式化上下文)、IFC(行级格式上下文)、GFC(网络布局格式上下文)、和FFC(自适应格式上下文)。
BFC（Block formatting context ）“块级格式上下文”。 是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。

5.如何创建BFC

  • 1：根元素，即html元素
  • 2：float的值不为none
  • 3：overflow的值不为visible
  • 4：display的值为inline-block、inline-flex、flex、flow-root、table-caption、table-cell。
  • 5：position的值为absolute或者fixed
    https://blog.csdn.net/sinat_36422236/article/details/88763187
    bfc的应用，清楚浮动（bfc高度包括浮动元素）、解决margin塌陷（分为两个bfc）、两栏布局自适应（分为两个bfc）

6.如何清除浮动
当元素设置float浮动后，该元素会脱离文档并向左向右浮动，直到碰到父元素或者另一个浮动元素，浮动元素会造成父元素高度塌陷，所以设置完浮动之后需要进行清除浮动。

  • BFC方法：
  • 给父容器加上overflow:hidden，加上之后，形成BFC，需要计算超出的大小来隐藏，所以父容器会撑开放入子元素，同时计算浮动的子元素。
  • 缺点：但是一旦子元素大小超过父容器大小部分会被隐藏。
  • 使用带有clear属性的空元素
  • 在浮动元素后面添加一个不浮动的空元素，同时要给空元素加上:style="clear:both。子元素出现在浮动元素后面，父容器必须考虑浮动子元素的位置，所以显示出来就正常了。"
  • 使用伪元素::after
  • 和上面的原理一致
    https://blog.nowcoder.net/n/433781bb061e48c998a0b076b6719aa0

7. ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用
双冒号是在当前规范中引入的，用于区分伪类和伪元素。
对于CSS2之前已有的伪元素，比如:before和:after，单冒号和双冒号的写法::before和::after作用是一样的。
两个伪元素选择器分别在元素内容前面和后面插入内容。不在dom中出现，仅在css渲染层出现。

8.伪类和伪元素？
伪类可以理解为是一种状态，而伪元素则代表一些实实在在存在的元素，但是它们都是抽象刻画的，游离于标准文档之外。
伪类存在的意义是为了通过选择器，格式化dom树以外的信息（:visited,:link），以及不能被常规CSS选择器获取到的信息（比如说获取第一个子元素，常规css选择器不行,可以用：first-child）。
伪类常用的有first-child、last-child、nth-child、first-of-type(父元素第一个特定的子元素)、last-of-type、nth-of-type、lang、focus、lvha（a标签四个）

伪元素可以创建一些文档语言无法创建的虚拟元素，比如文档语言没有一种机制可以描述元素内容第一个字母或者第一行，但是伪元素可以::first-letter,::first-line。同时伪元素还可以创建文档中不存在的内容比如说::after,::before。

伪元素主要有：::after,::before,::first-letter,::first-line,::selection

9.元素隐藏方法和区别

  • display：none元素不可见，不占据空间，DOM可以访问
  • visibility:hidden元素不可见，不能点击，但占据空间，可以使用。
  • opacity：0 元素不可见、可以点击，占据空间，可以使用。
  • postion absolute+z-index:-1 不能点击不占据空间
  • postion relative z-index:-1 不能点击、占据空间

10.display：none和visibility：hidden的区别

  • display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
  • display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
  • 修改常规流中元素的display通常会造成文档重排回流。修改visibility属性只会造成本元素的重绘。