前端面试题1

最新推荐文章于 2023-07-26 08:00:07 发布

tracy-迪

最新推荐文章于 2023-07-26 08:00:07 发布

阅读量304

点赞数 1

分类专栏：面试文章标签： javascript css html5

本文链接：https://blog.csdn.net/Tracy_di/article/details/104185853

版权

面试专栏收录该内容

0 篇文章 0 订阅

订阅专栏

HTML CSS

1.1 行内元素，块级元素，行内块计元素有哪些？相互之间怎样转换？

行内元素：<span>、 < img> 、<a> 、<input> 、<selecet> 、<i>  <textarea>
块级元素： <div>  <ul>  <ol>  <li> < dl>  <dt>  <dd>  <h1>  <h2>  <h3>  <h4>  <p>
将行内元素转成块级元素：display：block；
将块级元素转成行内元素：display：inline-block；

1.2 相对定位，绝对定位，固定定位，的规则（参照的）对象是那些？清除浮动有几种方式？

1、固定定位fixed：
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。
2、相对定位relative：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
3、绝对定位absolute：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 
清除浮动有五种方式：
1、使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
2、使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
3、、给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
4、使用邻接元素处理
给浮动元素后面的元素添加clear属性。
5、使用CSS的:after伪元素
结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

1.3 实现一个嵌套的盒子在父级元素中水平和垂直居中？

(1)margin:auto法
css:
<style>
    div{
        width: 400px;
        height: 400px;
        position: relative;
        border: 1px solid #465468;
    }
    img{
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
</style>
html:
<div>
    < img src="mm.jpg">
  </div> <!--定位为上下左右为0，margin：0可以实现脱离文档流的居中.-->
(2)margin负值法
container{
    width: 500px;
    height: 400px;
    border: 2px solid #379;
    position: relative;
}
.inner{
    width: 480px;
    height: 380px;
    background-color: #746;
    position: absolute;
    top: 50%;
    left: 50%;margin-top: -190px; /*height的一半*/
    margin-left: -240px; /*width的一半*/
}
补充：其实这里也可以将marin-top和margin-left负值替换成，
transform：translateX(-50%)和transform：translateY(-50%)
(3)table-cell（未脱离文档流的）
设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。
css:
div{
    width: 300px;
    height: 300px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}

1.4 Css3的新属性有哪些(写出4-5种)，用c3实现一个元素简单的动画效果？

Animation: 
background-origin: 边框圆角相关
box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。
Opacity：透明度
Transfrom：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}

动画效果：
<!DOCTYPE html>
<html>
<head>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            animation:animation 5s;
        }

        @keyframes animation
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Js

2.1 Javascript中字符串和数组常用的操作方法？

请写出字符串常用的操作方法(3-4)种？数组的常用操作方法（5-6）种？分别写出方法的作用？
字符串常用的操作方法：
1、length():统计当前字符串的字符个数
2、indexOf()：查找指定字符再字符串中的位置
3、toUpperCase():将字符串中的字符变为了大写形式
4、toLowerCase():将字符串中的字符变为小写
5、substring:截取字符串
6、replaceAll:替换当前字符串中指定内容
7、trim:能够去掉当前字符串中两端的空格
8、charAt:找到指定字符串中位置的字符
数组的常用操作方法：
1、push（末尾添加添加一个或多个元素）和unshift(首位添加添加一个或多个元素)方法；
2、pop(末尾删除)和shift(首位删除)方法
3、concat（）方法；不改变原数组，返回值，为拼接后的新数组
4、indexOf(value, index)查询数组是否存在value值，存在返回索引，不存在返回-1；第二参数，index，表示从数组为index的索引值开始查找,默认从第一个数组元素开始查询，方向向数组的最后一个元素方向查询。
5、lastIndexOf（value， [,index]）从数组后面一个元素向前查询；
6、indexOf(value, index)查询数组是否存在value值，存在返回索引，不存在返回-1；第二参数，index，表示从数组为index的索引值开始查找,默认从第一个数组元素开始查询，方向向数组的最后一个元素方向查询。
7、lastIndexOf（value， [,index]）从数组后面一个元素向前查询；
8、slice:截取数组，不改变原数组。
9、splice:截取数组，改变原数组的一个方法，可以实现删除插入替换数组元素等功能。

2.2 用jquery的方法实现ajax数据请求，并且渲染到页面中？

var http=new XMLHttpRequest();
http.open("get","./list/data.txt");

http.send();
http.onreadystatechange=function (){
    if(http.readyState==4)
    {
        var data=JSON.parse(http.response);
        console.log(data);
    }
}

2.3 给一个元素添加点击事件，使其动画效果隐藏（原生，jquery方法）？

<!DOCTYPE html>
<html>
<head>
    <style>div {
        position: absolute;
        background-color: #333333;
        left: 0;
        top:30px;
        width: 60px;
        height: 60px;
        margin: 5px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <button id="go">go</button>
    <button id="stop">stop</button>
    <div class="block"></div>
    <script>
        $("#go").click(function(){
             $(".block").animate({left: '+=100px'}, 2000);
        });
        $("#stop").click(function(){
            $(".block").stop();
        });
</script>
</body>
</html>

2.4 编一个方法求一个字符串的字节长度？

<script>
           function GetBytes(str) {
              var len=str.length;
              var bytes=len;
              for(var i=0;i<len;i++){
               if(str.charCodeAt(i)>255)
               bytes++;
               }
              return bytes;
           }
          alert(GetBytes('中国'))
    </script>

2.5 如何获取浏览器URL中查询字符串的参数？

$(function(){
    var obj={};
    function getParams(){
        var href=window.location.href;
        var args=href.split('?')
        if(args[0]==href){//说明没有传递参数
            return;
        }

        var arr=args[1].split('&');
        for(var i=0;i<arr.length;i++){
            var arg=arr[i].split('=');
            obj[arg[0]]=arg[1];
        }
        return obj;
    }
    getParams();
    console.log(obj);
})

tracy-迪

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端面试题1

HTML CSS1.1 行内元素，块级元素，行内块计元素有哪些？相互之间怎样转换？行内元素：<span>、 < img> 、<a> 、<input> 、<selecet> 、<i> <textarea>块级元素： <div> <ul> <ol> <li>...
复制链接

扫一扫