前端面试题总结(二)

1、实现水平垂直居中的方法

我一直以为设置父相子绝,然后子元素设置left:50%;top:50%;就可以了,然而今天面试时被面试官问我才发现不可以,当时也不知道为什么,唉想哭。

回去试了一下,真的不可以,只有在水平方向上可以居中,在垂直方向上不能。因为我没有给父元素设置高度,那么父元素的高度就会自动和子元素的一样,而子元素又是根据父元素定位的,因此垂直方向上没有效果。

方法一:

要设置

html{
height: 100%;
}
body{
position: relative;
height: 100%
}                                  //html和body的高度要设置100%,这样body的高度才会占据整个文档。

div{
position: relative;
left: 50%; 
top: 50%; 

width: 100px;
height: 100px;
transform: translate(-50%, -50%);        //因为上面定位的50%是对于div的边界到父元素边界的,并没有真正的居中,我们要将元素向上和左平移盒子的宽高的一半才可以
border:1px solid red;
}

方法二:

利用css3弹性盒子

html{
height: 100%;
}
body{

height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
div{
 

width: 100px;
height: 100px;
transform: translate(-50%, -50%);      
border:1px solid red;
}

方法三:

html{
height: 100%;
}
body{

height: 100%;
position: relative;
}
div{
 
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100px;
height: 100px;
margin: auto;   
border:1px solid red;
}

2、position的几个属性

http://blog.csdn.net/sofia92/article/details/50469948

3、px、em、rem、pt的区别介绍

pt与px

在html设计字体的css样式中,有些字体设置成14pt,而不是14px,那pt是什么,和px又有什么关系呢?

pt(point)是印刷行业常用的单位,等于1/72英寸,表示绝对长度。px(pixel)指的是像素,是屏幕上显示数据的最基本的点,表示相对大小。不同分辨率下相同长度的px元素显示会不一样,比如同样是14px大小的字,在1366*768显示屏下会显示的小,在1024*768尺寸的显示器下会相对大点。

px和pt转换规则很简单,默认的显示设置中把文字定义为96DPI,由公式px=pt*DPI/72,可得pt=px*3/4。

em和rem

em是相对长度单位,相对于当前对象内文本的字体尺寸,即em的计算是基于父级元素font-size的。比如:

<body style="font-size:14px">
    <p style="font-size:2em">我这里的字体显示大小是28px(14px*2)p>  
    <div style="font-size:18px">
        <p style="font-size:2em">我这里显示字体大小是36px(18px*2),而不是上面计算的28pxp>
    div>
body>

rem是css3新增的一个相对单位,与em的区别在于,它是相对于html根元素的(在body标签里面设置字体大小不起作用)。还是上面那个例子,如果换做rem,结果如下:

 <body style="font-size:14px">
     <p style="font-size:2rem">我这里的字体显示大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的

<div style="font-size:18px"> <p style="font-size:2rem">我这里显示字体大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的

*补充默认font-size大小是16px(如果html中没有设置的话)。

4、transition和animation的区别

http://blog.csdn.net/jdk137/article/details/50474129

5、jq的document.ready和window.onload的区别

在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})

这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。

而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

那么Jquery里面$(document).ready函数的内部是怎么实现的呢?下面我们就来看看:

我们来为document添加一个ready函数:

 

复制代码
     document.ready = function (callback) {
            ///兼容FF,Google
            if (document.addEventListener) {
                document.addEventListener('DOMContentLoaded', function () {
                    document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                    callback();
                }, false)
            }
             //兼容IE
            else if (document.attachEvent) {
                document.attachEvent('onreadystatechange', function () {
                      if (document.readyState == "complete") {
                                document.detachEvent("onreadystatechange", arguments.callee);
                                callback();
                       } }) }
else if (document.lastChild == document.body) { callback(); } }
复制代码

document.ready这个函数是实现了。我们再来验证一下最上面所说的“ready要比onload先执行”:

复制代码
   window.onload = function () {
            alert('onload');

        };

        document.ready(function () {
            alert('ready');

        });
复制代码

执行这段代码之后,你会看到浏览器里面会先弹出“ready”,在弹出onload。


你可能感兴趣的:(前端面试题总结(二))