BFC+重绘和重排

BFC

快格式化上下文
是web页面的可视化css渲染的一部分
是块盒子的布局发生区域，也是浮动元素与其他元素交互的区域。

个人理解：
1.BFC是一个独立的布局环境，BFC内部元素布局与外部元素互不影响。
2.可以通过一些条件触发BFC，从而实现布局上的需求和解决一些问题。
3.可以把BFC理解成一个工具，无需纠结其中的含义，只需了解它的特性即可

触发条件：
1.更目录
2.float的值非none
3.overflow的值非visible
4.display的值是inline-block，table—cell，table-caption，fiex,inline-fiex.
5.position 的值是fixed，absolute.

BFC
1.属于同一个BFC的两个相邻容器的上下margin会重叠。
2.计算BFC高度是浮动元素也会参加计算
3.BFC的容器不会与浮动容器发生重叠
4.BFC内的容器在垂直方向上依次排列
5.元素的margin-left与其包含的边框相接触。
6.BFC是独立容器，容器内部元素不会影响容器外部元素。

overflow:hidden; 溢出部分:隐藏;

url从输入到页面展示的过程

1. 输入url地址，发送http请求
2. 浏览器会根据url地址查看缓存，顺序：浏览器缓存>系统缓存>路由缓存， 如果都没有，继续向下执行。【缓存没有，继续向下执行】
3. 根据http网址去解析服务器IP，端口号。
   IP：
   192.168.1.1
   域名：
   www.zjp.com
   【是同一个东西，通过域名解析，得到服务器IP】
4. 根据IP和端口号和web服务器建立连接
5. 浏览器向服务器发送请求。
6. 服务器接收到了请求，会向浏览器返回响应。
7. 关闭连接，解析文件，浏览器将内容渲染到页面。

浏览器渲染页面的过程

• 解析HTML文件
• 构建DOM树------[html框架]
• 构建渲染树------- [css样式]
• 绘制渲染树------- [呈现出来]

重绘和重排（回流）

重排一定引起重绘，但是重绘不一定引起重排

重排：当DOM的变化影响几何属性(宽高),浏览器需要重新计算元素的几何属性，其他元素的集合属性
可能受到影响，发生改变，这个时候浏览器会重新构建渲染树，这个过程叫做重排。

重绘:重新绘制页面

iframe框架

功能：引入页面

• frameborder 边框 值：0或1
• scorlling 滚动条 值：yes no auto
• marginheight 框架内顶部与底部边距
• marginwidth 框架内左侧与右侧边距

切图:
场景1: 不需要关闭图层

• 图层——————>合并可见图层
• 用选框工具框选出要保存的区域
• ctrl + c 复制区域 ctrl + n 新建页面（查看大小是否一致，调整背景为透明） ctrl + v 粘贴新的模板上
• 文件——————>存储为web所用格式++ .6666666666666666666666666666
• 改预设（尾缀）:透明图片尾缀:png 非透明尾缀：jpg 和 png 均可
• 选择文件夹——————>改文件名 【不能出现中文，特殊符号，空格】

场景2：需要关闭图层

• 选择移动工具
• 点击不要的区域
• 关闭被选中的图层(直到出现网格为止) 重复场景1