那些年，问你却一时想不起来的经典的面试问题(一)

5、BFC

定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

作用：

利用BFC避免margin重叠。

自适应两栏布局

清除浮动

创建：

• 1、float的值不是none。
• 2、position的值不是static或者relative。
• 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• 4、overflow的值不是visible

布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
• 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算。

6、清除浮动的方法

①给设置了浮动的元素的父级加高。

②给设置了浮动的元素的父级设置overflow：hidden。如果需要兼容IE，在添加一个zoom：1

③给需要清除浮动的元素设置clear：both；

④在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
⑤伪类清除：
.clearfix：after{
content：""；
clear：both；
display：block；
}
.clearfix{zoom：1}

7、层叠上下文

• • • 元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。
      
      层叠等级：层叠上下文在z轴上的排序
      
      - 在同一层叠上下文中，层叠等级才有意义
      - z-index的优先级最高 
      - 触发条件
        - 根层叠上下文(`html`)
        - `position`
        - css3属性
          - `flex`
          - `transform`
          - `opacity`
          - `filter`
          - `will-change`
          - `-webkit-overflow-scrolling
      

  8、常见页面布局

静态布局

最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
优：采用的是css2之前的写法,不存在浏览器兼容性。布局简单。

缺：但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。

流式布局

流式布局也叫百分比布局。随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
优：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。

缺：屏幕尺度跨度过大的情况下，页面不能正常显示。

弹性布局

弹性布局是CSS3引入的强大的布局方式，弹性盒模型：display：flex；
优：简单、方便、快速（更适用于移动端）

缺：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。

响应式布局

采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。
优：可以根据页面不同的大小改变样式

缺：

9、CSS预处理，后处理

CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件
为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作

分类：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS

优点：
提供CSS层缺失的样式层复用机制
减少冗余代码
提高样式代码的可维护性、
缺点：采用特殊语法，框架耦合度高，复杂度高

实现原理：
取到 DSL 源代码 的 分析树
将含有 动态生成 相关节点的 分析树 转换为 静态分析树
将 静态分析树 转换为 CSS 的 静态分析树
将 CSS 的 静态分析树 转换为 CSS 代码

后处理
CSS后处理器：堆css进行处理，并最终生成css的预处理器，属于广义上的css预处理器，最典型的就是css压缩工具(clean-css)，流行的Autoprefixer，以Clean I Use上的浏览器支持数据为基础，自动处理兼容性问题

      优点：使用 CSS 语法，容易进行模块化，贴近 CSS 的未来标准

      缺点：逻辑处理能力有限

实现原理：

   ①将 源代码 做为 CSS 解析，获得 分析树
   ②对 CSS 的 分析树 进行 后处理
   ③将 CSS 的 分析树 转换为 CSS 代码

10、CSS3的新特性

**新增一：**rgba（颜色的透明度）；

**新增二：**弹性布局flex（上面第二题）；

**新增三：**媒体查询；

**新增四：**渐变色；

**新增五：**动画animation，使用@keyframes定义，使用的元素animation：名字 时间；

11、display有哪些值

display：none 此元素不被显示。
display：block 此元素显示为块级元素，支持宽高，独占一行。
display：inline 此元素为内联元素，不支持宽高，不独占一行。
display：table 此元素作为块级表格来显示。
display：flex 此元素为弹性盒模型
display：list-item此元素会作为列表显示