CSS相关 | 面试高频问题（二）| link、动画、块级元素、行内元素

css面试高频问题（一）

8.link为什么要放在body前（★★★）

一般link都是样式表，将link放在head内（body前），因为若将link放在body后，可能会出现页面没有样式、空白的内容，造成用户体验不佳。放在body前能让页面逐步呈现，提高用户体验。

扩展：script标签放在/body之前：
a. 把script标签放在底部，保证HTML首先完成解析，将页面尽早呈现给用户。脚本在下载和执行期间会阻止HTML解析。
b.如果javascript用document.write方法创建文档内容（不推荐使用document.write），并且脚本不会改变文档内容，那么可以在script使用defer属性（只有IE支持），放在head或者body中，浏览器将推迟对脚本的解释执行，直到整个文档已经显示给用户，以便加快处理文档的速度。

9.动画有关属性的使用、怎么定义逐帧动画（★★★）

js实现动画，css3实现动画

• 一个是帧动画 一个是补间动画
• css3是帧动画：使用定时器 每隔一段时间 更改当前元素的状态
• js是补间动画：过渡(加过渡只要状态发生改变产出动画) 、 动画（多个节点来控制动画） ，性能会更好
• 在支持H5C3的的浏览器尽可能使用css3动画 （移动端开发）

css3实现逐帧动画
动画实现两大步骤：关键帧、调用关键帧
关键帧动画可以定义多个状态，过渡只能定义首尾两个状态。

关键帧的定义

@keyframs move{
   from{初始状态属性}
   to{结束状态属性}
}
or
@keyframs move{
   0%{初始状态属性}
   50%{中间可以添加关键帧}
   100%{结束状态属性}
}

调用关键帧animation

animation:动画名 执行时间 执行函数;

animation详细属性值的介绍

animmation-name:动画名称，与@keyframes规则配合使用
animation-duration 动画持续时间
animation-timing-function动画过渡类型
linear:线性过渡
ease:平滑过渡
ease-in:由慢到快
ease-out:由快到慢
ease-in-out:由慢到快 再到慢
step-start:马上跳到动画每一结束帧的状态
animmation-delay动画延迟
animation-iteration-count动画的循环次数

• animation-iteration-count: infinite | number;
  - infinite：无限循环
  - number: 循环的次数

animation-direction动画在循环中是否反向运动

- normal：正常方向
- reverse：反方向运行
- alternate：动画先正常运行再反方向运行，并持续交替运行
- alternate-reverse：动画先反运行再正方向运行，并持续交替运行

animation-fill-mode:设置动画播放后的效果

    none:初始样式,不改变默认行为.(默认行为)
    forwards:动画播放结束后保持最后一个状态;
    backwards:结束后保持第一个状态;
1,2,3,4

animation-play-state :动画的状态
n-play-state:running | paused;
- running:运动
- paused: 暂停
animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

10.块级、行内元素分别有哪些，区别是什么，怎么修改呈现方式（★★★★）

行内元素有：a b span I em img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 p
盒模型：margin border padding width

区别：
1.行内元素会在一条直线上排列（默认宽度只与内容有关）水平方向排列。块级元素各占据一行，默认宽度是它本身父容器的100%。
2.块级元素可以包含行内元素和块级元素。
行内元素不能包含块级元素，只能容纳文本或者其他内联元素。

eg：<p>This <span>span</span> is an inline element; </p>

3.块元素中的高度，行高以及顶和底边距都可以控制；行内元素中的高，行高及顶和底边距不可改变
一些解释：
块级元素会扩展到与元素同宽。
行内元素会“收缩包裹” 其内容，并且会尽可能包紧
块级元素其高度为其内容高度，宽度会扩展到与父元素同宽。所以导致块级元素会独占一行，无法在其后容纳其他块级元素与行内元素。
行内元素其高度为其内容高度，宽度会收缩包裹其内容。

行内元素与块级元素的转换

用display
块级元素默认display:block;
行内非替换元素(a,span)默认为display:inline;
行内替换元素(input)默认为display:inline-block;
display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。
display:block;转换为块级元素。
display:inline;转换为行内元素。
display:inline-block;转换为行内块级元素。

这个写的很好