面试题

一、隐藏一个盒子的几种方式 以及他们的区别

  面试经常会问到,我总结了下面这个表格,大家也可以自己写写代码试试。当然这是比较常见的五种方式,还有一些设置什么margin负值等等操作的隐藏盒子,我认为在实际开发中不太实用,就没有写到下面。

方式 占位 对子元素的影响 绑定的事件能否触发
display:none 子元素隐藏
opacity:0 子元素隐藏
visibility:hidden 子元素隐藏
background-color:rgba(,,,0) 子元素显示
background-color:transparent 子元素显示

 

 

 

 

 

 

 

 

 

 

 

二、CSS常用单位以及他们的区别

  1.px

    px(像素)是网页设计的基本单位,可以设置固定的布局或元素大小,他的值一旦被设定就是固定的。

  2.rpx

    rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。可以根据屏幕宽度进行自适应。微信小程序规定屏幕的宽度为750rpx。可以与px等单位进行换算。换算链接

  3.em

    em的大小是根据父元素的font-size确定的(如果自身定义了font-size,以自身为准)。页面内部的em并不是一个固定的值,他会继承父元素字体的大小。1em=1父元font-size。

  4.rem

    rem的大小是相对于根元素html的字体大小,css3新增的一个相对单位,目前,除了ie8及更早版本外,所有浏览器均已支持rem。

  5.百分比%

    相对于父元素的大小,对于普通定位元素就是我们理解的父元素,对于position: absolute;的元素是相对于已定位的父元素,对于position: fixed;的元素是相对于ViewPort(可视窗口),

  6.vw

    css3新单位,view width的简写,是指可视窗口的宽度。1vw=视窗宽度的1%

  7.vh

    css3新单位,view height的简写,是指可视窗口的高度。1vh=视窗高度的1%

  8.vmax

    vw和vh中较大的那个。

  9.vmin

    vw和vh中较小的那个。

  ps:rem、vh、vw、vmax、vmin是有兼容性问题的,使用时需要注意。

三、浏览器标准模式和怪异模式

  1.什么是标准模式?什么是怪异模式

    浏览器解析css的两种模式:标准模式(strict mode)和怪异模式(quirks mode)。

    标准模式:浏览器按w3c标准解析执行代码;

    怪异模式:使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以称之为怪异模式。

  2.怎么产生的?

    浏览器解析时使用标准模式还是怪异模式,与网页中的dtd声明直接相关,dtd声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相关的方式加载网页并显示,忽略dtd声明,将使网页进入怪异模式(quirks mode)。

  3.区别在哪里

    (1)盒子模型

      标准模式:总宽度=width+padding(左右)+border(左右)+margin(左右)

      怪异模式:总宽度=width+margin(左右)(width直接包括了padding(左右)+border(左右) )

      ps:width是你设置的宽度

    (2)可以设置行内元素的高宽

      在标准模式下,给span等行内元素设置wdith和height都不会生效

      在怪异模式下,则会生效。

    (3)可设置百分比的高度

      在标准模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。

      在怪异模式下,百分比高度被准确应用

    (4)用margin:0 auto设置水平居中在IE下会失效

      使用margin:0 auto在标准模式下可以使元素水平居中,但在怪异模式下却会失效; 怪异模式下的解决办法,用text-align属性: body{text-align:center};#content{text-align:left}

    (5)元素中的字体

      css中,对于font的属性都是可以继承的。怪异模式下,对于table元素,字体的某些元素将不会从body等其他封装元素继承中的得到,特别是font-size属性。

    (6)图片元素的垂直对齐方式

      对于inline元素和table-cell元素,标准模式下vertical-align属性默认取值是baseline;在怪异模式下,table单元格中的图片的vertical-align属性默认取值是bottom。因此在图片底部会有及像素的空间。

    (7)元素溢出的处理

      标准模式下,overflow取值默认为visible;在怪异模式在,该溢出会被当做扩展box来对待,即元素的大小由内容决定,溢出不会裁剪,元素框自动调整,包含溢出内容。

四、css如何启动浏览器硬件加速

  transform:transition3d(0,0,0)或transform:translateZ(0);,这两个属性都会开启GPU硬件加速模式,我们设置值为0后,并没有真正使用3d效果,但浏览器却因此开启了gpu硬件加速模式。

  通过transform:transition3d/translatez开启gpu硬件加速的适用范围:

    使用很多大尺寸图片(尤其是png24图)进行动画的页面。

    页面有很多大尺寸图片并且进行了css缩放处理,页面可以滚动时。

    使用background-size:cover设置大尺寸背景图,并且页面可以滚动时。(详见:https://coderwall.com/p/j5udlw)

    编写大量dom元素进行css3动画时(transition/transform/keyframes/abstop&left) 使用很多png图片拼接成css sprite时

  注意:

    通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题,但使用仍需谨慎,使用前一定要进行严谨的测试,否则它反而会大量占用浏览网页用户的系统资源,尤其是在移动端,肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量,降低电池寿命等问题。

五、CSS和CSS3的区别

  CSS3是CSS技术的升级版本,增加了很多新特性,例如:圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。

六、清除浮动的几种方式

  1.额外标签法(不推荐)

    给谁清除浮动,就在其后额外添加一个空白标签(块级标签),并给这个标签设置clear:both属性

    缺点:添加许多无意义的标签,结构化比较差

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
		<style type="text/css"> 
			.parent{
				height: 1000px;
				width: 100%;
			}
			.left{
				width: 400px;
				height: 400px;
				background-color: red;
				float: left;
			}
			.right{
				width: 200px;
				height: 200px;
				background-color: blue;
				clear: both;
			}	
		</style> 
    </head>
    <body>
		<div class="parent">
			<div class="left"></div>
			<div class="right"></div>
		</div>
    </body>
</html>

  2.父元素加overflow:hidden/auto(不推荐)

    给父元素加overflow:hidden/auto,通过触发bfc的方式,实现清除浮动效果。(慎重使用,若该父盒子里还有position定位会引起麻烦)

    缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。而且对于浮动元素的兄弟元素仍然有影响,只是父元素的兄弟元素不受影响

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
		<style type="text/css"> 
			.parent{
				overflow: hidden;
				width: 100%;
			}
			.left{
				width: 400px;
				height: 400px;
				background-color: red;
				float: left;
			}
			.right{
				width: 200px;
				height: 200px;
				background-color: blue;
			}	
		</style> 
    </head>
    <body>
		<div class="parent">
			<div class="left"></div>
			<div class="right">你是看不见我的</div>
		</div>
		<div class="right">你能看见我</div>
    </body>
</html>

  3.父元素定义高(不推荐)

    给父元素定义高度

    缺点:父元素高度固定可能影响布局,对于浮动元素的兄弟元素仍然有影响,只是父元素的兄弟元素不受影响

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
		<style type="text/css"> 
			.parent{
				height: 800px;
				width: 100%;
			}
			.left{
				width: 400px;
				height: 400px;
				background-color: red;
				float: left;
			}
			.right{
				width: 200px;
				height: 200px;
				background-color: blue;
			}	
		</style> 
    </head>
    <body>
		<div class="parent">
			<div class="left"></div>
			<div class="right">你是看不见我的</div>
		</div>
		<div class="right">你能看见我</div>
    </body>
</html>

  4.父元素定义伪类:after和zoom(推荐)

    ie8以上和非ie浏览器才支持:after,原理和方法1有点类似,zoom(ie转有属性)可解决ie6,ie7浮动问题

    缺点:代码多,要两句代码结合使用,才能让主流浏览器都支持

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
		<style type="text/css"> 
			.parent{

				width: 100%;
			}
			.left{
				width: 200px;
				height: 200px;
				background-color: red;
				float: left;
				
			}
			.clearfix{
				*zoom:1;/* 触发ie haslayout */
			}
			.clearfix:after{
				content: "";
				display: block;/* 使生成的元素以块级元素显示,占满剩余空间; */
				clear: both;
				visibility:hidden;	/* 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互; */
				height:0;/* 避免生成内容破坏原有布局的高度。 */
			}
			.right{
				width: 200px;
				height: 200px;
				background-color: blue;
			}	
		</style> 
    </head>
    <body>
		<div class="parent clearfix">
			<div class="left"></div>
		</div>
		<div class="right"></div>
    </body>
</html>

  5.双伪元素法

    上面方法的改进版,代码更简洁

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
		<style type="text/css"> 
			.parent{

				width: 100%;
			}
			.left{
				width: 200px;
				height: 200px;
				background-color: red;
				float: left;
			}
			.clearfix{
				*zoom:1;/* 触发ie haslayout */
			}
			.clearfix:before,.clearfix:after{
				content: "";
				display: table;	
			}
			.clearfix:after{
				clear: both;
			}
			.right{
				width: 200px;
				height: 200px;
				background-color: blue;
			}	
		</style> 
    </head>
    <body>
		<div class="parent clearfix">
			<div class="left "></div>
		</div>
		<div class="right"></div>
    </body>
</html>

七、原生ajax交互

function ajax_get(url,params,success,error) {
        //1.创建异步请求对象
        var ajaxObj=new XMLHttpRequest();
        //2.判断url 是否存在 并利用正则判断路径是否合法
        if(!url){
            //手动抛出一个错误  终止当前程序 后面代码 不执行
            throw new Error("服务器地址非法!");
        }

        //3.判断是否有参数需要提交
        if(params){
            //有参数  就拼接上参数
            url=url+"?"+params;
        }
        ajaxObj.open("get",url)
		//4.发起网络请求
        ajaxObj.send()
        
        ajaxObj.onreadystatechange=function () {
            if(ajaxObj.readyState===4 && ajaxObj.status===200){
                if(typeof success=="function"){
                    success(ajaxObj);
                }
            }else{
                if(typeof error=="function"){
                    error(ajaxObj);
                }

            }


        }

        
    }

    //针对ajax  的post请求的封装
    function ajax_post(url,params,success,error) {
        var ajaxObj=new XMLHttpRequest();
        //判断是否有服务器地址
        if(!url){
            throw new Error("服务器地址非法!");
        }
        ajaxObj.open("post",url);
        //拼接请求头
        ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        //判断是否有参数需要提交
        if(params){
            ajaxObj.send(params);
        }else{
            ajaxObj.send();
        }
        ajaxObj.onreadystatechange=function () {
            if(ajaxObj.readyState===4 && ajaxObj.status===200){
                if(typeof success=="function"){
                    success(ajaxObj);
                }
            }else{
                if(typeof error=="function"){
                    error(ajaxObj);
                }

            }
        }
 }

八、前端页面有哪三层构成,分别是什么?作用是什么?

  最准确的网页设计思路是把网页分成三个层次,即:结构层、表示层、行为层。

  网页的结构层(structural layer)由 html 或 xhtml 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,p 标签表达了这样一种语义:“这是一个文本段。”

  网页的表示层(presentation layer) 由 css 负责创建。 css 对“如何显示有关内容”的问题做出了回答。

  网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 javascript 语言和 dom 主宰的领域。

九、js本地对象 内置对象 寄生(宿主)对象分别是什么

  寄生对象:宿主就是寄生,就是寄生在javascript里的对象。即对象不是javascript语言本身的,但是可以在javascript中使用的对象,如dom,bom。

  内置对象:内置对象,就是不用创建,可以直接使用的对象,如:Math。函数中的arguments和this;事件处理函数中的event对象等等,都是直接使用,而不用new的。

  本地对象:代码编写者自己创建的对象,例如:Date、Array、XMLHttpRequest等

十、HTML5新特性 兼容性处理 如何区分HTML和H5

  1.H5的新特性

    语义化标签:<hrader></header> 、<footer></footer>、<nav></nav>、<section></section>、<article></article>、<aside></aside>、<video></video>、<audio></audio>

    新增表单元素:email、month、number、range、search、tel、url、week、time、date、datatime、datetime-local

    新增表单属性:placeholder、required、autofocus、autocomplete、maxlength、novalidate、max、min、step、multipe、disabled、checked

    新增的视频和音频标签:<video></video>、<audio></audio>

    canvas绘图 svg绘图 拖拽 webworker、webstorage、websocket

  2.兼容性处理

    IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添加标签默认的样式;当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

  <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]--> 

  3.如何区分

    在文档类型声明上,h5为<!doctype html>,之前版本比较长。或根据使用标签进行区分

上一篇:[CSS 3] Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius


下一篇:jQuery之动画