面试官提问CSS,什么？还不会，看看这里CSS经典面试考题

前言

CSS作为前端三件套之一，在面试时，它的热度也是非常高的，被问到的概率非常大，所以，下面我为大家列举一些非常经典的面试题目，希望对各位面试有所帮助!

正文

1. 说说你对css盒子模型的理解？

这里给大家一个硬核回答模板，当问到br需要我们自己去聊一聊什么内容时，我们有一个'三部曲'

第一步：是什么？也就是介绍一下面试官问你的内容

第二步：特点？

第三步：应用场景

根据'三部曲'，我们先介绍css盒子模型是什么？

• 是什么？
  盒子模型指的就是浏览器在渲染页面时，会将容器渲染成包含content,padding,border,margin四部分的矩形

• 特点
  • 1.标准盒模型 标准盒模型是css3中默认的盒模型，在标准盒模型中，width和height只包含content部分，padding和border部分不算在width和height中
    也就是说对于标砖盒子模型width = content 用图表示就是：

- 2.IE盒模型(怪异盒模型) IE盒模型是IE浏览器中默认的盒模型，在IE盒模型中，width和height包含content,padding,border部分

而IE盒模型则是width = content +padding + border，用图表示

• 应用场景(模型切换)

  • box-sizing:border-box(IE)||content-box;(标准)

  我们'三部曲'回答基本就是这样的过程，我们继续看看其他问题.

2.说说em rem vw vh px 的区别？

在css3之前我们用的是px em %,但是这些对于不同的浏览器，显示的大小就不同，为了在不同的场景下适配，css3就推出了新的单位rem vw vh。

区别:

绝对单位:px 一个像素

相对单位:

em:相对于父容器的字体大小

这里我们给.wrap的父容器.box设置了字体大小为10px,所以在.wrap中的字体大小应该是100px

rem:相对于跟字体大小；注意这里的跟字体大小是html下的字体大小。

我们可以看到，.wrap下的font-size是120px而不是100px;

vm,vh:相对于计算机屏幕的可视区域

3.css中有哪些方式可以隐藏一个元素 区别是什么?

我们点击盒子，会触发点击事件，打印box clicked

• 1.display:none

当我们添加属性后，看看页面以及打印结果

首先我们在页面上已经看不到box了

然后我们点击一下试试

结果表示，没有打印。所以当元素使用display:none隐藏一个元素时，该元素会脱离文档流，不会触发事件，会回流重绘。

• 2.opacity:0 我们给元素添加一个透明度为0

透明度为0，但是我们依旧可以看到于box在页面中，并没有脱离文档流，然后我们点击一下box

诶嘿，事件触发了，就是看不见了，所以元素使用opaticy:0隐藏一个元素时，该元素不会脱离文档流，会触发事件，不会回流但是会重绘。

• 3.width:0 height:0 我们让box的宽高都为0,是不是也可以在页面上不显示box

页面上赵照样也是看不到box的，我们点击一下box

事实证明，事件也是无法触发的

所以，元素的宽高设置为0，会脱离文档流，无法触发事件，会回流重绘

• 4.visibility:hidden

用于控制元素的可见性而不改变文档流中的位置，我们来看看页面效果

在文档流中依旧可见box,那么点击一下box

前面还是和opaticy:0都是看不见，有文档流，但是这里是无法触发事件的，也就是说，元素使用visibility:hidden隐藏元素，是有文档流，无法触发事件，不会回流会重绘。

5.clip-path: polygon(0 0, 0 0, 0 0,0 0)

裁剪属性，每一个（0 0）表示一个坐标，这里由于所有顶点都在同一个位置 (0 0)，所以没有形成有效的多边形，元素将被完全裁剪。

那么页面效果是，存在文档流

但是不存在触发事件.总结就是使用裁剪属性隐藏元素，有文档流，无事件触发，不会回流会重绘。

6.说说flexbox？

那么flex是什么呢？弹性布局（flex）是css中一种简便高效的布局方式，当一个布局被设置成弹性容器，弹性容器有主轴(默认为X轴),和交叉轴(Y轴)的概念，主轴方向也可以修改，子容器默认在主轴上排列.

• 父容器常用属性
  *
  1. flex-direction 主轴方向改变 当我们对ul使用弹性布局,li会同行排列，我们可以通过修改flex-direction的属性值，从而改变li的排列方式。
  • 2.flex-wrap:wrap 超出换行 当子容器的宽度之和大于父容器时，我们可以选择超出换行，我们设置li的宽度为100px,五个li的宽度之和是大于父容器的，所以4,5就会换行处理

假设我们不让超出换行，会发生什么呢？

不超出换行，就会导致子容器的宽度不会按照100px计算，而是由父容器的总宽度平均分配给5个li;

子容器:
order:子容器排序，值越小，越靠前.
flex-grow: 控制元素如何填充剩余空间。
flex-shrink: 控制元素如何缩小以适应可用空间。
flex-basis: 指定元素的初始大小。

所以flex是可以接受三个参数的flex:grow shrink basis.

那么弹性布局是使用场景非常的熟悉，就是三栏布局

文章若有不足，恳请指出，谢谢大家！！