二、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 查询，你可以针对不同的媒体类型定义不同的样式。