欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

web前端面试题目

程序员文章站 2022-06-09 17:09:14
...

1.css有哪些选择符，它们的优先关系计算

CSS 元素选择器
CSS 类选择器
CSS ID 选择器
CSS 属性选择器
CSS 后代选择器
CSS 子元素选择器
CSS 相邻兄弟选择器
CSS 伪类
CSS 伪元素等等
优先关系：使用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。

2.用css写一个底边为100px的三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .div {
            width: 0px;
            height: 0px;
            background-color: transparent;
            position: absolute;
            top:50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
            border-top: 100px solid transparent;
            border-bottom:  100px solid green;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>

效果

web前端面试题目

3.display：block，inline，inline-block这三个的关系

display:block
①.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
②.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
③.block元素可以设置margin和padding属性
display:inline
①.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
②.inline元素设置width,height属性无效。
③.inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
①.简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

4.positon的几种属性

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit： 规定应该从父元素继承 position 属性的值。

5.布局，左边固定宽度100px，右边自适用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .cantain {
            width: 100%;
            height: 100%;
            background-color: yellow;
            margin: 0 auto;
        }
        .div1 {
            float: left;
            width: 200px;
            background-color: blue;
            height: 400px;
        }
        .div2 {
            width: 100%;
            height: 100%;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="cantain">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
</html>

6.DOM节点的创建、插入、删除、查找、替换

①.创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
②.插入DOM节点
appendChild()：把节点插入到父节点的末尾。
insertBefore()：把节点插入到父节点的某个兄弟节点的前面。
③.删除DOM节点
删除DOM节点的方法是removeChild()。
④.查找DOM节点
getElementById() //通过元素Id，唯一性
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
⑤.替换DOM节点
替换DOM节点的方法是replaceChild()。

7.typeof返回哪些数据

typeof 返回值有六种可能： “number,” “string,” “boolean,” “object,” “function,” 和 “undefined.

8.用js写一个ajax

// 将 get 跟post 封装到一起
/*
    参数1:url
    参数2:数据
    参数3:请求的方法
    参数4:数据成功获取以后 调用的方法
*/
function ajax_tool(url,data,method,success) {
    // 异步对象
    var ajax = new XMLHttpRequest();

    // get 跟post  需要分别写不同的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{

        }
        // 设置 方法 以及 url
        ajax.open(method,url);

        // send即可
        ajax.send();
    }else{
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method,url);

        // 需要设置请求报文
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送即可
            ajax.send();
        }
    }

    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);

            // 将 数据 让 外面可以使用
            // return ajax.responseText;

            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;

            // 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
        }
    }

9.请实现将数字用千分制表示

其实最简洁是用正则来表示，可以去看看，顺便我也想请教一下，听一下讲解。
下面是两种简单的方法

function parseNum(num){
    var list = new String(num).split('').reverse();
    for(var i = 0; i < list.length; i++){
        if(i % 4 == 3){
            list.splice(i, 0, ',');
        }
    }
    return list.reverse().join('');
}

console.log(parseNum(10000121213));

function parseNum(num){
    var list = String(num).split('').reverse();
    var temp = [];
    for(var i = 0, len = list.length; i < len; i = i + 3){
        temp.push(list.slice(i, i + 3).join(''));
    }
    return temp.join(',').split('').reverse().join('');
}
console.log(parseNum(10000121213));

10.输入N,生成N个不同的随机数，并且随机数的范围在[2 32]之间

<script type="text/javascript">
    var array = new Array();
    function getArray(count,maxs,mins){
        while (array.length<count){
            var temp = getRandom(maxs,mins);
            if(!serch(array,temp)){
                array.push(temp);
            }
        }
        console.log(array);
        return array;
    }
    function getRandom(maxs,mins){
        return Math.round(Math.random()*(maxs-mins))+mins;
    }
    function serch(array,num){
        for(var i=0;i<array.length;i++){
            if(array[i] == num){
                return true;
            }
        }
        return false;
    }
    getArray(4,32,2);
</script>
相关标签： 面试题 web前端

上一篇： Centos7环境下YUM的搭建方法

下一篇： 蓝桥杯——分考场

推荐阅读