在地址栏输入网址敲回车发生了什么？
- 一.浏览器解析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
