CSS常用面试题最近开始面试别人了，之前没有过这方面的经验，想总结一些常用面试题，给自己做一个参考，欢迎指导和补充~~~

前言

目前所在公司新成立了一个部门，由于人手紧缺，一直在招人，也分给了我一些面试任务。

本人从事前端刚刚两年多一点的时间，之前也没有过面试别人的经验，为了不给自己和公司丢人，打算总结一些常见的面试题，也正好趁此机会，进行一波复习和总结。

目前打算分几个大类进行总结：

CSS
JavaScript
typescript
vue
react
微信网页开发和微信小程序
react-native
webpack
算法？？？

算法先打个问号吧，首先我自己对算法都知之甚少，再者我们这类小公司，应该也不会有太厉害的人来面试。这一块就先当做自己的一个学习吧！

CSS常用面试题

1. CSS盒子模型

包括content、padding、border、margin

box-sizing: content-box | border-box; 控制盒子模型解析模式，默认content-box

content-box模式下，设置的宽高为内容区域的宽高
border-box模式下，设置的宽高为content+padding+border

2. CSS常用选择器种类以及优先级

!important 1000
内联样式 100
id选择器 10
class选择器 10
属性选择器 10
- 例如 a[title] 表示带有title属性的a标签
伪类选择器 10
- a:hover
- p:first-child
元素/标签选择器 1
通配符选择器 0

3. 让一个子元素在父元素中居中有几种方式

绝对定位

.parent {
   position: relative;
   width: 400px;
   height: 400px;
   border: 1px solid black;
 }
 .child {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   margin: auto;
   width: 50px;
   height: 50px;
   border: 1px solid red;
 }

flex布局

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    border: 1px solid black;
}
.child {
    width: 50px;
    height: 50px;
    border: 1px solid red;
}

4. flex弹性布局

容器属性

.box {
  display: flex; // 将容器指定为flex布局
  flex-direction: row(default) | row-reverse | column | column-reverse; // 布局方向
  flex-wrap: nowrap(default) | wrap | wrap-reverse; // 子元素换行规则
  flex-flow: <flex-direction> || <flex-wrap>;
  justify-content: flex-start(default) | flex-end | center | space-between | space-around; // 子元素主轴排列方式
  align-items: flex-start | flex-end | center | baseline | stretch(default); // 子元素交叉轴上的排列方式，子元素没有高度将默认占满容器高度
  align-content: flex-start | flex-end | center | space-between | space-around | stretch(default); // 多条主轴情况下的对齐方式
}

子元素属性

.child {
  order: <integer>; // 定义项目的排列顺序，数值越小排列越靠前，默认0
  flex-grow: <number>; // 定义项目的放大比例，默认0，存在剩余空间也不放大
  flex-shrink: <number>; // 定义项目的缩小比例，默认1，空间不足，该项目将缩小
  flex-basis: <length> | auto; // 定理了分配多余空间之前，该项目占据的主轴空间。默认auto，即项目本来大小
  flex: none | [<flex-grow><flex-shrink>? || <flex-basis>];
  align-self: auto | flex-start | flex-end | center | baseline | stretch; // 项目自身在交叉轴的对齐方式，可覆盖父元素的align-items属性
}

5. rem响应式布局

先了解一下em，em是相对单位，1em相当于父元素的font-size的大小

原理：rem是相对单位，1rem相当于html标签设置的font-size大小

通过JS进行设置：

<noscript>开启JavaScript，获得更好的体验</noscript> 
<script>
// 假设设计图尺寸宽度为750px
window.onload = () => {
  window.addEventListener('resize', () => {
    let deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
    let htmlEle = document.getElementsByTagName('html')[0];
    deviceWidth = deviceWidth > 750 ? 750 : deviceWidth;
    htmlEle.style.fontSize = (deviceWidth / 750) * 100 + 'px';
  });
};
</script>

6. CSS3常用属性

1）多媒体查询

@media <not | only | all>? mediaTYpe and (media feature) {
  css 代码
}

not、only、all操作符可选，默认是all，设置会应用于所有设备
mediaType：all | print | screen | apeech
- all，所有类型
- print，打印机
- screen，电脑屏幕、平板、智能手机等
- speech，屏幕阅读器
media feature: 媒体功能，例如：
- max-width
- min-height
- ...

2）渐变

线性渐变

background-image: linear-gradient(direction | angle, color1, color2, ...)

direction: 渐变方向，默认从上到下，可选项（to right | to bottom right）等
angle: 渐变角度，水平线和渐变线之间的角度，以逆时针方向计算。

径向渐变

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape：定义形状，可选cicle | ellipse，默认ellipse，椭圆形

3）2D转换

div{
  transform: translate(x, y) | rotate(angle) | scale(x,y) | ...
}

translate: 沿着x和y轴平移
rotate: 沿着中心旋转
scale: 进行缩放

4）过渡

div{
  transition: property duration timing-function delay
}

property: 规定过渡的CSS属性名称
duration: 规定过渡花费时间
timing-funtion: 规定过渡效果的时间曲线，默认是ease
delay: 规定过渡效果的延迟时间

5）动画

语法

// 创建动画
@keyframes name {
  // 动画过程
  from { css代码... }
  to { css代码... }
  
  // 或者
  0% { css代码... }
  25% { css代码... }
  50% { css代码... }
  100% { css代码... }
}

// 使用动画
animation: name, duration, timing-function, fill-mode, delay, iteration-count, deraction

name: 使用的动画名称
duration: 完成动画所需时间
timing-function：速度曲线，ease | linear | ...
fill-mode：动画不播放或者完成时，应用到元素的样式
delay: 动画延迟时间
iteration-count：动画播放次数，默认1，可选项 infinity，无限循环
deraction：动画是否在下周期逆向播放，默认是normal

示例

// 创建动画
@keyframes myanimation {
  from { css代码... }
  to { css代码... }
}
div {
  animation: myanimation, 5s, linear, 1s, infinite, alternate 
}

7. CSS预处理语言

Less

变量

@basicColor: '#ffffff';
@globalWidth: 1000px;
@contentWidth: @globalWidth - 20px;

混合

.childCenter{
    display:flex;
    justify-content: 'center';
    align-items: 'center';
}

myDiv {
  .childCenter();
  background-color: '#ffffff';
}

运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。
转译
转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。

@min751: ~"(min-width: 751px)"
.ele {
  @media @min751 {
    font-size: 20px
  }
}

函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。

@base: #f04615; 
@width: 0.5; 
.class { 
  width: percentage(@width); // returns `50%` 
  color: saturate(@base, 5%); // 颜色饱和度增加5%
  background-color: spin(lighten(@base, 25%), 8); // 颜色亮度降低 25% 并且色相值增加 8
}

命名空间和访问符

#bundle() { 
  .button { 
    display: block; 
    border: 1px solid black; 
    background-color: grey; 
    &:hover { background-color: white; } 
  } 
  .tab { ... } 
  .citation { ... } 
}

// 将 .button 混合到下面的样式中
#header a { 
  color: orange; 
  #bundle.button(); // 还可以书写为 #bundle > .button 形式 
}

导入

@import 'global'; // 如果是 .less 文件，可以省略扩展名
@import 'index.css';

欢迎大家指导和补充，共同成长~~~