面试题总结web一些

- 日理万妓 2022-05-27 11:45 140阅读 0赞

一、谈谈bfc？

**一、什么是BFC**   
**BFC(block formatting context）**：**简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。**   
中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫做 Flow Root）

**二、 形成 BFC 的条件**   
1、浮动元素，float 除 none 以外的值；   
2、绝对定位元素，position（absolute，fixed）；   
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions；   
4、overflow 除了 visible 以外的值（hidden，auto，scroll）

**三、BFC常见作用**   
**1、包含浮动元素**   
问题案例：高度塌陷问题：在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合。这时就可以用bfc来清除浮动了。   
![这里写图片描述][20160805112000601]

**2、不被浮动元素覆盖**   
问题案例： div浮动兄弟遮盖问题：由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给蓝色块加 overflow: hidden，触发bfc来解决遮挡问题。   
![这里写图片描述][20160805115308490]

**3、 BFC 会阻止外边距折叠**   
问题案例：margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。   
![这里写图片描述][20160805111136261]

二、跨域携带的cookie如何设置？

意思就是该属性是一个用来配置xhr对象的键值对，比如你可以在跨域请求有需要的时候设置withCredentials:true

那么withCredentials:true是什么意思？

该属性是告诉浏览器，1、允许创建来自不同域的cookie信息；2、每次的跨域请求都允许带上该cookie信息

该配置项还需要后台的允许才有效，后台如果允许浏览器发送带凭据的请求，那么会在响应头中带上"Access-Control-ALLOW-Credentials",值为"true"。

如果不加此响应头，浏览器将获取不到服务端的响应体。

好了，到此我们已经知道怎么跨域创建cookies,并在每次的跨域请求中带上cookies了,简单的说就是前台要配置一个ajax参数：xhrFields:\{withCredentials:true\}，有的资料上说还要设置crossDomain:true,但是笔者测试好像不需要；后台要在响应头中绑定"Access-Control-ALLOW-Credentials",值为"true"。

前端和后端都需要设置 Credentials, 后端如果是 PHP 的话是设置 header("Access-Control-Allow-Credentials: true");

cookie一般情况下是没法跨域的，甚至POST请求一般情况下都是无法跨域的。但经过特殊处理后就可以了，这个处理需要客户端服务器的配合。

一些请求可以通过jsonp的方式来实现跨域，但如果是非幂等的请求，还是需要POST的。处理如下：

服务器端设置：

**\[plain\]**  [view plain][]  [copy][view plain]

1.  header("Access-Control-Allow-Credentials: true");  
2.    
3.  header("Access-Control-Allow-Origin: http://www.xxx.com");

客户端请求的时候带上withCredentials参数，代码如下：

原生ajax：

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  **var** xhr = **new** XMLHttpRequest();    
2.  xhr.open("POST", "http://xxxx.com/demo/b/index.php", **true**);    
3.  xhr.withCredentials = **true**; //支持跨域发送cookies  
4.  xhr.send();

jquery ajax：

**\[javascript\]**  [view plain][]  [copy][view plain]

1.   $.ajax(\{  
2.       type: "POST",  
3.       url: "http://xxx.com/api/test",  
4.       dataType: 'jsonp',  
5.       xhrFields: \{  
6.            withCredentials: **true**  
7.       \},  
8.       crossDomain: **true**,  
9.       success:**function**()\{\},  
10.      error:**function**()\{\}  
11. \})

三、跨域携带的cookie如何设置？

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> 
    <div>
      &nbsp; &nbsp;&nbsp; 
     <span style="color:#cccccc;">4</span> 
    </div> 
    <div>
      &nbsp; 
    </div> <strong><a href="https://www.v2ex.com/member/jackroyal" rel="nofollow">jackroyal</a></strong>&nbsp; &nbsp;<span style="color:#cccccc;">88 天前</span> 
    <div>
      &nbsp; 
    </div> 
    <div>
      前端和后端都需要设置 Credentials, 后端如果是 PHP 的话是设置 header("Access-Control-Allow-Credentials: true"); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[20160805112000601]: /images/20220527/e529504703e14398afcfd049f770c568.png
[20160805115308490]: /images/20220527/512346199eb943ca90f60a80e2df6d32.png
[20160805111136261]: /images/20220527/2605f3b93c1c4d47856e055825345f40.png
[view plain]: https://blog.csdn.net/sysuzjz/article/details/51566713#