CSS 面试题

1. flex：1的含义是是什么？

   答： 相当于 flex-grow:1。表示在主尺寸有 的增长系数为 1

   flex 属性可以指定1个，2个或3个值。

   单值语法: 值必须为以下其中之一:

   • 一个无单位数(`` (opens new window)): 它会被当作<flex-grow>的值。
   • 一个有效的**宽度(width (opens new window))**值: 它会被当作 <flex-basis>的值。
   • 关键字none，auto或initial.

   双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：

   • 一个无单位数：它会被当作 <flex-shrink> 的值。
   • 一个有效的宽度值: 它会被当作 <flex-basis> 的值。

   三值语法:

   • 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
   • 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
   • 第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。

2. 谈下对 BFC 的理解

   BFC 是什么？BFC 如何产生？BFC 的应用场景？

   BFC 是 Block-formating-context的简写，译为块状格式上下文，表示一块独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响。

   BFC 的应用场景：

   • 解决上外边距重叠：重叠的两个box都开启bfc;

   • 解决浮动引起高度塌陷：容器盒子开启bfc

   • 解决文字环绕图片;左边图片div,右边文字容器p,将p容器开启bfc