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

3,210 阅读5分钟

前言

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 定义伪类 :afterzoom

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 **

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