2020 秋招知识点总结 -- ( CSS篇 ) 🏆 掘金技术征文|双节特别篇因为近期一直在忙着找实习和毕业的事

前言

Hello 大家好，这是一篇近期关于面试总结的文章，目前是在校大四学生，文章形式主要以问题和答案的方式展现，可能会有不全面的的地方，希望大家批评指正，一方面是记录自己的知识点，另一方面是分享出来给需要的小伙伴！！！

所有的知识点都会慢慢整理到 Github 快来给我Star呀😊~

因为近期一直在忙着找实习和毕业的事情，没有时间整理出来。希望大家看完能够重温一下基础。

1. 介绍一下标准的CSS的盒子模型？

分类：IE 盒子模型、W3C 盒子模型

盒模型构成：内容(content)、填充(padding)、边界(margin)、边框(border)

标准(W3C)盒模型：宽度 = width + padding + border + margin
怪异(IE)盒模型：宽度 = width + margin
如何设置css：box-sizing：border-box 触发怪异模式

2. CSS3优先级算法如何计算？不同选择器的权重

优先级排序：!important > id > class > tag
!important 比内联样式优先级高
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

  /*权重为1*/
  div{
  }
  /*权重为10*/
  .class1{
  }
  /*权重为100*/
  #id1{
  }
  /*权重为100+1=101*/
  #id1 div{
  }
  /*权重为10+1=11*/
  .class1 div{
  }
  /*权重为10+10+1=21*/
  .class1 .class2 div{
  }

3. 如何创建块级格式化上下文、BFC有什么用

BFC，块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位互不影响

触发条件(任选其一)

float 值不为none
overflow 的值不为visible
display 的值为 table-cell、inline-block
position 的值不为 static 或 relative

开发中的应用

阻止 margin 重叠
清除浮动
自适应两栏布局

4. 清除浮动的几种方式

父级 div 定义 height
结尾处加一个空 div clear:both
父级 div 定义 overflow:hidden
父级 div 定义伪类 :after 和 zoom

5. 说一下定位

absolute：绝对定位，相对于 static 以外的第一个父元素
fixed：绝对定位，相对于浏览器窗口进行定位
relative：相对定位，相对于其正常位置进行定位

6. 几种常见的CSS布局

垂直居中

// 第一种 绝对定位
#parent{
  position:relative;
  height:400px;
  .son{
   position:absolute;
   width:100px;
   height:100px;
   top: 50%;
   transform: translateY(-50%); 
  }
}
// 第二种 flex布局
#parent{
   display:flex;
   align-items:center;
   height:400px;
  .son{
    width:100px;
    height:100px;
  }
}
// 第三种  margin
#parent{
  position:relative;
  height: 400px;
  .son{
   position:absolute;
   width:100px;
   height:100px;
   top:0;
   bottom:0;
   margin:auto; 
  }
}

水平居中

// 多个块级元素
#parent{
  height:100px;
  text-align:center;
  .son{
    width:100px;
    height:100px;
    display:inline-block;
  }
}
// 绝对定位
#parent{
  position:relative;
  height:100px;
  .son{
    position:absolute;
    width:100px;
    height:100px;
    left:50%;
    transform:translateX(-50%)
  }
}
// 块级元素
#parent{
  height:100px;
  .son{
    width:100px;
    height:100px;
    margin:0 auto;
  }
}
// 行内元素
#parent{
  height:100px;
  .son{
    width:100px;
    height:100px;
    display:inline-block;
    text-align:center;
  }
}
// flex布局
#parent{
  display:flex;
  justify-content:center;
  height:100px;
  .son{
    width:100px;
    height:100px;
  }
}

左定宽右自适应

// flex 布局
 #Box{
  width: 100%;
  height:400px;
  .left{
    float:left;
    width:100px;
    height:400px;
  }
  .right{
    flex:1;
    height:400px;
  }
}
// float + margin 
 .left {
      float: left;
      width: 100px;
      height: 100%;
      background-color: antiquewhite;
   }
 .right {
      margin-left: 100px;
      height: 100%;
      background-color: rgb(77, 87, 184);
   }
// float + overflow
 .left {
      float: left;
      width: 100px;
      height: 400px;
      background-color: antiquewhite;
   }
   .right {
      height: 400px;
      overflow: hidden;
      background-color: rgb(77, 87, 184);
    }

7. 请用CSS3写一个旋转的硬币

.coin{
  width:100px;
  height:100px;
  transform-style:preserve-3d;
  transform: rotate3d(-1, -1, 0, 45deg);
  animation: coin 15s linear;
}
.coin>div{
  position:absolute;
  width:100px;
  height:100px;
}
.front{
  width:100px;
  height:100px;
  border-radius:50%;
  transform: translateZ(2px); // 硬币厚度
}
.back{
  width:100px;
  height:100px;
  border-radius:50%;
}
@keyframes coin{
  from{
    transform: rotateY(0deg);
  }
  to{
    transform: rotateY(360deg);
  }
}

8. 什么是外边距重叠? 重叠的结果是什么? 如何解决?

外边距重叠就是在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为重叠

重叠后的结果分为下面三种

两个相邻的外边距都是正数时，结果取较大的值
两个相邻的外边距都是负数时，结果取绝对值的较大值
两个外边距一正一负时，结果是两者的相加的和

解决方法

为父元素添加 overflow:hidden

9. px、em和rem的区别?

px em 和rem都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易
em的值不是固定的，并且em会继承父级元素的字体大小。
rem相对于根元素(元素)

10. Link 与 @import 的区别

link是HTML方式。@import 是CSS方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)
link 优于 @important

11. 什么是FOUC?

Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。

12. CSS哪些属性可以继承？哪些属性不可以继承

可继承的样式：font-size font-family color UL LI DL DD DT
不可继承的样式：**border padding margin width height **

🏆 掘金技术征文|双节特别篇

2020 秋招知识点总结 -- ( CSS篇 ) 🏆 掘金技术征文|双节特别篇

前言

1. 介绍一下标准的CSS的盒子模型 ？

2. CSS3优先级算法如何计算 ？不同选择器的权重