zoukankan      html  css  js  c++  java
  • 前端面试题

    1、一个200*200的div在不同分辨率屏幕上下左右居中,用css实现
    div{
      position: fixed;
       200px;
      height: 200px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      border:1px solid red;
    }

    2、左右两边宽为200px,中间自适应,中间优先加载
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
    <style>
    *{
      margin:0 auto;
      padding: 0 auto;
    }
    #left{
       200px;
      height: 200px;
      border:1px solid red;
      position: absolute;
      left: 0;
    }
    #right{
       200px;
      height: 200px;
      border:1px solid red;
      position: absolute;
      right: 0;
    }
    #center{
    border:1px solid black;
      position: absolute;
      height: 200px;
      left: 200px;
      right: 200px;
    }
    </style>
    /*id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式,但对于相同选择器的样式,越靠后的优先级就越高,所以就会优先加载*/

    3、阐述清楚浮动的几种方式
    1)、clear清除浮动(使用一个空标签),这种方式是需要清除浮动的父级元素内部的所有浮动元素后添加这样的一个标签清除浮动,即为:clear:both;
    2)、使用overflow属性。这种方式可以有效的解决了通过空标签元素清除浮动而不得不添加无意代码的弊端。即为:overflow:hidden。
    3)、使用浮动外部元素,float-in-float(此方法我没用过)
    4)、使用after伪对象,此方法只适合于非IE浏览器

    4、如何用原生js给一个按钮绑定两个onclick事件?
    var buttons=document.getElementById("btn");
    btn.addEventListener("click",first);
    btn.addEventListener("click",second);
    function first(){
      alert("按钮绑定一");
    }
    function second(){
      alert("按钮绑定二");
    }

    5、css选择器有哪些,选择器的权重的优先级
    选择器:ID、class、标签、伪类、属性、通用(*)、伪元素、子选择器
    优先级:
    一等:代表内联样式
    二等:代表ID选择器
    三等:代表类选择器
    四等:代表类型选择器和伪元素选择器
    通配符、子选择器、相邻选择器,但继承的样式没有权值

    6、块级元素水平垂直居中的方法有哪些?
    1)、比如有个div,200px,height: 200px
    div{
      height: 200px;
       200px;
      position: fixed;
      left: 50%;
      top: 50%;
      margin: -100px 0 0 -100px;
    2)、
    div{
      position: absolute;
      left: 0px;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 200px;
       200px;
    }
    3)、
    div{
       200px;
      height: 200px;
      position: fixed;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
    }

    7、js有几种数据类型,其中基本数据类型有哪些?
    1)、字符串类型(String)
    2)、数值类型(number)
    3)、布尔类型(boolean)
    4)、函数类型
    5)、数组类型
    6)、对象类型
    7)、null类型
    8)、undefine类型
    基本数据类型:
    1)、number
    2)、String
    3)、boolean
    4)、null
    5)、undefined

    8、常见的HTTP状态码及意思:
    200:表示请求已成功
    301:被请求的资源已永久移动到新位置
    302:请求的资源现状临时从不同的URL响应请求
    400:1)、请求参数有错。2)、语义有误(400是经常碰到)
    401:当时请求需要用户进行验证
    403:服务器已经收到请求,当拒绝执行它(偶尔遇到)
    404:请求失败,请求所希望得到的资源未被在服务器上发现。一般都是请求的路径有误(经常遇到)
    500:很有可能是代码的语法有误(经常遇到)
    502:作为网关或代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应
    503:由于临时的服务器维护或者过载,服务器当前无法处理改请求

    9、怎样添加、移除、移动、复制、创建和查找节点?
    添加:appendChild()
    移除:removeChild()
    移动:appendTo()
    复制:clonNode()
    创建:createDocumentFragment()//创建一个DOM
    createElement()//创建一个具体的元素
    createTextNode()//创建一个文本节点
    查找:
    getElementByTagName()//通过标签名称查找
    getElementById()//通过元素Id查找,具有唯一性
    getElementByName()//通过元素的Name属性的值查找

    10、判断一个字符串中出现次数最多的字符,统计这个次数.(用代码解答)
    <script type="text/javascript">
    var str = 'dfggfrtdfdfgfhghgju';
    var arr = {};
    for(var i = 0; i < str.length; i++){

      if(!arr[str.charAt(i)]){
        arr[str.charAt(i)] = 1;
      }else{
        arr[str.charAt(i)]++;
      }
    };
    var num = 0;
    var index = '';
    for(var i in arr){
      if(arr[i]>num){
        num = arr[i];
        index = i;
      }
    }
    console.log('字符串中出现次数最多的是:'+index+'出现了'+num+'次');
    </script>

    11、CSS3的新特性

     圆角        (border-radius:8px)
      多列布局    (multi-column layout)
      阴影和反射  (ShadowReflect)
      文字特效    (text-shadow、)
      文字渲染    (Text-decoration)
      线性渐变    (gradient)
      旋转        (transform)
      缩放,定位,倾斜,动画,多背景
      例如:transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:
  • 相关阅读:
    echart tooltip.formatter提示只显示x轴(时间)
    Install fail! Error: EBUSY: resource busy or locked
    vue v-model绑定值为obj不起作用
    浅谈JS的继承
    总结一下最近对nodejs 和 mongodb 的学习
    JavaScript30-7 数组的一些基本方法
    Vue-router 的练习
    JavaScprit30-6 学习笔记
    JavaScprit30-5 学习笔记
    JavaScript 30
  • 原文地址:https://www.cnblogs.com/Luckyyan/p/10669146.html
Copyright © 2011-2022 走看看