前端面试题

最新推荐文章于 2024-07-04 16:37:43 发布

大脸小覃

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量86

点赞数

分类专栏：前端面试文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_50107303/article/details/123156726

版权

前端面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端面试分析

css

1.盒子模型的宽度—offsetwidth

offsetwidth = content+padding+border+margin

布局的时候有时候并不希望padding会撑大原来的盒子，所以css3中推出了box-sizing的属性,默认content-box（标准盒模型），另一个属性border-box（ie盒模型也叫怪异盒模型，content包括padding和border）

2.相邻元素之间margin重叠

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

3.margin负值

margin-top为负值：向上位移

margin-bottom为负值：不会位移,而是会减少自身供css读取的高度.

margin-left为负值：向左偏移

margin-right为负值：不会位移,而是会减少自身供css读取的宽度.

4.bfc

格式化上下文，是一片独立的渲染区域，内部元素的渲染不会印象边界以外的元素

形成bfc的条件

1.float除none以外的值

2.position–absolute，fixed

3.display–inline-blck，table-cell，table-caption

4.overflow除visible以外的值

bfc的作用

解决高度塌陷的问题，清除浮动，清除浮动元素对父元素的影响，创建自适应布局（例如圣杯布局和双飞翼布局）

5.圣杯布局与双飞翼布局

圣杯布局用margin负值和float，防止中间内容覆盖用margin

双飞翼布局用margin和float，防止中间内容覆盖用padding

body{

      margin: 0;

      padding: 0;

    }

    .container{

      padding-left: 200px;padding-right: 200px;

      /* background-color: pink; */

      /* overflow: auto; */

    }

    .container:after{

      display: table;

      content: '';

      zoom: 1;

      clear: both;

    }

    .container div{

      position: relative;

    }

    .middle{

      background-color: goldenrod;

      float: left;

      width: 100%;

    }

    .left{

      background-color: aqua;

      float: left;

      width: 200px;

      margin-left: -100%;

      right: 200px;

    }

    .right{

      background-color: blueviolet;

      float: left;

      width: 200px;

      margin-left: -200px;

      left: 200px;

    }

    footer{

      background-color: chartreuse;

    }

  </style>

</head>



<body>

  <header>

    <h4>Header内容区</h4>

  </header>

    <div class="container">

        <div class="middle">

      <h4>中间弹11111111111111111111111111111性区</h4>

    </div>

        <div class="left">

      <h4>左边栏</h4>

    </div>

        <div class="right">

      <h4>右边栏</h4>

    </div>

  </div>

  <footer>

    <h4>Footer内容区</h4>

  </footer>

</body>

手写clearfix

xxx:after{

content:’’;

clear:both;

display:table

}

ie兼容时添加zoom：1即可

6.三色骰子

原理：flex布局

 body{

      margin: 0;

      padding: 0;

    }

    .box{

      display: flex;

      justify-content: space-between;

      

      width: 300px;

      height: 300px;

      background-color: beige;

      border: 2px solid pink;

    }

    .box div{

      width: 30px;

      height: 30px;

      border-radius: 30px;

      background-color: black;

    }

    .box div:nth-child(2){

      align-self:center

    }

    .box div:nth-child(3){

      align-self:flex-end

    }

<div class="box">
        <div> </div>
        <div></div>
        <div></div>
   </div>

6.rem

长度单位

px绝对长度单位

em相对长度单位。相对于父元素，不常用

rem行对长度单位，相对于根元素，常用语响应式布局，定义在html上根元素的大小，例如html{font-size：100px}，p{0.12rem}实际大小就是100px/0.12

7.vw，vh视口的宽度和高度

screen：整个屏幕的大小

innerHtml：不包括上面下面网页框框的高度 === 100vh，vw

body.clientheight：整个内容的高度

js

1.数据类型

null是一种特殊的引用类型—typeof null —object

2.深拷贝

注意判断值类型和引用类型
注意判断是数组还是对象
递归

function deppclone(obj){
    let cloneobj
    //判断当前数据的类型，如果是普通类型直接复制,
    if (obj && typeof obj !== 'object') {
        cloneobj = obj
    }else if(obj && typeof obj === 'object'){//当输入的内容是对象时
     //判断是数组还是对象
     cloneobj =  Array.isArray(obj) ?[]:{}

     //遍历数据对象
     for(let key in obj){
       //判断对象是否有key属性
       if(obj.hasOwnProperty(key)){
           //判断当前元素是否为对象
           if(obj[key] && typeof  obj === 'object'){
               //如果是对象的话继续遍历
            cloneobj[key] =   deppclone(obj[key])
           }else{
            cloneobj[key] = obj[key]
           }
       } 
     }
    }
    //抛出
    return cloneobj
}
 deppclone({
            x: 1,
            y: [ 5, 6, 7 ],
            z: {
                a: 0,
                b: 1
            }
            })

3.变量计算-类型转换

100==‘100’ //true

0==‘’//true

0==false//true

false == ''//true

null==undefined ''true



除了 == null以为，其他一律用 === 例如：
const obj = {x:100}
if(obi.a == null){}  等同于 if(obi.a === null ||obi.a === undefined  ){}

4.class 类

是一种面向对象的语法实现，一般首字母大写

//创建类
class Top{
    constructor(name,age){
        this.name = name,
        this.age = age
    }
    setup(){
        console.log( 
            `打印 ${this.name},${this.age}`
        )
    }
}
//通过new来实例化对象
const person = new Top('覃',24)
 person.setup()

实现jQuery

class jQuery{
    constructor(selector){
        const result = document.querySelectorAll(selector)
        const length = result.length
        for(let i=0;i<length;i++){
            this[i] = result[i]
        }
        this.length = length
    } 
    get(index){
        return this[index]
    }
     ......可以自己去实现很多方法
}

5.继承

//继承
class Secend extends Top{
    constructor(name,number){
        super(name)
        this.number = number
    }
    change(){
        console.log(`${this.name}${this.number}`)
    }
}

6.原型

每一个class都有显式原型prototype
每一个实例都有隐式原型 __proto__
实例的__proto__指向对应class的prototype

请添加图片描述

大脸小覃

关注

0
点赞
踩
0

收藏

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

前端面试分析css1.盒子模型的宽度—offsetwidthoffsetwidth = content+padding+border+margin布局的时候有时候并不希望padding会撑大原来的盒子，所以css3中推出了box-sizing的属性,默认content-box（标准盒模型），另一个属性border-box（ie盒模型也叫怪异盒模型，content包括padding和border）2.相邻元素之间margin重叠两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个
复制链接

扫一扫