【面试总结2】2

12.网页验证码是干嘛的，是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序，可以防止恶意破解密码、刷票、论坛灌水；

有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试

13.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookies

由于 HTTP 是无状态的协议，不能保存每一次请求的状态，所以需要给客户端增加 Cookie 来保存客 户端的状态。 Cookie 的作用主要用于 用户识别 和 状态管理 。（比如网页常见的记住密码）

在 Cookie 传输和管理的时候，要确保 Cookie 的安全性，不被窃取。

仅在 HTTPS 安全通信时才会发送 Cookie 。

使用 Cookie 不能被 Javascript 脚本访问（防止跨站脚本攻击 XSS 对 Cookie 信 息的窃取）。

防止跨站伪造 CORF 的攻击

Strict ：浏览器完全禁止第三方请求携带 Cookie。

Lax ：只能在 get 方法提交表单 情况或者 a 标签发送 get 请求 的情况下可以携带 Cookie。

None ：默认，请求会自动携带上 Cookie。

localStorage:

生命周期是永久性的。localStorage存储的数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。如果 想设置失效时间，需自行封装。

sessionStorage

关闭浏览器或者页面，sessionStorage 就会失效；

页面刷新不会消除数据；

只有在当前页面打开的链接，才可以访sessionStorage的数据，使用window.open打开页面和改变localtion.href方式都可以获 取到sessionStorage内部的数据;

14. CSS选择器有哪些？哪些属性可以继承？

1.id选择器（#id）

2.类选择器（.class）

3.标签选择器（div，h1，p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[title]）

9.伪类选择器（a:hover，li:nth-child）

可以继承的有：

1.字体系列属性 font，font-family，font-weight，font-size，font-style，font-variant，font-stretch，font-size-adjust

2.文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color

3.元素可见性 visibility

4.表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table-layout

5.列表布局属性 list-style-type，list-style-image，list-style-position，list-style

6.生成内容属性 quotes

7.光标属性 cursor

8.页面样式属性 page，page-break-inside，windows，orphans

9.声音样式属性 speak，speak-punctuation，speak-numeral，speak-header，speech-rate，volume，voice-family，pitch，pitch-range，stress，richness，azimuth，elevation

15.CSS优先级算法如何计算？

1.优先级就近原则，同权重情况下样式定义最近者为准；

2.载入样式以最后载入的定位为准；

3.!important > id > class > tag；

4.important 比 内联优先级高，但内联比id要高；

16.CSS3有哪些新特性？

新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}

弹性盒模型 display: flex;

多列布局 column-count: 5;

媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}

个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}

颜色透明度 color: rgba（255, 0, 0, 0.75）；

圆角 border-radius: 5px;

渐变 background:linear-gradient（red, green, blue）；

阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；

倒影 box-reflect: below 2px;

文字装饰 text-stroke-color: red;

文字溢出 text-overflow:ellipsis;

背景效果 background-size: 100px 100px;

边框效果 border-image:url（bt_blue.png） 0 10;

17.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

justify-content：

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等

space-around：两个项目两侧间隔相等

flex-direction

row（默认值）：主轴为水平方向，起点在左端

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿

flex-wrap

nowrap（默认值）：不换行

wrap：换行，第一行在下方

wrap-reverse：换行，第一行在上方

align-content

flex-start：与交叉轴的起点对齐

flex-end：与交叉轴的终点对齐

center：与交叉轴的中点对齐

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

stretch（默认值）：轴线占满整个交叉轴

**

align-items

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline: 项目的第一行文字的基线对齐

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

**

18.用纯CSS创建一个三角形的原理是什么？

利用盒子的均分原理，盒子都是矩形或者正方形，从形状的中心，向4个上下左右划分4个部分。

保证元素是块级元素，设置元素的边框，不需要显示的边框使用透明色transparent。

第一步 保证元素是块级元素

第二步 设置元素的边框

第三步 不需要显示的边框使用透明色

第一种写法：
.square{  
     width:0;  
     height:0;  
     margin:0 auto;  
     border:6px solid transparent;  
     border-top: 6px solid red;  
 }  
第二种写法：
.square{  
     width:0;  
     height:0;  
     margin:0 auto;  
     border-width:6px;
     border-color:red transparent transparent transparent;
     border-style:solid dashed dashed dashed;//为了兼容IE6，把没有的边框都设置为虚线
 }

19.常见的兼容性问题？

第一类：块状元素float后，有添加了横向的margin，在IE6下比设置的值要大（属于双倍浮动的bug）

解决方案：给float标签添加display：inline，将其转换为行内元素

第二类：表单元素行高不一致

解决方案：给表单元素添加float：left（左浮动）；或者是vertical-align：middle；（垂直对齐方式：居中）

第三类：设置较小高度的容器（小于10px），在IE6下不识别小于10px的高度；

解决方案：给容器添加overflow：hidden；

第四类：当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框；

解决方案：给img添加border：0；或者是border：none；

第五类：min-height在IE6下不兼容

解决方案：

1）min-height：value；

_height：value；

2）min-height：value；

height：auto！important；

height：value；

第六类：图片默认有间隙

解决方案：

1）给img标签添加左浮动float：left；

2）给img标签添加display：block；

第七类：按钮默认大小不一

解决方案：

1）用a标签来模拟按钮，添加样式；

2）如果按钮是一张背景图片，那么直接给按钮添加背景图；

第八类：百分比的bug

解决方案：父元素宽度为100%，子元素宽度各为50%，在IE6下各个元素宽度之和超过100%

解决方案：给右边浮动的子元素添加clear：right；

第九类：鼠标指针bug

描述：cursor：hand；只有ie浏览器识别，其他浏览器不识别

解决方案：cursor：pointer；IE6以上浏览器及其他内核浏览器都识别；

第十类：透明度属性

解决方案：针对IE浏览器：filter：alpha（opacity=value）；（取值范围1–100）

兼容其他浏览器：opacity：value；（取值范围0–1）

第十一类：上下margin的重叠问题

描述：给上边元素设置了margin-bottom，给下边元素设置了margin-top，浏览器只会识别较大值；

解决方案：margin-top和margin-bottom中选择一个，只设置其中一个值；

20.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异。

初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法：{padding:0;margin:0;}（强烈不建议）

原因：因为需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一套初始化样式。

建议使用：

html,body{padding:0;margin:0;}

我们要知道设置初始化的目的，并不是去除边框，只是为了统一所有的浏览器，正常化。