zoukankan      html  css  js  c++  java
  • 【转载】 前端面试

     一:先来看道js笔试题

        貌似我写错了,把参数误漏了。囧

    复制代码
    var x=1;
    var y=1;
    method(8);
    alert(x+y);-后输出5
    function  method(y)
    {
       x+=3;        x为全局变量
       y+=3;        参数y,这里仅仅是局部变量
       alert(x+y);--先输出15
    } 
    复制代码

      考察知识点:函数声明的方式,对于这种,先调用后声明的形式,在js世不报错的,但是如果是匿名函数将会报错,原因是匿名函数没有给出具体

    的函数名js无法识别。在js里,声明有三种。

    方式一:

    var  text;
    var  text=4;

    这种方式,声明的是全局变量,如果包裹在function里面,则为局部变量。

    方式二:

    text=4;

    这种隐式的声明一个变量,没有给var,表示为全局变量,即使在function里面,也为全局变量。

    方式三:

    window.text;
    window.text=4;

    这种方式,经常用到一个匿名函数执行后将一些函数公开到全局。

    全局变量的好处:可以减少变量的个数,减少由于实际参数和形式参数的数据传递带来的时间消耗。

                  坏处:占用内存单元,破坏了函数封装性,代码可读性降低。

    二:写了一道编程题,比较简单,直接贴码。忘记了,大概是这样的

    复制代码
    var  oUl=document.getElementById("list");
    var  oLi=oUl.getElementsByTagName("li");
    for(var  i=0;i<oLi.length;i++)
    {
      oLi[i].index=i;
      oLi[i].onclick=function()
      {
        alert(this.index);
      }
        
    }
    复制代码

    三:css中布局宽度,margin,padding的真实高度。

          这个说实话,之前真没注意,好细节的说啊!

    先来看看代码,:

     <div class="test1"  id="test1">test1</div>  
     <div class="test2"  id="test2">  
          <div class="test2_son">test2_son</div>  
     </div>  

    css部分:

    复制代码
     body{  
                    margin:0px;  
                }  
      
                .test1{  
                    150px;  
                    height:150px;  
                    border:6px solid red;  
                }  
      
                .test2{  
                    margin-top:40px;  
                    padding-top:40px;  
                    150px;  
                    height:150px;  
                    border:6px solid gray;  
                }  
      
                .test2_son{  
                    80px;  
                    height:50px;  
                    border:12px solid blue;  
                }  
    复制代码

    那么如何检测该div的真实高度和宽度呢?先来看下盒模型的分布图

    js代码获取它的实际宽度和高度如下所示:

    var  test1=document.getElementById("test1");
    alert(test1.offsetHeight);   --弹出162px=div实际高度+border-top的高度+border-bottom的高度
    var  test2=document.getElementById("test2");
    alert(test2.offsetHeight);   --弹出202px=div实际高度+border-top的高度+border-bottom的高度+padding的高度

         所以,div的实际高度和宽度,主要包括padding+border+本身的div高/宽。

         注:margin可为负数,padding不能为负数

        之后老师抛起box-sizing的尺寸大小问题,这个我不是很清楚,回来查资料,这里总结一下。

     四:box-sizing的问题

             box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。包括border-box|content-box(默认)|padding-box

        先来看下代码,比较一下它们之间的区别:

    <div  class="content-box"></div>
    <div  class="padding-box"></div>
    <div  class="border-box"></div>

    css部分:

    复制代码
      .content-box{
            box-sizing:content-box;
            -moz-box-sizing:content-box;
             100px;
            height: 100px;
            padding: 20px;
            border: 5px solid #E6A43F;
            background: blue;
        }
        .padding-box{
            box-sizing:padding-box;
            -moz-box-sizing:padding-box;
             100px;
            height: 100px;
            padding: 20px;
            border: 5px solid #E6A43F;
            background: red;                
        }
        .border-box{
            box-sizing:border-box;
            -moz-box-sizing:border-box;
             100px;
            height: 100px;
            padding: 20px;
            border: 5px solid #E6A43F;
            background: yellow;
        }
    复制代码

    实现效果如下:

    现在我们来看下区别:

      上面的三张图,第一张width=150px;第二张为110px;第三张为100px,都包括border的宽度10px在内。

      content-box:border和padding都计算入width之内,即width=100+20*2+10=150px;

      会发现一个很奇怪的问题,此时的width明明只有100px.为什么在浏览器屏幕上显示的变为了140px?

      其实是因为padding的作用,它的width包括padding,所以我们看到的比100px大,而在正常的非box-sizing里面,即使设置了padding值

    它依然只能显示出100px.

      padding-box:border计算入width内,即屏幕上显示的width为:100px+5*2=110px;

      border-box:border和padding的值都不计算在width之内.即显示width=100px;

      ie8+浏览器支持content-box和border-box;ff则支持全部三个值。

    这里,我们在js代码里面,看一下它的实际宽度,也是相对应的。

    var  contentBox=document.getElementById("content-box");
    var  paddingBox=document.getElementById("padding-box");
    var  borderBox=document.getElementById("border-box");
    alert(contentBox.offsetWidth);  --弹出150px
    alert(paddingBox.offsetWidth);  --弹出110px
    alert(borderBox.offsetWidth);   --弹出100px

     简单来说,box-sizing与我们平时的盒模型最大的区别就是,在浏览器屏幕上显示的宽度不一样。

    五:git中涉及到的一些命令

          列举了一些经常用的命令,但有几个不常用的搞忘记了,关于git常见命令可参考廖雪峰老师的文档。

          http://www.liaoxuefeng.com/的git教程。

    六:关于块级元素和行级元素

         块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table  (p是块级元素)

         行内元素:span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite
         区别:
          1)块级元素会独占一行,其宽度自动填满其父元素宽度
              行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化
          2) 块级元素可以设置 width, height属性,行内元素设置width,  height无效。
             【注意:块级元素即使设置了宽度,仍然是独占一行的】
          3) 块级元素可以设置margin 和 padding。行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果
    但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边 距效果。(水平方向有效,竖直方向无效)
          面试官抛出一个问题,如何使块级元素和行级元素在同一行?
          解决办法:给块级元素加display:inline-block,看下代码:
    <div  class="div1">
        <div  class="div2">4444</div>
        <span  class="span">222</span>
    </div>

        css部分:

    .div1{border:1px  solid red;}
    .div2{border:1px  solid  blue;}
    .span{border:1px  solid  green;}

    实现效果如下:

    可以看出,此时块级元素div独占一行,而行级元素span,在下面一行,只占据本身的宽度。

    如果加上display:inline-block,则可使块级元素和行级元素在同一行。

    .div1{border:1px  solid red;}
    .div2{border:1px  solid  blue;display:inline-block}
    .span{border:1px  solid  green;}

    效果如下:

     延伸拓展下:如果要要使两个行内元素在同一行,应该怎么写?
    解决办法:给行内元素加vertical-align:middle   
     

    :如何使同一个div中的图片和input框在同一行上?

    复制代码
    <div class="vote" style="border:1px solid red;">
    <input type="text" style="height:0.5rem; 1.5rem;line-height: 0.7rem;border: 0.02rem solid #a5de37;margin-left: 0.7rem;padding-left: 0.1rem;
    vertical-align: middle;" name="verity" placeholder="请输入验证码"> //这里设置input和img和button都为vertical-align:middle即可 <img style=" 1rem;height: 0.5rem;border:1px solid red;
    vertical-align: middle;margin-left:10px;margin-right:10px;" src="/index.php/Sheying/random"> <button id="vote" style="cursor:no-drop;height:0.54rem;1.5rem;
    vertical-align: middle;" data-id="1">已投票</button> </div>
    复制代码

    2:了解vertical-align的属性?

    包括Baseline | middle |bottom|Text-bottom|Text-top|sub|bottom

    Baseline:图片(内含文字)和文字以文字基准对准对齐

    middle:以文字最下方为基线对齐

    sub和bottom:指上标和小标

  • 相关阅读:
    Neko's loop HDU-6444(网络赛1007)
    Parameters
    SETLOCAL
    RD / RMDIR Command
    devenv 命令用法
    Cannot determine the location of the VS Common Tools folder.
    'DEVENV' is not recognized as an internal or external command,
    How to change Visual Studio default environment setting
    error signing assembly unknown error
    What is the Xcopy Command?:
  • 原文地址:https://www.cnblogs.com/wyaocn/p/5802436.html
Copyright © 2011-2022 走看看