前端面试题

1.实现DIV居中的几种方法

(1)利用margin，

(div1的宽减去div2的宽)/2就是div2margin-left的数值：（100-40）/2=30

　　(div1的高减去div2的高)/2就是div2margin-top的数值：（100-40）/2=30

 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>div居中</title>
    <style>
        .div1 {
             width:100px;
             height:100px;
             border:1px solid black;

        }
        .div2 {
            width:40px ; height: 40px; background-color: green;
        }
        .divcontent {
               margin-left:30px;
               margin-top:30px;
        }
     </style>

</head>
<body>
    <div class="div1">
        <div class="div2  divcontent">
        </div>
    </div>
</body>
</html>

效果：

（2）用css的position属性，如下的html

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: red;}

            .div11{
                position: relative;
            }
            .div22{
                position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
            }
        </style>

        <div class="div1 div11">
            <div class="div2 div22">

            </div>
        </div>

    </body>
</html>
</html>

　　效果:

(3)

利用css的 position属性，把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，css如下设置

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: black;}

            .div11{
                position: relative;
            }
            .div22{
                position: absolute;top:50%;left: 50%;margin-top:-20px;
                margin-left:-20px;

            }
        </style>

        <div class="div1 div11">
            <div class="div2 div22">

            </div>
        </div>

    </body>
</html>

效果：

2.

DIV CSS网页布局居中条件   

1、对body设置CSS内容居中样式text-align:center，代码：body{text-align:center}
2、对最外层对象设置margin:0 auto样式，代码：.divcss5{margin:0 auto}

 

 

 

3.

一个页面有5个ajax请求，如何等待所有响应返回完毕同时渲染在页面上？

Es6中新加了promise 对象，对象中有个all 方法，这个方法接收一个数组作为参数，数组中的每一个值都是promise实例对象，如果不是，则调用promise.resolve()将其解析

为promise 对象实例，

只有当数组中的每个实例对象的状态变为fuifilled时，才会执行then中的成功回调函数，

只要数组中的一个实例对象的状态为rejected时，就执行then中的拒绝回调函数，

 

posted @ 2017-12-05 19:03  1点  阅读(289)  评论(0)  编辑  收藏  举报