金华IT培训
美国上市IT培训机构

4008270010

热门课程

前端面试题 整理汇总(九)

  • 时间:2019-01-09 11:09
  • 发布:转载
  • 来源:网络

今天达内推荐的这篇前端面试题比较全面,有助于大家加深对前端知识点的理解,希望能帮助到各位正在找前端工作的朋友。

cookie session 的区别:

1cookie数据存放在客户的浏览器上,session数据放在服务器上。

2cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考,虑到安全应当使用session

3session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用COOKIE

4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20cookie

5、所以个人建议:

将登陆信息等重要信息存放为SESSION

其他信息如果需要保留,可以放在COOKIE

display:nonevisibility:hidden的区别?

display:none  隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。

visibility:hidden  隐藏对应的元素,但是在文档布局中仍保留原来的空间。
CSS
link @import的区别是?
(1) link
属于HTML标签,而@importCSS提供的;

(2) 页面被加载的时,link会同时被加载,而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;

(3) import只在IE5以上才能识别,而linkHTML标签,无兼容问题;

(4) link方式的样式的权重 高于@import的权重.
position:absolute
float属性的异同

共同点:对内联元素设置floatabsolute属性,可以让元素脱离文档流,并且可以设置其宽高。

不同点:float仍会占据位置,absolute会覆盖文档流中的其他元素。

介绍一下box-sizing属性?

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box

content-box:让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定,设置width/height属性指的是content部分的宽/

border-box:让元素维持IE传统盒模型(IE6以下版本和IE6~7的怪异模式)。设置width/height属性指的是border + padding + content

标准浏览器下,按照W3C规范对盒模型解析,一旦修改了元素的边框或内距,就会影响元素的盒子尺寸,就不得不重新计算元素的盒子尺寸,从而影响整个页面的布局。
CSS
选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

1.id选择器( # myid
2.
类选择器(.myclassname

3.标签选择器(div, h1, p

4.相邻选择器(h1 + p

5.子选择器(ul > li

6.后代选择器(li a

7.通配符选择器( *

8.属性选择器(a[rel = "external"]

9.伪类选择器(a: hover, li:nth-child

优先级为:
!important > id > class > tag
important
比 内联优先级高,但内联比 id 要高

CSS3新增伪类举例:

p:first-of-type 选择属于其父元素的首个

<p>元素的每个<p>

元素。
p:last-of-type  
选择属于其父元素的最后

<p>元素的每个<p>

元素。
p:only-of-type  
选择属于其父元素唯一的

<p>元素的每个<p>

元素。
p:only-child    
选择属于其父元素的唯一子元素的每个

<p>元素。
p:nth-child(2)  
选择属于其父元素的第二个子元素的每个

<p>元素。
:enabled  :disabled
控制表单控件的禁用状态。
:checked        
单选框或复选框被选中。

CSS3有哪些新特性?

CSS3实现圆角(border-radius),阴影(box-shadow),

对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器  多背景 rgba

CSS3中唯一引入的伪元素是::selection.

媒体查询,多栏布局

border-image

CSS3中新增了一种盒模型计算方式:box-sizing。盒模型默认的值是content-box, 新增的值是padding-boxborder-box,几种盒模型计算元素宽高的区别如下:

content-box(默认)

布局所占宽度Width

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占宽度Width

Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占宽度Width

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

BFC规范的理解?

BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。

W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。

预约申请免费试听课

怕钱不够?就业挣钱后再付学费!    怕学不会?从入学起,达内定制课程!     担心就业?达内多家实践企业供你挑选!

上一篇:前端面试题 整理汇总(八)
下一篇:没有下一篇了

前端面试题 整理汇总(八)

前端面试题 整理汇总(七)

前端面试题 整理汇总(六)

前端面试题 整理汇总(五)

选择城市和中心
贵州省

广西省

海南省