前端面试题汇总:css、html、js

1.css与html

absolute和relative分别依据什么定位的？

• relative依据自身定位
• absolute是依据最近一层的定位元素定位

定位元素 absolute relative fixed body

居中对齐有哪些实现方式?

水平居中

 垂直居中

响应式布局

2.flex布局

主要属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

容器的属性

flex-direction:属性决定主轴的方向（即项目的排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

flext-wrap:默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

 flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content:属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items:属性定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

项目的属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}

 flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

align-self:属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

3.js面试题

4.手写JavaScript防抖和节流

5.手写算法：快速排序、冒泡排序、数组去重

6.手写深拷贝

<script>
        // 深拷贝
        const obj1 = {
            name: "deepclone",
            age: 18,
            adress: {
                city: "bejing"
            },
            arr: [1,2,3]
        }
        const obj2 = deepClone(obj1);
        obj2.adress.city = "shanghai"
        console.log(obj1.adress.city) //beijing

        function deepClone( obj={} ){
            
            if(typeof obj !== 'object' || obj == null){
                // obj是null或者不是对象或者数组，直接返回
                return obj
            }
            // 初始化返回结果
            let result
            if (obj instanceof Array) {
                result = []
            }else{
                result = {}
            }
            for (let item in obj) {
                console.log(item)
                if (obj.hasOwnProperty(item)) {
                    result[item] = deepClone(obj[item])
                    
                }
            }
            return result

        }


    </script>

7.怎么判断一个空对象

8.async await、promise

9.原型链

10.set和数组有啥区别

二、补充

css面试题总结 - 掘金

 

 

 

 比例为，body下的p的font-size乘以比例

百分比为，body的font-size乘以百分比

 rem结合媒体查询做响应式

弊端：阶梯性