HTML(5)和 CSS3 方面

1. 前端与后端数据交互的格式有哪些，为什么大部分现在都用 json 而不用 xml。

答：XML：知了堂3 岁

JSON：{ name:”知了哥”,age:3}

JSON 书写方便节省字节，更轻量，前后台都有直接解析 JSON 的方法（JSON.stringfity/parse）

使用方便。

2. Flex 布局熟悉吗，说几个常用的属性。

答：这个几乎每天都在用，还是挺熟悉的。

display：flex

align-items 多个

align-content：单个

justify-content

justify-items

flex-direction

flex-wrap：

flex-basic：初始盒子宽度 flex

flex-grow：增长因子 200 4*40=160 1,1,1,2 1/5*40 flex

flex-shrink :缩减因子 200 60*4=240

3. 说一下 CSS 盒模型

答：CSS 的盒模型包含了一下几个内容 margin,padding,border,content。

在计算盒子宽高的时候，IE 和 Chrome 会有一些区别，IE 算到 border，Chrome 的宽度只包含

content 区域，因此 CSS3 提供了 box-sizing 这个属性来修改。

4. CSS 常用选择器，选择器权重问题。

答：*(has，not，target，root。。。。)通配符， ID，class，attr 属性，element，子代（ > + ~ ）

,

UI 状态伪类选择器（hover,active,link,seceted..，checked），

结构性伪类选择器(nth-child,fist-child,last,nth-of-type...before,after....)

!important > style > id > class > elemnet > 伪类和属性

5. 请用 5 种方式实现元素垂直居中。

答：1、flex 

2、Tranform 

3、定位+margin 负值（知道子节点宽高） 

4、定位+margin:auto

6. 什么是 BFC？垂直 margin 重叠是为什么？怎么解决这个问题？

答：概念：BFC 全称 Block Formatting Context ，中文意思为块级格式上下文。

通俗的来说：BFC 是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），

箱子内部的元素无论如何翻江倒海，都不会影响到外部。转换为 BFC 的理解则是：BFC 中的元素的

布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素

带来的影响。比如清除浮动）并且在一个 BFC 中，块元素与行元素都会垂直的沿着其父元素的边框

排列。

如何触发 BFC

1.浮动元素，float 除 none 以外的值

2.position 的值不为 static 或者 relative

3.display 不为 none

4.overflow 除了 visible 以外的值

BFC 的应用

1.解决浮动塌陷问题

2.自适应两栏布局（我们还可以运用 BFC 可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布

局。方法：给没有浮动的元素加 overflow：hidden。）

3.解决设置 margin 值重叠问题。

总结：BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。它规定

了元素与其他元素的关系和相互作用。

7. 什么是浮动，有什么作用，有何副作用，以及如何清除浮动？

答：浮动是使用给节点添加 float 属性，最初的设计是用来实现文字环绕的。

添加了 float 的节点脱离文档流，同时触发节点的 BFC，让节点往一个方向靠，并排成一行。

当一个父节点的子节点全部浮动，就会造成父节点高度塌陷，

解决的办法首先是可以给父节点主动添加高度值，再者利用只要有一个子节点不浮动原理来添

加一个不浮动的节点（通常使用伪元素 before，after），再者还可以触发父节点的 bfc，常用的定位，

或者 overflow：hidden。