今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

明天计划的事情：（一定要写非常细致的内容）

遇到的问题：（遇到什么困难，怎么解决的）

收获：

目前流行的组件库有哪些？CSS，JS各有哪些流行的库？

什么是组件？为什么要用组件库？

组件是组成页面中最基本的元素，按钮，输入框，下拉选择都是组件，组件和组件组合就变成了一个更复杂的组件。至于为什么要用组件库我想应该是体验了，用户使用体验以及开发人员的开发体验，用户在页面上的交互都是通过组件，一个颜值高的组件可以第一眼吸引用户去点击，这就是用户体验，开发体验更不用说，组件就是同种类型不同交互的封装，是用组件库可以让我们更专注的针对业务的开发和产品的交互。

什么是库，什么是框架

库：库是有用功能的有组织的集合。库的典型功能包括处理字符串，日期，HTML DOM元素，事件，Cookie，动画，网络请求等。每个函数将值返回给调用应用程序，但是你从中可以选择参数来应用。库是更多是一个封装好的特定的集合，提供给开发者使用，的英文特定而且于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，库在查询中需要的功能在自己的应用中使用，我们可以从封装的角度理解库。

框架：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发框架。是一个应用程序的骨架，它要求你以特定的方式处理软件设计，并在某些点插入自己的逻辑。通常框架提供事件。 存储和数据绑定等功能。

从网页开发人员的角度：库可以很容易地被另一个库替换但框架不能 。

目前主流的框架

Vue、Angular、React三大主流

流行的组件库或者说是UI框架

Mint UI

Mint UI是 饿了么团队开发基于vue.js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。

WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

ElementUI支持Vue、Angular、React

Element是饿了么前端开源维护的Vue UI组件库,组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。 主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。官网地址:element-cn.eleme.io/#/zh-CN

vant UI

vant UI是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。

Bootstrap

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单

NG-ZORRO (angular)

开箱即用的高质量 Angular 组件，与 Angular 保持同步升级。 使用 TypeScript 构建，提供完整的类型定义文件。

Amaze ~ 妹子 UI

• Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。
• Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。
• 相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。
• Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。

Layui

layer是一款口碑极佳的web弹层组件，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。layui 首个版本发布于2016年秋，她区别于那些基于 MVVM 底层的 UI 框架，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

Ant Design

Ant Design 是基于 React 开发的，并不是传统的 html。React 起源于 Facebook 的内部项目，现在已经成了一个很流行的开发工具。

请描述 BFC(Block Formatting Context) 及其如何工作

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

W3C的定义

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。

在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。

在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。

BFC特性：

• 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box叠加。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
• 计算BFC的高度时，浮动元素也参与计算。

下列方式会创建块格式化上下文：

• 根元素()
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content或 paint 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
• 块格式化上下文包含创建它的元素内部的所有内容.

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

使用display: flow-root
一个新的 display 属性的值，它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。