秋招前端面经总结-4

最新推荐文章于 2024-11-11 09:45:18 发布

Olivia0319

最新推荐文章于 2024-11-11 09:45:18 发布

阅读量167

点赞数

文章标签：前端面经秋招

本文链接：https://blog.csdn.net/Olivia0319/article/details/103369839

版权

1. link与@import

相同点：都可以对CSS样式进行外部引用。

不同点：

link方式
- link是html标签，不仅可以用来加载css文件，还可以用来定义RSS、rel连接属性等。
- 在页面加载时同时加载
- 无兼容性问题
- 可通过JS操作DOM，插入link标签来改变样式；

<link rel='stylesheet' type='text/css' href='./test.css'>

@import方式
- @import的css标签，只能用来引用css样式
- @import是在页面内容加载完成之后加载
- 是CSS2.1才有的语法，有兼容性问题

<style type="text/css">
@import url('./test.css');
</style>

2. display属性

规定了元素以何种方式展示。该属性不支持继承。

inline 默认值，一般内联元素不能设置宽高，img/input有内在尺寸的除外。
none 此元素不显示
- visibility: hidden 将该元素隐藏不可见，但是仍占据页面空间
- display: none 不展示该元素，不占用空间
block 该元素显示为块级元素
inline-block 行内块，结合了inline和block的特点
- 保持了inline元素不换行的特性
- 可以设置width和height属性
- 此时内联块元素之间会有一定的空白，可以将font-size设为0取消空白
table 作为块级表格来显示，解决了需要使用表格特性不需要表格语义的情况。但此时没法设置padding
inherit 规定从父元素继承display的值

3. display:none与visibility:hidden

是否脱离文档流
- display: none会使元素脱离文档流，不占据原来的空间，引起页面的重排
- visibility:hidden 只是使元素不可见，不会脱离文档流，仍占据原来的位置
关于继承
- display: none 子元素不会继承display: none。子元素不显示是由于它不能脱离父元素单独显示
- visibility: hidden 会被子元素继承，子元素不显示是由于继承了hidden。可以将子元素设置为visibility: visible来显示
关于计数：比如有序列表中
- visibility: hidden 不会影响计数器的计数

4. BFC

BFC是块级格式化上下文，是web页面的可视化css渲染出的一部分内容。

BFC创建条件：

浮动元素（float不为none）
绝对定位元素（position为absolute或fixed）
内联块（display为inline-block）
具有overflow不为visible的块元素

BFC约束规则：

内部的Box会在垂直方向上一个接一个的放置
同一个BFC中两个相邻Box的margin会发生重叠
BFC的高度包括浮动子元素的高度
BFC是独立的，BFC内外的元素不会互相影响

BFC的应用：

防止margin重叠
清除内部浮动，防止父元素高度塌陷
防止元素被浮动元素覆盖

5. CSS footer Sticky

利用flex布局，给主体内容部分设置flex: 1

<div class="container">
    <div class="content"></div>
    <div class="footer"></div>
</div>

.container {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
}
.footer {
    border: 1px solid #000;
    height: 50px;
}

利用margin和padding

<div class="container">
    <div class="content"></div>
</div>
<div class="footer"></div>

.container {
    min-height: 100%;
}
.content {
    padding-bottom: 50px;
}
.footer {
    height: 50px;
    margin-top: -50px;
}

6. src和href的区别

都是用于对外部资源的引入。

href主要用于建立标签和外部资源之间的关系
src主要用于替代该元素

7. 响应式设计

物理像素与逻辑像素

物理像素（设备像素）：分辨率。显示屏是由一个个物理像素点组成的，单位pt
逻辑像素（CSS像素） viewport中的一个小方格
像素比：物理像素与逻辑像素之间的比例

响应式布局

实现在不同屏幕分辨率的终端上浏览网页的不通过展示方式。

设置meta标签，使用设备的宽度作为视图宽度并禁止缩放

<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>

通过媒介查询来设置样式
- 宽度可以使用百分比
- 图片的处理可以使用width: auto，max-width: 100%

8. readonly disabled的区别

作用都是使用户不能更改表单域中的内容，使元素成为不可用的状态。

区别：

readonly只针对于input和textarea等可以输入的元素，disabled对所有的表单元素均有效
disabled属性阻止对元素的一切操作，eg：获取焦点、失去焦点；readonly只是将元素设为可读，其余一切操作正常
disabled可以让该表单元素的值不会被提交，但是readonly会被提交。

9. 实现三列布局，两侧固定，中间自适应

使用flex布局

<div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</div>

.container {
    display: flex;
}
.left, .right {
    width: 150px;
    height: 200px;
    border: 1px solid #eee;
}
.center {
    flex: 1;
    border: 1px solid red;
}

使用绝对定位+margin

.container {
    position: relative;
}
.left, .right {
    position: absolute;
    width: 150px;
    height: 200px;
    border: 1px solid #eee;
}
.left {
    top: 0;
    left: 0;
}
.right {
    top: 0;
    right: 0;
}
.center {
    /* 子元素默认width是100%，给子元素添加padding和margin时，内容的宽度是父元素的宽度减去子元素的margin和padding */
    margin: 0 152px;
    height: 200px;
    border: 1px solid red;
}

浮动定位，此时center结构需要放在最后

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <!--center占据文档流位置，需要放在最后-->
    <div class="center">center</div>
</div>

.left, .right {
    width: 150px;
    height: 200px;
    border: 1px solid #eee;
}
.left {
    float: left;
}
.right {
    float: right;
}
.center {
    margin: 0 152px;
    height: 200px;
    border: 1px solid red;
}

为了先渲染主要部分center。双飞翼布局

<div class="container">
    <div class="center col">
        <div class="center-wrap">center</div>
    </div>
    <div class="left col">left</div>
    <div class="right col">right</div>
</div>

.col {
    float: left;
}
.left, .right {
    width: 150px;
    height: 200px;
    border: 1px solid #eee;
}
.left {
    margin-left: -100%;
}
.right {
    margin-left: -152px;
}
.center {
    width: 100%;
    height: 200px;
    border: 1px solid red;
}
.center-wrap {
    margin: 0 152px;
}

10. vue中v-if和v-show的区别

相同点：

判断DOM节点是否需要显示

不同点：

v-if根据数据真假判断直接从DOM树上删除或重建元素节点
v-show仅仅修改元素的CSS样式display的值，元素始终在DOM树上。

11. js对象的扁平化

Object.flatten = function(obj){
    var result = {};
    function recurse(src, prop) {
        var toString = Object.prototype.toString;
        if (toString.call(src) == '[object Object]') {
            var isEmpty = true;
            for (var p in src) {
                isEmpty = false;
                recurse(src[p], prop ? prop + '.' + p : p)
            }
            if (isEmpty && prop) {
                result[prop] = {};
            }
        } else if (toString.call(src) == '[object Array]') {
            var len = src.length;
            if (len > 0) {
                src.forEach(function (item, index) {
                    recurse(item, prop ? prop + '.[' + index + ']' : index);
                })
            } else {
                result[prop] = [];
            }
        } else {
            result[prop] = src;
        }
    }
    recurse(obj,'');
    return result;
}