当身边人都在沉迷游戏时,掌握这些面试题,轻松月入过万。

写在前面

CSDN话题挑战赛第1期

  • 活动详情地址:CSDN

  • 参赛话题:前端面试宝典

  • 话题描述:欢迎各位加入话题创作得小伙伴,如果我没有猜错得话,我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重,已经成为不可缺少的部分,前端技术也是层出不穷,各种技术类、技术框架也蜂拥而出,前端面试的难度也随之增加,如果我们拥有一套前端面试宝典。如果你是应聘者:你就可以从容的solo面试官,如果你是面试官:你就可以将应聘者拷问到骨子里!
    总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此,形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧!!!

携手共筑前端面试宝典

  • 题目一
    • 考点
    • 答案
    • 扩展

题目

*前端基础知识点面试题


1

HTML/5、CSS/3相关  
一、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

  新特性:

  HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
  拖拽释放(Drag and drop) API
  语义化更好的内容标签(header,nav,footer,aside,article,section)
  音频、视频API(audio,video)
  画布(Canvas) API
  地理(Geolocation) API
  本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
  sessionStorage 的数据在浏览器关闭后自动删除
  表单控件,calendar、date、time、email、url、search
  新的技术webworker, websocket, Geolocation

  移除元素:
  纯表现的元素:basefont,big,center,font, s,strike,tt,u;
  对可用性产生负面影响的元素:frame,frameset,noframes;
  h5新标签兼容:
  IE8/IE7/IE6支持通过document.createElement方法产生的标签,
  可以利用这一特性让这些浏览器支持HTML5新标签,
  当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
 
  如何区分:
  DOCTYPE声明\新增的结构元素\功能元素

二、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

  CSS 选择符:

  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)

  可以继承的属性:

  可继承的样式: font-size font-family color, UL LI DL DD DT;

  不可继承的样式:border padding margin width height ;

  优先级:

  !important > id > class > tag

  important 比 内联优先级高,但内联比 id 要高

  CSS3新增伪类举例:

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

元素的每个

元素。

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

元素的每个

元素。

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

元素的每个

元素。

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

元素。

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

元素。

  :enabled :disabled 控制表单控件的禁用状态。

  :checked 单选框或复选框被选中。

三、CSS3有哪些新特性?

更详细的请见:https://www.cnblogs.com/qianduantuanzhang/p/7793638.html

  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

四、解释盒模型宽高值得计算方式,边界塌陷,负值作用,box-sizing概念? 

  1. 盒模型:IE 678 下(不添加doctype) 使用ie盒模型,宽度 = 边框 + padding + 内容宽度; chrom、IE9+、(添加doctype) 使用标准盒模型, 宽度 = 内容宽度。 
  2. box-sizing : 为了解决标准黑子和IE盒子的不同,CSS3增添了盒模型属性box-sizing,content-box(默认),border-box 让元素维持IE传统盒子模型, inherit 继承 父盒子模型; 
  3. 边界塌陷:块元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为 外边距塌陷。 
  4. 负值作用:负margin会改变浮动元素的显示位置,即使我的元素写在DOM的后面,我也能让它显示在最前面。

五、BFC(Block Formatting Context) 是什么?应用? 

  1. BFC 就是 ‘块级格式上下文’ 的格式,创建了BFC的元素就是一个独立的盒子,不过只有BLock-level box可以参与创建BFC,它规定了内部的Bloc-level Box 如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。 
  2. 应用场景: 
  1. 解决margin叠加的问题 
  2. 用于布局(overflow: hidden),BFC不会与浮动盒子叠加。 
  3. 用于清除浮动,计算BFC高度。

六、如何实现浏览器内多个标签页之间的通信?

  调用localstorge、cookies等本地存储方式

七、简要说一下CSS的元素分类

  块级元素:div,p,h1,form,ul,li;
  行内元素 : span,a,label,input,img,strong,em;

八、解释下浮动和它的工作原理?清除浮动的方法

  浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

  1.使用空标签清除浮动。

  这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

  2.使用after伪对象清除浮动

 该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

    #parent:after{

  content:".";

  height:0;

  visibility:hidden;

  display:block;

  clear:both;

 }

  3.设置overflow为hidden或者auto

  4.浮动外部元素

九、CSS隐藏元素的几种方法(至少说出三种)

  Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
  Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;
  Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
  Position:不会影响布局,能让元素保持可以操作;
  Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;

十、如何让一个盒子水平垂直居中

//已知宽高

//未知宽高        Document        

CSDN话题挑战赛第1期

  • 活动详情地址:CSDN

你可能感兴趣的