前言：由于最近在梳理一下我自己的知识体系，为了更好的记录，现在把整理好的资料分享出来，也希望能够发现错误的地方能够予以指点。谢谢。
======================相关文章和开源库=======================
系列文章
个人维护的开源组件库
2.树形组织结构组件
3.bin-admin ，基于bin-ui的后台管理系统集成方案
4.bin-data ,基于bin-ui和echarts的数据可视化框架
5.其余生态链接
========================================================
（1）dom选择器优先级是什么，以及权重值计算
1.行内样式 1000
2.id 0100
3.类选择器、伪类选择器、属性选择器[type="text"] 0010
4.标签选择器、伪元素选择器(::first-line) 0001
5.通配符*、子选择器、相邻选择器 0000
（2）css3新特性简述
1、颜色：新增RGBA、HSLA模式
2、文字阴影(text-shadow)
3、边框：圆角（border-radius）边框阴影：box-shadow
4、盒子模型：box-sizing
5、背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域，以“，”分隔可以设置多背景，用于自适应布局
6、渐变：linear-gradient、radial-gradient
7、过渡：transition可实现动画
8、自定义动画
9、在CSS3中唯一引入的伪元素是::selection
10、多媒体查询、多栏布局
11、border-image
12、2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
13、3D转换
（3）有几种定位方式，有什么区别
`static` 是默认值
`relative` 相对定位 相对于自身原有位置进行偏移，仍处于标准文档流中
`absolute` 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指`position`不是`static`的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以`body`元素为偏移参照基准, 完全脱离了标准文档流。
`fixed` 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。
（4）重排和重绘，什么情况下会触发
部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。
添加、删除、更新 DOM 节点 通过 display: none 隐藏一个 DOM 节点-触发重排和重绘 通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化 移动或者给页面中的 DOM 节点添加动画 添加一个样式表，调整样式属性 用户行为，例如调整窗口大小，改变字号，或者滚动。
（5）css清除浮动的几种方法
清除浮动： 核心：clear:both;
1.使用额外标签法（不推荐使用）
在浮动的盒子下面再放一个标签，使用 clear:both;来清除浮动
a 内部标签：会将父盒子的高度重新撑开
b 外部标签：只能将浮动盒子的影响清除，但是不会撑开盒子
2.使用 overflow 清除浮动（不推荐使用）
先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden;就会清除子元素对页面的影响
3.使用伪元素清除浮动(用的最多)
伪元素：在页面上不存在的元素，但是可以通过 css 添加上去
种类：:after(在。。。之后)
:before(在。。。之前)
注意：每个元素都有自己的伪元素
.clearfix:after { content:""; height:0; line-height:0; display:block; clear:both; visibility:hidden; /_将元素隐藏起来_/ 在页面的 clearfix 元素后面添加了一个空的块级元素 （这个元素的高为 0 行高也为 0 并且这个元素清除了浮动）}.clearfix { zoom:1;/_为了兼容 IE6_/}（6）行内元素和块级元素的区别
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
1和相邻的内联元素在同一行;
2宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。
那么问题来了，浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
（7）如何水平垂直居中一个元素
方法一：绝对定位居中（原始版之已知元素的高宽）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
margin-top: -100px; /*设为高度的1/2*/
margin-left: -100px; /*设为宽度的1/2*/
}方法二：绝对定位居中（改进版之一未知元素的高宽）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/
}方法三：绝对定位居中（改进版之二未知元素的高宽）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
margin: auto; /*很关键的一步*/
position: absolute; /*父元素需要相对定位*/
left: 0;
top: 0;
right: 0;
bottom: 0; /*让四个定位属性都为0*/
}方法四：flex 布局居中
body {
display: flex; /*设置外层盒子display为flex*/
align-items: center; /*设置内层盒子的垂直居中*/
justify-content: center; /*设置内层盒子的水平居中*/
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
}
}那么问题来了，如何垂直居中一个 img（用更简便的方法。）
.content {
//img的容器设置如下
display: table-cell;
text-align: center;
vertical-align: middle;
}
（8）display:inline-block 为什么会显示间隙
间隙产生的原因是因为，换行或空格会占据一定的位置
推荐解决方法：
父元素中设置 font-size:0;letter-spaceing:-4px;
（9）你了解 CSS Flex 和 Grid 吗
Flex 主要用于一维布局，而 Grid 则用于二维布局。
解析：
Flex
flex 容器中存在两条轴， 横轴和纵轴， 容器中的每个单元称为 flex item。
在容器上可以设置 6 个属性：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。
Flex 项目属性
有六种属性可运用在 item 项目上:
order
flex-basis
flex-grow
flex-shrink
flex
align-self
Grid
CSS 网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。
像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用 CSS 网格可能还是比 CSS 表格更容易布局。 例如，网格容器的子元素可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。
