前端面试

最新推荐文章于 2023-02-08 22:55:37 发布

程晓堂

最新推荐文章于 2023-02-08 22:55:37 发布

阅读量115

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/liguixl/article/details/103936680

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第1天

1、用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

       // 6 行写完
        function buildArray(arr, length, min, max) {
            var num = Math.floor(Math.random() * (max - min + 1)) + min;
            if (!arr.includes(num)) { arr.push(num); }
            return arr.length === length ? arr : buildArray(arr, length, min, max);
        }
        var result = buildArray([], 5, 2, 32);
        console.table(result);

2、圣杯布局和双飞翼布局的理解和区别，并用代码实现

//圣杯布局代码：

<body>
<div id="hd">header</div>
<div id="bd">
  <div id="middle">middle</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}
</style>

//双飞翼布局代码：

<body>
<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}

/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
</style>

3、页面导入样式时，使用link和@import有什么区别？

1）从属关系的区别：link属于XHTML标签，而@import是CSS提供的语法规则，link除了加载CSS，还可以定义RSS，定义rel连接属性等，@import就只能加载CSS。
2）加载顺序的区别：页面加载时，link会同时被加载，而@import引用的CSS会等页面被加载完后再加载。
3）兼容性的区别：@import只有IE5以上才能被识别，而link是XHTML标签，无兼容问题。
4）DOM可控性区别：通过js操作DOM,可以插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式

第2天写一个方法去掉字符串中的空格

var trim = function(str){
return str.replace(/\s*/g,"");
}
str.replace(/\s*/g,""); //去除字符串内所有的空格
str.replace(/^\s*|\s*$/g,""); //去除字符串内两头的空格
str.replace(/^\s*/,""); //去除字符串内左侧的空格
str.replace(/(\s*$)/g,""); //去除字符串内右侧的空格

第2天 CSS3有哪些新增的特性

边框(borders):

    border-radius 圆角
    box-shadow 盒阴影
    border-image 边框图像

背景:

    background-size 背景图片的尺寸
    background_origin 背景图片的定位区域
    background-clip 背景图片的绘制区域

渐变：

    linear-gradient 线性渐变
    radial-gradient 径向渐变

文本效果;

    word-break
    word-wrap
    text-overflow
    text-shadow
    text-wrap
    text-outline
    text-justify

转换：

    2D转换属性
    transform
    transform-origin
    2D转换方法
    translate(x,y)
    translateX(n)
    translateY(n)
    rotate(angle)
    scale(n)
    scaleX(n)
    scaleY(n)
    rotate(angle)
    matrix(n,n,n,n,n,n)

3D转换：

*3D转换属性：

    transform
    transform-origin
    transform-style
    3D转换方法
    translate3d(x,y,z)
    translateX(x)
    translateY(y)
    translateZ(z)
    scale3d(x,y,z)
    scaleX(x)
    scaleY(y)
    scaleZ(z)
    rotate3d(x,y,z,angle)
    rotateX(x)
    rotateY(y)
    rotateZ(z)
    perspective(n)

过渡

    transition

动画

    @Keyframes规则
    animation

弹性盒子(flexbox)
多媒体查询@media

程晓堂

关注

0
点赞
踩
0

收藏

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

第1天 1、用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值 // 6 行写完 function buildArray(arr, length, min, max) { var num = Math.floor(Math.random() * (max - min + 1)) + min; ...
复制链接

扫一扫