Web前端面试@Ku_xiao航

在地址栏输入网址敲回车发生了什么？

• 一.浏览器解析url中的域名
  二.DNS解析：
  找到域名对应的IP地址
  三.客户端与服务器建立TCP连接
  通过三次握手，建立了客户端和服务器之间的连接

三次握手

• 第一次握手就是客户端给服务器端发送一个报文，第二次就是服务器收到报文之后，会应答一个报文给客户端，第三次握手就是客户端收到报文后再给服务器发送一个报文，三次握手就成功了。

四次挥手

• 第一次挥手：客户端发送一个FIN报文，报文中会指定一个序列号
  第二次挥手：服务端收到FIN后，会发送ACK报文。
  第三次挥手：如果服务端想断开连接，和客户端的第一次挥手一样，发给FIN报文，指定一个序列号
  第四次挥手：客户端收到FIN，一样发送一个ACK报文，服务端收到ACK报文后，就处于关闭连接状态

四.浏览器与服务器进行数据传输

浏览器向服务器发送http的请求报文，浏览器从服务器读取响应报文，然后浏览器关闭连接。

五.浏览器渲染页面

客户端拿到服务器端传输来的文件，找到HTML和MIME文件，通过MIME文件，浏览器知道要用页面渲染引擎来处理HTML文件。
1.浏览器会解析html源码，然后创建一个 DOM树。

2.浏览器解析CSS代码，计算出最终的样式数据，形成css对象模型CSSOM。

3.利用DOM和CSSOM构建一个渲染树（rendering tree）。

4.浏览器就根据渲染树直接把页面绘制到屏幕上。

BFC

我认为：BFC是一个容器，在这个容器中按照一定的规则进行物品摆放，并且不会影响其它环境中的物品。

如果一个元素符合触发BFC的条件，则BFC中的元素布局不收外部影响

浮动元素会创建BFC，则浮动元素内部子元素主要受该浮动元素影响，所以俩个浮动元素之间是互不影响的。

如何创建BFC

• 根元素或包含很元素的元素
  浮动元素float=left | right 或 inherit（none）
  绝对定位元素 position=absolute 或fixed
  display=inline-block | flex | inline-fkex | table-cell 或 table-caption
  overflow=hidden | auto 或scroll

BFC的特性

• BFC是一个独立的容器，容器内子元素不会影响容器外的元素。
  盒子从顶端开始一个接一个排列，盒子之间垂直的间距是由margin决定的
  在同一个BFC中，俩个相邻的块级盒子的垂直外边距会发生重叠
  BFC区域不会和float box 发生重叠
  BFC能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。
  BFC的作用
  包含浮动元素（清除浮动）

浮动元素会脱离文档流（绝对定位元素也会脱离文档流），导致无法计算准确的高度，这种问题称为高度塌陷。

解决高度塌陷问题，前提是能搞识别并包含浮动元素，也就是清除浮动。

折叠外边距

•  两个相邻的外边距都是 正数 时，折叠外边距是两者中较大的值。
  

两个相邻的外边距都是 负数 时，折叠外边距是两者中绝对值较大的值。
两个相邻的外边距是 一正一负 时，折叠外边距是两者相加的和。
————————————————
版权声明：本文为CSDN博主「TongQiHang」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kukuhang/article/details/103138119