CSS

1.position属性值

1.position属性值：
static（默认）、
relative相对（top,left相对自身位置），不脱离文档流、
absolute绝对（top,left属性相对于最近一个不为static的父元素）脱离文档流、
fixed固定布局，相对于屏幕视口，不会随屏幕滚动而改变、
sticky粘性布局，可以看成相对定位和固定定位的组合

2.行内元素和块状元素

2.行内元素和块状元素
块状元素：div 、h系列标签，p标签，ul，ol，table
行内元素：span、img、input、a、b、br（设置宽高无效）

3.flex布局

3.flex布局
概念：display属性为flex/inline-flex的父元素称为伸缩容器，它的所有子项成为伸缩项；
伸缩容器上的属性有：
justify-content:flex-start(默认值) 、flex-end、center、space-between、space-around每个项目两侧间隔相等（项目在主轴上的对齐方式）
align-items:strech(默认值，未设置高度占满容器)、flex-start、flex-end、center、base-line（项目的第一行文字基线）–(项目在交叉轴对齐方式)
align-content:(项目多根轴线的对齐方式，如果只有一根，该值不起作用)flex-start | flex-end | center | space-between | space-around | stretch;
flex-direction:row(默认)、row-reverse、column、column-reverse
flex-wrap:no-wrap(默认)、wrap、wrap-reverse
flex-flow:flex-direction和flex-wrap简写
伸缩子项上的属性：
flex-grow:0(默认不拉伸)
flex-shrink:1(位置不够默认缩小)
flex-basis:auto项目本来的大小(默认)
flex(&-grow,&-shrink,&-basis简称)：后两个属性可以省略
order：项目排列顺序（数字越小越靠前）
align-self:auto(默认表示继承父类的align-items)、flex-start、flex-end、center、baseline、strech子项单独的对齐方式

4.rem

4.rem
（1）获取屏幕宽度：
var width = document.documentElement.clientWidth
（2）获取根元素：
var htmlNode = document.querySelector(‘html’)
（3）设置根元素的字体大小为屏幕宽度
htmlNode.style.fontSize = width + ‘px’

5.重绘和回流：

5.重绘和回流：
概念：
回流：某个部分发生了变化影响了布局，就需要倒回去重新渲染；
重绘：只是改变节点的颜色等不影响其他元素布局，将只发生重绘；

浏览器渲染的过程：
（1）解析HTML生成DOM树，解析CSS生成CSSOM树
（2）DOM和CSSOM树结合生成渲染树
（3）根据渲染树进行回流得到节点的几何信息
（4）根据渲染树及回流得到的几何信息，得到节点的绝对像素

6.水平垂直居中布局

6.水平垂直居中布局：
水平垂直居中的实现方法：
（1）元素已知宽高：
{
position:absolute;
top:50%;
left:50%;
margin:-height/2 0 0 -width/2
}
（2）元素未知宽高：
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
（3）flex实现：
{
display:flex;
justify-content:center;
align-items:center;
}
（4）grid
body,html{
height:100%;
display:grid;
}
{
margin:auto;
}

7.层叠上下文

7.层叠上下文:
（z-index生效问题：z-index只有在定位元素，并且position不为static才有效）
从下到上面的层叠顺序：
background–>-->z-index<0–>block–>float–>inline-block–>z-index>0

参考：
https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
层叠准则：
1.谁大谁上：当具有明显的水平层叠标识时，如z-index，在同一层叠上下文领域时，层叠值大的那个覆盖小的那个；
2.后来居上：层叠水平一致，层叠顺序相同，在DOM流中处于后面的元素会覆盖前面的元素；
层叠上下文的特性：
层叠上下文的层叠水平比普通元素高；
层叠上下文可以阻断元素的混合模式；
层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文
每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。
每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
层叠上下文的创建：
1.根元素HTML：根层叠上下文；
2.定位元素与传统层叠上下文：position：relative/absolute,以及FireFox/IE下含有position:fixed声明的定位元素，当其z-index不是auto的时候会创建层叠上下文；
3.CSS3与新时代的层叠上下文元素：
（1）z-index不为auto的flex项（父元素为flex、inline-flex）（颠覆了我们对z-index只能和定位元素一起使用，此处z-index可以和非定位元素flex使用）
（2）opacity与层叠上下文；（半透明元素具有层叠上下文）
（3）transform与层叠上下文
（4）mix-blend-mode与层叠上下文
（5）filter与层叠上下文（CSS3规范中的滤镜）
。。。

层叠上下文与层叠顺序：
1.如果层叠上下文元素不依赖于z-index,其层叠顺序是z-index:auto可以看成与z-index:0同级别
2.如果依赖z-index由z-index大小决定

–定位元素在普通元素上面的原因：
元素一旦成为定位元素，z-index自动生效，为auto，也就是0级别的

8.BFC

8.BFC：
概念：块级格式化上下文，创建BFC的盒子是独立布局，盒子里面的元素样式不影响外面元素的布局；
产生BFC的方式：
1、position:absolute
2、float元素
3、display：inline-block
4、overflow不为visiable
5、display：flex
常见的创建BFC方法：position:absolute、float、overflow:hidden
BFC的作用：
（1）包含浮动元素，用BFC清除浮动
高度塌陷问题，父元素中子元素为浮动，会发生高度塌陷
（2）不被浮动元素覆盖
左浮动，右不浮动，发生遮盖,overflow:hidden清除
（3）阻止外边距折叠
当子元素属于同一个BFC会发生外边距折叠，将子元素建一个新的BFC可以解决外边距折叠

8.1脱离文档流的三种方式：

8.1脱离文档流的三种方式：
（1）HTML根元素
（2）float元素
（3）position：absolute或fixed