面试题集锦

通用：

https://www.cnblogs.com/vsmart/p/8889130.html

https://blog.csdn.net/xm1037782843/article/details/80708533

有一个网站可以看挺多面试的：

腾讯：https://www.kanzhun.com/gsm5855.html?ka=com-blocker1-interview#co_tab

阿里巴巴：https://www.kanzhun.com/gsm9012.html?ka=com-blocker1-interview#co_tab

百度：https://www.kanzhun.com/gsm2070269.html?ka=com-blocker1-interview#co_tab

值得记录的考点（暂时只看了前端的）：

1.跨域

2.CSS的FLEX

3.从地址栏输入网址开始

4.

。。。

【实习要关注地点、公司质量、月薪等】

通过看实习要求了解到的：

0.基础：

HTML5 \ CSS3 \ JS \ JQ \ Bootstrap \ VUE \ JSON \ 小程序\常见的算法

1.W3C标准、兼容性、Ajax 、DOM、

2. git版本管理、Webpack 、了解vue技术栈

3.ES6、 Js基础(原生、面向对象、数据驱动、组件化)

4.photoshop

{

1. 要用过vue 做过一个完整的网站，基本功能：增删改查，登录，登出，要齐全（Vue + Vuex + VueRouter）；
2. JavaScript作用域，闭包，函数回调，ES6的常用特性，跨域原理都要有所了解和使用；
3. css布局（水平垂直居中，圣杯等），盒子模型，对使用 CSS 预处理有所了解和使用；
4. 懂得使用git；

}

5.vue cli模板进行组件设计和开发；

6. 了解逻辑回归、决策树、随机森林、时间序列等主流算法原理，有统计学背景优先；

7.设计模式，对MVC、MVVM框架有了解优先；

答案：

1.跨域

https://blog.csdn.net/m_jack/article/details/80497617

2.新特性

CSS3新特性——边框（圆角、阴影、图片）；图片背景（大小、显示区域、多重叠加）；文本（阴影、换行）；字体（@font-face）；

转换（2D/3D：旋转、缩放、移动以及倾斜元素）；过渡；动画；多列文本；

http://www.w3school.com.cn/css3/css3_border.asp

https://segmentfault.com/a/1190000010089434

浏览器兼容性查询：

https://www.caniuse.com/

http://www.w3school.com.cn

CSS Flexible Box——给父元素设置灵活盒子的属性，就可以规定子元素的样式了【但是IE不兼容灵活盒子，Edge可以。顺带一提，Bootstrap兼容IE8-11，低版本的IE也是不行的】

【先display:box注意浏览器兼容】对齐（水平box-pack属性值start、center、end对应左中右；垂直box-align同理）；方向box-direction（可以内容文字倒序）、box-flex（可以像栅格结构那样分配子元素比例）、溢出换行box-lines、水平或者垂直排列元素box-orient

http://www.w3school.com.cn/cssref/index.asp

3.弹性盒子（flex布局）【大多数浏览器都支持弹性盒子，诸如 Firefox, Chrome, Opera, Microsoft Edge 和 IE 11，较新版本的 Android/iOS 等等。】

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox

给父元素设置display: flex;让父元素成为flex容器，子元素成为flex项目
能让子元素变成宽度相等高度也相等（宽高未设置时）的列，默认横向排列；

flex-direction: column;
设置纵向排列

row-reverse 和 column-reverse 值反向排列 flex 项目

flex-wrap: wrap
当子元素溢出边框，可以换行

flex-flow: row wrap;
缩写，等同于flex-direction: row;加上flex-wrap: wrap;


给子元素设置flex: 200px;
意味着每个元素的宽度至少是200px；然后自动适配窗口的宽度
当窗口宽度无法满足条件，就渐渐地趋向等比例分配项目宽度

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}
第一个是比例，第二个是最小宽度（横向排列时）。先给每个flex项目分配200px，剩下的宽度用来形成比例

------------------------------------------------------------------------------------
父元素设置
div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
align-items 控制 flex 项在交叉轴上的位置，这里实现了垂直居中
justify-content 控制 flex 项在主轴上的位置，这里实现左右留空，项目均匀间隔

子元素设置
button:first-child {
  order: 1;
}
可以控制flex项目的顺序，默认order都是0，大的排在后面

-----------------------------------------------------------------------------------
flex 嵌套
给flex项目设置display: flex;可以让它成为它的子元素的flex容器

4.网格布局（栅格布局）

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids

4.2 CSS栅格系统与弹性盒模型：实践比较

https://blog.csdn.net/sinat_32582203/article/details/70257778

5.bootstrap3栅格系统原理（float 加分配宽度百分比）

https://www.cnblogs.com/suwings/p/6079178.html

bootstrap4可以垂直排列了，实现原理（align-item）：

【bootstrap4栅格系统用了弹性盒子】

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" row="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hello, world!</title>
    <style>
        .container{
            width: 100%;
            background-color: pink;
        }
        .row{
            height:20px;
            border:1px solid black;
            margin-top:10px;
        }
        .align-items-start{
            align-items:start;
        }
        .align-items-center{
            align-items:center;
        }
        .align-items-end{
            align-items:end;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row align-items-start"></div>
    <div class="row align-items-center"></div>
    <div class="row align-items-end"></div>
</div>
</body>
</html>

6.CSS选择器

标签选择器：                                          p{}

ID选择器(id="唯一的ID名称")：                        #id{}

类选择器(class = "类名一 类名二 ...")：                .class{}


后代选择器（div）：                                     先代 后代1 后代2 ...{}

子元素选择器：                                           先代>直接子代>直接子代>...{}

交集选择器：                                                 选择器1选择器2...（例如#id.class）                     （不常用）

并集选择器：                                                              选择器1，选择器2...

相邻兄弟选择器（只选择前面选择器紧跟其后的那一个要找选择器，有相隔就不可以）：                 选择器1+选择器2+...

通用选择器（选择前面选择器后面的所有的要找选择器，可相隔可多个）：                                   选择器1~选择器2

！[先代、后代、直接子代、选择器n可以是标签/id/class]

序选择器：
——同级别的第n个
（需求标签:first-child、需求标签:last-child、需求标签:nth-child(n)、需求标签:nth-last-child(n)、需求标签:nth-child(odd)、需求标签:nth-child(even)、需求标签:nth-child(xn+y)【x，y自己取，n是0，1，2。。。】):
先找每个级别的第n个（倒数第n个，奇数、偶数、xn+y），若是需求标签，就生效

——同类型的第n个
(需求标签:first-of-type、需求标签:last-of-type、需求标签:nth-of-type(n)、需求标签:nth-last-of-type(n)、需求标签:nth-of-type(odd)、需求标签:nth-of-type(even)、需求标签:nth-of-type(xn+y)【x，y自己取，n是0，1，2。。。】）：
先找每个级别的需求类型的所有标签，再找该类型下的第n个（倒数第n个、奇数、偶数、xn+y）

——需求标签：only-child：
查看需求标签，如果满足父元素的孩子只有该需求标签，就生效

——需求标签：only-of-type：
查看需求标签，如果父元素的孩子中没有和该需求标签相同类型的子元素，就生效


属性选择器：
1.需求标签[指定属性] ：找需求标签，如果它有指定属性，就生效了
2.需求标签[指定属性 = 指定值]（常用于找input标签）：找需求标签，如果它有指定属性，且指定属性有指定值，就生效了
3.需求标签[指定属性^= 指定值开头]：找需求标签，如果它有指定属性，且指定属性值以指定值开头，就生效
4.需求标签[指定属性$= 指定值结尾]：找需求标签，如果它有指定属性，且指定属性值以指定值结尾，就生效
4.需求标签[指定属性*= 指定值包含]：找需求标签，如果它有指定属性，且指定属性值有指定值包含，就生效

通配符选择器：
*{ }：所有标签直接选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21-CSS选择器</title>
    <style>
    .div1{
        border:1px solid green;
    }
    .div1 p:first-child{
        color: red;
    }
    .div1 span:last-of-type{
        color: red;
    }
    .div1 h6:only-of-type{
        color: red;
    }


    .div2{
        border:1px solid red;
    }
    .div2 p[class]{
        color: green;
    }
    .div2 p[id = 'p2']{
        color: green;
    }
    .div2 p[id ^= 'p3']{
        color: green;
    }
    .div2 p[id $= 'p4']{
        color: green;
    }
    .div2 p[id *= 'p5']{
        color: green;
    }
    
    </style>
</head>
<body>
<div class="div1">
    <p>我是p (.div1 p:first-child)</p>
    <span>我是span</span>
    <p>我是p</p>
    <span>我是span(.div1 span:last-of-type)</span>
    <p>我是p</p>
    <h6>我是h6 (.div1 h6:only-of-type)</h6>
</div>

<br>

<div class="div2">
    <p class="p1">我是p1——.div2 p[class]</p>
    <p id="p2">我是p2——.div2 p[id = 'p2']</p>
    <p id="p3xxx">我是p3xxx——.div2 p[id ^= 'p3']</p>
    <p id="xxxp4">我是xxxp4——.div2 p[id $= 'p4']</p>
    <p id="xxp5xx">我是xxp5xx——.div2 p[id *= 'p5']</p>

</div>

</body>
</html>

~.CSS预处理器

简单比较：https://www.cnblogs.com/wyd168/p/6605225.html

LESS ： https://www.cnblogs.com/smyhvae/p/8476602.html