二、CSS 篇
1. 介绍一下 CSS 的盒子模型？
margin(外边距)- 清除边框外的区域，外边距是透明的。
border(边框)- 围绕在内边距和内容外的边框。
padding(内边距)- 清除内容周围的区域，内边距是透明的。
content(内容)- 盒子的内容，显示文本和图像。
W3C的标准盒模型：在标准的盒子模型中，width指content部分的宽度
IE的盒模型：在IE盒子模型中，width表示content+padding+border这三个部分的宽度
如何开启不同盒子模型
box-sizing:content-box; 标准盒子模型
box-sizing:border-box; IE盒子模型
2.css选择器？
id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素
伪类选择器
属性选择器
3. css 选择器优先级？
!important > 行内样式（比重1000）> ID 选择器（比重100） > 类选择器（比重10） > 标签（比重1） > 通配符 > 继承 > 浏览器默认属性
4.css中可继承属性？
字体系列属性
font-family:字体系列
font-weight：字体粗细
font-size：字体大小
font-style：字体风格
文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
color：文字颜色
元素可见性：visibility
列表布局属性：list-style
光标属性：cursor
5. 垂直居中几种方式？
将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
使用flex布局，设置为align-item：center
绝对定位中设置bottom:0,top:0,并设置margin:auto
绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
文本垂直居中设置line-height为height值
6. 简明说一下 CSS link 与 @import 的区别和用法？
link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题
7. rgba和opacity的透明效果有什么不同？
Rgba即可以指定元素颜色也可以指定透明度，opacity只能控制元素透明度不能设置颜色
Rgba透明度是基于实际颜色而opacity是针对元素本身透明度设置，在使用rgba是可以实现元素不同部位透明度不同，而opacity使元素透明度一致
支持rgba的浏览器比支持opacity的更普遍但是在低版本的ie中rgba不被支持而支持opacity
8.display的属性值及作用
9.display的block，inline和inline-block区别？
block: 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性;
inline: 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin;
inline-block: 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。
10. display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
11. position的值， relative和absolute分别是相对于谁进行定位的？
relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。
absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。最终找到body
fixed: （老版本IE不支持）生成绝对定位，相对于浏览器窗口或者frame进行定位。
static:默认值，没有定位，元素出现在正常的文档流中。
sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。
12.隐藏元素的方法有哪些？
display: none: 渲染树不会包含该染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden: 元素在页面中仍占据空间，但是不会响应绑定的监听事件
opacity: 0: 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件
position: absolute: 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏
z-index: 负值: 来使其他元素遍盖住该元素，以此来实现隐藏
transform: scale(0,0): 将元索缩放为 0，来实现元素的隐藏。
13.transition和animation区别？
触发方式不同：transition 通过 CSS 属性值的变化来触发动画效果，而 animation 则需要通过设置关键帧（keyframes）来指定动画序列。
控制方式不同：transition 只能控制开始和结束状态之间的过渡动画，而 animation 可以指定多个关键帧，控制元素动画的每一个阶段，包括动画开始、中间和结束的时刻、变换状态以及持续时间等。
耗费资源不同：相对来说，animation 消耗的浏览器资源更多，因为它需要计算多个关键帧之间的动画效果，而 transition 只需在两种状态之间进行简单的计算即可。
兼容性不同：transition 相对来说更加兼容不同的浏览器，而 animation 在某些旧版浏览器上可能无法正常工作。
14.伪元素和伪类区别？
伪元素：是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式，例如:before和:after能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
伪类：是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。（这里有一个例外，就是:first-child和:lang是可以从DOM树中推断出来的。）
两者的异同
相同：
伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。
差异：
伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征。伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。
15.对requestAnimationframe的理解
HTML5 提供一个专门用于请求动画的API
语法：
window.requestAnimationFrame(callback); 其中，callback是下一次重绘之前更新动画顿所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数，它表示requestAnimationFrame()开始去执行回调函数的时刻。该方法属于宏任务，所以会在执行完微任务之后再去执行。
取消动画：
使用cancelAnimationFrame()来取消执行动画，该方法接收-个参数–requestAnimationFrame默认返回的id，只需要传入这个id就可以取消动画了。
优势：
CPU节能
函数节流
减少DOM操作
16.li 与 li 之间有看不见的空白间隔是什么原因引起的? 如何解决?
浏览器会把inline内联元素间的空白字符(空格、换行、Tab等) 染成一个空格。为了美观，通常是一个
放在一行，这导致
换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
解决：
为
设置float:left。不足: 有些容器是不能设置浮动，如左右切换的焦点图等.
将所有
写在同一行。不足: 代码不美观。
将内的字符尺寸直接设为0，即font-size:0。不足:
中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
消除
的字符间隔letter-spacing:-8px，不足: 这也设置了
内的字符间隔，因此需要将
内的字符间隔设为默认letter-spacing:normal。
17.CSS3新特性
新增各种css选择器(:not(.input):所有class不是’input’的节点)：属性选择器，伪类选择器，伪元素选择器，基本选择器
三个边框属性
border-radius：创建圆角边框
border-shadow：为元素添加阴影
border-image：使用图片来绘制边框
背景
background-clip：确定背景画区
background-origin：设置是从border-box，padding-box，content-box那个盒子的左上角开始对其
background-size：调整背景图片大小
background-break：元素可以被分成几个独立的盒子
文字
word-wrap：normal|break-word 使用浏览器默认的换行|允许在单词内换行
text-overflow：设置或检索当前行超过指定容器的边界如何显示，属性由两个值
clip：修剪文本
ellipsis：显示省略符号来代表被修剪的文本
text-shadow：可向文本应用阴影。能够规定水平阴影，垂直阴影，模糊距离，以及阴影颜色
text-decoration：CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可以提供
text-fill-color：设置文字内部填充颜色
text-stroke-color：设置文字边界填充颜色
text-stroke-width：设置文字边界宽度
颜色（新增颜色表示方式rgba与hsla）
rgba分为两部分，rgb为颜色值，a为透明度
hsla分为四部分，h为色相，s为饱和度，l为亮度，a为透明度
transition过渡，transform转换，animation动画
flex弹性布局，Grid栅格布局
媒体查询
18.创建图片格式(简述)
BMP:是无损的、既支持索引色也支持直接色的点阵图
GIF:是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码
JPEG:是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩
PNG-8:是无损的、使用索引色的点阵图。
PNG-24:是无损的、使用直接色的点阵图。
SVG:是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成
WebP:是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的点阵图。
19. 画一条0.5px的直线？
考查的是css3的transform
height: 1px; transform: scale(0.5);
20. calc, support, media各自的含义及用法？
@support 主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；
@media 查询，你可以针对不同的媒体类型定义不同的样式。
