前端面试经验（二）

css:

1.导入

导入样式文件的四种方法：行内式、嵌入式、链接式、导入式

link与@import的区别：1.link属于链接式，与页面同步加载；而@import属于导入式，在页面加载完毕后再去加载css，容易造成延时。2.link是标签，用在head标签内；@import是规则，先于其他所有规则加载，用在style标签内，style标签用在head标签内。3.link不存在兼容问题，而@import是css2.1提出的，只能被ie5以上识别。4.在非模块开发中尽量不使用
@import，当有多个独立的css文件时使用link方式引入;在模块开发中，使用webpack工具开发时，有依赖的css文件只能用@import引入，最后构建好的文件将css合并，不会出现import。5.link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import 是CSS提供的，只能用于加载CSS。6.import在网速慢时会出现闪烁。

 （错误）

题解：见shadow 介绍dom【在这种情况下link也有可能出现闪烁】

FOUC，也就是 flash of unstyled content，指的是网页渲染时，外部样式还没加载好，就以浏览器默认样式短暂地展示了部分内容，等到外部样式加载完成，又恢复正常的这个页面闪烁的过程

2.css3盒模型 box model

W3C标准盒子模型：

width与height为content部分的属性，盒子总长宽为width+border+padding+margin(left and right)与height+border+padding+margin(top and bottom)

ie怪异盒模型：

width与height为margin内部分属性，content部分长宽为width-border-padding(left and right)与height-border-padding(top and bottom)，盒子总长度为width+margin(left and right)与height+margin(top and bottom)。

box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。inherit为从父元素继承该属性的值。padding-box（另）指的是width和height属性包括padding的大小，不包括border和margin。

3.行内元素和块级元素

区别1：display:block块级元素 display:inline行内元素，可以用该属性切换行内元素和块级元素

区别2：块级元素占一整行，默认情况下宽度自动填满父元素，行内元素顺着一行排列；块级元素可以指明宽度高度，但仍然占据一行，行内元素不可以设置，由内容大小来决定宽高。

区别3：块级元素可以设置maigin padding，而行内元素可以使用margin padding的水平方向来设置左右边距，但竖直方向不能产生边距效果。

区别4：块级元素可以包含行内元素和块级元素，行内只能包含文本和其他行内元素。

行内元素的特性：

1.可以与其他行内元素在同一行内，不用另起一行。2.宽度，高度，顶部，底部距离设置不起作用。3.高宽由内容决定

（1）行内元素有：a b span（常见内联容器，文本内区块） img input select （表单控件，用于在表单中接收用户输入）strong（强调的语气，加粗）

（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p

空元素：没有闭合标签，意思是开始标签与结束标签内没有内容，所以叫空元素

常见的空元素：

<br>、<hr>、<img>、<input>、<link>、<meta>

鲜为人知的是：

<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>

display:
block是块级元素，能设置宽高，margin/padding都有效前后都有换行符

inline设置宽高无效，margin,padding在竖直方向无效，前后无换行符

inline-block可以设置宽高，margin/padding有效，前后无换行符

为什么img作为行内元素可以设置宽高，margin与padding也不受影响：

img是可替换元素，这类元素的展现效果不是由CSS来控制的。他们是一种外部对象，外观的渲染独立于CSS。内容不受当前文档的样式影响，CSS可以影响可替换元素的位置，但是不会影响到可替换元素自身的内容。（比如iframe，可能有自己的样式表，不会继承父文档的样式）

可替换元素有内置宽高，性质同设置了inline-block一样。

4.伪类和伪元素

参考：伪类和伪元素 - 学习 Web 开发 | MDN (mozilla.org)

应用类：

在标签内添加class="first",在css文件中添加.first{其中为对该标签内容添加的样式}

伪类：一种选择器，帮助选择特定的元素并对其施加样式，表示向文档的某个部分应用了一个类，以冒号开头的关键字。例如：:first-child表示应用在该标签相应第一个元素上

• :last-child
• :only-child   匹配没有任何兄弟姐妹的元素
• :invalid 任意内容未通过验证的 <input> 或其他 <form> 元素 .

用户行为伪类:：hover指针指向激活（多见于鼠标悬浮效果）      :focus键盘选定激活

伪元素：类似于向文档中添加元素，而非向某部分应用类。创建一些文档语言无法创建的虚拟元素，或者创建不存在的元素。

::first-line

::first-letter

::grammar-error

::spelling-error

::after ::before(配合content使用向文档中添加内容，具体应用有插入图标作为视觉提示，但不希望屏幕阅读器读出它，使用伪元素添加的不会被屏幕阅读器读出。)

5. css选择器

选择器参考手册：​​​​​​CSS 选择器参考手册 (w3school.com.cn)\​​​​​​

按照以下顺序权值从大到小：

!important 在css样式的某个属性后添加，最高优先级

内联样式：将css样式直接编写在标签的style属性中

id选择器 #id{}

class选择器 .class{}（同伪类选择器和属性选择器）属性选择器如下：

​

元素选择器 p{} div{}（同伪元素选择器）

通配符选择器 *{}（同子选择器 h1>strong{}，相邻选择器）如下：

​ 继承的样式没有权值