浏览器输入url与BFC详解

一、浏览器输入url

    1.DNA解析，浏览器地址解析为ip地址，浏览器会读取缓存

      --浏览器DNS缓存

      --系统DNS缓存

     --路由器DNS缓存

  2.TCP链接，TCP三次握手

    第一次握手，由浏览器发起，告诉服务器我要发送请求了

    第二次握手，由服务器发起，告诉浏览器我准备接收了，你赶紧发送吧

    第三次握手，由浏览器发起，告诉服务器，我马上就发了，准备接收吧

 3.发送请求

    -- 请求报文，HTTP协议的通信内容

4.接收请求

    -- 响应报文

5.渲染页面

  --遇见HTML标记，浏览器调用HTML解析器解析成Tocken并构建成dom树

  --遇见style/link标记，浏览器调用css解析器，处理css标记并构建cssom树

  --遇见script标记，调用js解析器，处理js代码(绑定事件，修改dom树/cssom树)

  --将dom树和cssom树合并成一个渲染树

  -- 根据渲染树来计算布局，计算每个节点的几何信息(布局)

 -- 将各个节点颜色绘制到屏幕上(渲染)

 注意：这五个步骤不一定按照顺序执行，如果dom树或cssom树被修改了，可能会执行多次布局和渲染，往往实际页面中，这些步骤会执行多次的。

6.断开连接，TCP四次挥手

  第一次挥手，由浏览器发起的，发送给服务器，我东西发送完了（请求报文），你准备关闭吧

  第二次挥手，由服务器发起的，告诉浏览器，我东西接收完了（请求报文），我准备关闭了，你也关闭吧

  第三次挥手，由服务器发起的，告诉浏览器，我东西发送完了（响应报文），你准备关闭吧

  第四次挥手，由浏览器发起的，告诉服务器，我东西接收完了，我准备关闭了，你也准吧吧

 

       

二、css兼容问题

     （1）p、td、h标签都不要嵌套块元素

     （2）margin-top传递

              解决：触发BFC或者haslayout

              上边距margin叠加

              解决：尽量使用同方向的margin，比如都设置top或bottom

BFC的触发：

      根元素或其它包含它的元素；

      float: 不为none；

      position: absolute/fixed;

  display: inline-block；

  display: table-cell；

      display: flow-flow-root;  没有副作用

  overflow的值不为visible的元素，副作用是虽然可以去除浮动的干扰，但是，有可能会让子元素无法定位在容器外部；

 

 

BFC的特性：

      （1）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素（爸爸管着儿子）；

      （2） 一个元素不能同时存在于两个BFC中；

      （3）内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；

     （4） 处于同一个BFC中的元素相互影响，可能会发生margin collapse；

     （5）每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；

总结：BFC除了可以用来布局之外，还有清除浮动，以及去除margin合并现象的作用