前端常用面试问题的疑难解惑（3）1、link 标签和import 标签的区别 link 属于html 标签，而@impo

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

1、link 标签和import 标签的区别

link 属于html 标签，而@import 是css 提供的页面被加载时，link 会同时被加载，而@import 引用的css 会等到页面加载结束后加载。 link 是html 标签，因此没有兼容性，而@import 只有IE5 以上才能识别。 link 方式样式的权重高于@import 的

2、transition 和animation 的区别

Animation 和transition 大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition 需要触发一个事件才能改变属性，而animation 不需要触发任何事件的情况下才会随时间改变属性值，并且transition 为2 帧，从from .... to，而animation 可以一帧一帧的。

3、Flex 布局

Flex 是Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒状模型，依赖display 属性+ position 属性+ float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。简单的分为容器属性和元素属性容器的属性： flex-direction：决定主轴的方向（即子item 的排列方法）

.box { flex-direction: row | row-reverse | column | column-reverse; } flex-wrap：决定换行规则 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } flex-flow： .box { flex-flow: || ; } justify-content：对其方式，水平主轴对齐方式 align-items：对齐方式，竖直轴线方向项目的属性（元素的属性）： order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为0

flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个item 的flow-shrink 为0，则为不缩小

flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
flex：是flex-grow 和flex-shrink、flex-basis 的简写，默认值为0 1 auto。
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items，默认属性为auto，表示继承父元素的align-items 比如说，用flex 实现圣杯布局
flex-direction 属性决定主轴的方向；
flex-wrap 属性定义，如果一条轴线排不下，如何换行；
flex-flow 属性是flex-direction 属性和flex-wrap 属性的简写形式，默认值为row nowrap；
justify-content 属性定义了项目在主轴上的对齐方式。
align-items 属性定义项目在交叉轴上如何对齐。
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目（子元素）也有一些属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
flex 属性是flex-grow, flex-shrink 和flex-basis 的简写，默认值为0 1 auto。后两个属性可选。
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items 属性。

4、BFC（块级格式化上下文，用于清楚浮动，防止margin 重叠等）

直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。 BFC 区域不会与float box 重叠 BFC 是页面上的一个独立容器，子元素不会影响到外面计算BFC 的高度时，浮动元素也会参与计算那些元素会生成BFC：根元素

float 不为none 的元素
position 为fixed 和absolute 的元素
display 为inline-block、table-cell、table-caption，flex，inline-flex 的元素
overflow 不为visible 的元素

5、垂直居中的方法

(1)margin:auto 法 css:

div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:<div><img src="mm.jpg"></div>
//定位为上下左右为0，margin：0 可以实现脱离文档流的居中.

(2)margin 负值法

.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height 的一半*/
margin-left: -240px; /*width 的一半*/
}
//补充：其实这里也可以将marin-top 和margin-left 负值替换成，
transform：translateX(-50%)和transform：translateY(-50%)

(3)table-cell（未脱离文档流的）设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。 css:

(4)利用flex 将父元素设置为display:flex，并且设置align-items:center;justify-content:center;

div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}

(4)利用flex 将父元素设置为display:flex，并且设置align-items:center;justify-content:center;

css:
.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
}

6、关于JS 动画和css3 动画的差异性

渲染线程分为main thread 和compositor thread，如果css 动画只改变transform 和opacity，这时整个CSS 动画得以在compositor trhead 完成（而JS 动画则会在main thread 执行，然后出发compositor thread 进行下一步操作），特别注意的是如果改变transform 和opacity 是不会layout 或者paint 的。区别：功能涵盖面，JS 比CSS 大实现/重构难度不一，CSS3 比JS 更加简单，性能跳优方向固定对帧速表现不好的低版本浏览器，css3 可以做到自然降级 css 动画有天然事件支持 css3 有兼容性问题

7、说一下块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置margin 和pading 以及高度和宽度行元素：不会独占一行，width 和height 会失效，并且在垂直方向的padding 和margin会失效。

8、多行元素的文本省略号

display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden

9、visibility=hidden, opacity=0，display:none

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click 事件，那么点击该区域，也能触发点击事件的visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

10、双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin 会重叠折叠的结果为：两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。