# 有赞
# 一面
# 说说CSS选择器以及这些选择器的优先级
!important 内联样式（1000） ID选择器（0100） 类选择器/属性选择器/伪类选择器（0010） 元素选择器/伪元素选择器（0001） 关系选择器/通配符选择器（0000）
# 你知道什么是BFC么
小提示：这个问题重点是BFC是什么，BFC触发的条件有哪些，BFC可以干什么。这里我试着讲解了一下Boostrap的清除浮动（display：table创建匿名table-cell间接触发BFC），如果有看到别的场景使用或者自身有使用的场景可以尝试讲解一下使用技巧。这样可以让面试官觉得你不仅仅知道他问的东西是什么，你还能很好的使用它。
# 什么是BFC
BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围，把它理解成是一个独立的容器，并且这个容器里box的布局与这个容器外的box毫不相干。
# 触发BFC的条件
- 根元素或其它包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 具有overflow 且值不是 visible 的块元素
- 弹性盒（flex或inline-flex）
display: flow-rootcolumn-span: all
# BFC的约束规则
- 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）
- 处于同一个BFC中的元素相互影响，可能会发生外边距重叠
- 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
- 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
- 浮动盒区域不叠加到BFC上
# BFC可以解决的问题
- 垂直外边距重叠问题
- 去除浮动
- 自适用两列布局（float + overflow）
# 了解盒模型么
包括内容区域、内边距区域、边框区域和外边距区域。
box-sizing: content-box（W3C盒子模型）：元素的宽高大小表现为内容的大小。box-sizing: border-box（IE盒子模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。
IE5.x和IE6在怪异模式中使用非标准的盒子模型，这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
# 如何实现左侧宽度固定，右侧宽度自适应的布局
小提示：这个问题面试官会要求说出几种解决方法。
DOM结构
<div class="box">
<div class="box-left"></div>
<div class="box-right"></div>
</div>
利用float + margin实现
.box {
height: 200px;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
float: left;
background-color: blue;
}
.box-right {
margin-left: 200px;
background-color: red;
}
利用calc计算宽度
.box {
height: 200px;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
float: left;
background-color: blue;
}
.box-right {
width: calc(100% - 200px);
float: right;
background-color: red;
}
利用float + overflow实现
.box {
height: 200px;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
float: left;
background-color: blue;
}
.box-right {
overflow: hidden;
background-color: red;
}
利用flex实现
这里不是最佳答案，应该是使用flex-basis实现更合理
.box {
height: 200px;
display: flex;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
background-color: blue;
}
.box-right {
flex: 1; // 设置flex-grow属性为1，默认为0
overflow: hidden;
background-color: red;
}
# 了解跨域吗，一般什么情况下会导致跨域
小提示： 如果平常自身有使用场景可结合使用场景进行讲解，比如我在这里使用过的场景是CORS和Nginx反向代理
# 跨域行为
- 同源策略限制、安全性考虑
- 协议、IP和端口不一致都是跨域行为
# JSONP
小提示：如果你提到JSONP，面试官肯定会问你整个详细的实现过程，所以一定要搞懂JSONP的实现原理，如果不是很理解可以自己起一个Express服务实践一下
- Web前端事先定义一个用于获取跨域响应数据的回调函数，并通过没有同源策略限制的script标签发起一个请求（将回调函数的名称放到这个请求的query参数里），然后服务端返回这个回调函数的执行，并将需要响应的数据放到回调函数的参数里，前端的script标签请求到这个执行的回调函数后会立马执行，于是就拿到了执行的响应数据。
- 缺点： JSONP只能发起GET请求
# 如何实现一个JSONP
- https://segmentfault.com/a/1190000015597029 (opens new window)
- https://zhangguixu.github.io/2016/12/02/JSONP/ (opens new window)
- https://www.cnblogs.com/iovec/p/5312464.html (opens new window)
# JSONP安全性问题
- CSRF攻击
- 前端构造一个恶意页面，请求JSONP接口，收集服务端的敏感信息。如果JSONP接口还涉及一些敏感操作或信息（比如登录、删除等操作），那就更不安全了。
- 解决方法：验证JSONP的调用来源（Referer），服务端判断Referer是否是白名单，或者部署随机Token来防御。
- XSS漏洞
不严谨的 content-type导致的 XSS 漏洞，想象一下 JSONP 就是你请求 http://youdomain.com?callback=douniwan (opens new window), 然后返回
douniwan({ data })，那假如请求http://youdomain.com?callback=<script>alert(1)</script>不就返回<script>alert(1)</script>({ data })了吗，如果没有严格定义好Content-Type（ Content-Type: application/json ），再加上没有过滤callback参数，直接当html解析了，就是一个赤裸裸的XSS了。
- 解决方法：严格定义
Content-Type: application/json，然后严格过滤callback后的参数并且限制长度（进行字符转义，例如<换成<，>换成>）等，这样返回的脚本内容会变成文本格式，脚本将不会执行。
- 服务器被黑，返回一串恶意执行的代码