CSS基础

Position

static：文档流默认位置。
fixed：相对于根元素定位，脱离文档流。
absolute：相当于最近的position属性不为static的父元素定位，脱离文档流。
relative：相对于自身原有的文档流位置定位，不脱离文档流，会占据文档流位置。
sticky：属于fixed+relative的结合，当大于相应的top、left等位置时，表现为relative属性，<= 时表现为fixed。
注意点：
1、必须结合top、left等属性一起使用；
2、sticky的父元素高度必须比其自身高；
3、父元素不能设置overflow：hidden，否则失效；

初始位置

滑动到top为0时，上一张图片固定，下一张图片可继续滑动
position不为static + index不为auto时，会产生新的层叠上下文

重流、重绘

重绘：改变元素的颜色、背景等不引起布局或位置变化。
重排：引起元素的位置变化、input输入、操作dom、获取元素的width、offsetTop等属性时导致重排。
重排一定导致重绘，重绘不一定重排。
减少重排的方法：
1、减少dom的操作次数，尽量批量操作dom
2、尽可能一次性修改元素样式，而不是多次设置style属性
3、书写元素显隐时，用display：none属性，这样只导致2次重排。如果直接操作dom节点，可能会导致大量重排重绘。
4、移动元素位置尽可能使用transform，而不是margin。transform、opacity不会导致重排重绘。
5、hover等伪类也会导致重排，避免大量hover交互。
6、可使用position：absolute、fixed等布局，脱离文档流之后，影响范围较少。
7、避免使用table表格，一个表格单元的位置变化可能导致其他行列的变化，开销大。

垂直居中实现方法

1、知道元素宽高
使用position: absolute + left + margin
2、不知道元素宽高：position: absolute + left + transform或position: absolute + left + margin
: auto
3、内联元素：vertical-align： center实现垂直居中，text-align: center水平居中，文本使用line-height = height实现垂直居中
4、display： table-cell；text-align:center;vertical-align:middle；该属性不会导致重排
5、flex、grid布局

flex、grid对比

flex

flex只能实现一维布局，而grid可以是二维的是以单元格为单位，grid比flex拥有更多的属性。
flex常用属性：
justify-content、align-items、flex-direction、flex-wrap、align-self、align-content、flex-basis、flex-grow、flex-shrink
align-content和justify-content类似，只是该属性只有多行的时候才生效。
flex是flex-basis、flex-grow、flex-shrink的缩写。
flex-basis：单元格的宽度，优先级比width高，不设置则是width的宽度
flex-grow：当有剩余空间时，如何按比例分配剩余空间给各个单元格
flex-shrink：当空间不足时，如何按比例缩小各单元格相应的大小

grid

grid是网格布局，更适合大型复杂的布局。主要属性有：grid-template-rows，grid-template-columns，grid-gap，grid-row，grid-column，grid-template-areas，justify-content，justify-items，justify-self，align-content，align-items，align-self；

grid-template-rows：minmax(100, 200)，1fr，2fr；// 一共三个单元格，第一个的宽度在100，到200之间；fr表示分配剩余的空间大小，第二个单元格占剩余空间的1/3，第三个单元格占剩余空间的2/3；
grid-gap: 10px 20px; // 表示行间距为10px，列间距为20px；
grid-row: 1/3; // 表示该单元格所占位置从1网格线到3网格线；该属性可精确控制单元格的位置大小
grid-template-areas: "header  header  header  header"
            "sidebar .       main    main"
            "footer  footer  footer  footer";
            // 设置网格区域的内容，文字相同的网格会合并为一个
jusitfy-content: center; // 设置主轴的对齐方式；
justify-items: center; // 设置主轴的元素的对其方式；

justify-content，justify-items区别如图

层叠上下文

不是所有元素都有层叠上下文，以下会产生：

• html根元素自带层叠上下文；
• position不为static + z-index不为auto；
• 布局为flex、inline-flex;
• transform、opacity不为1；
• filter不为none；

为啥内联元素层叠上下文比块级元素、浮动元素高：因为内联元素展示的是文本，比他们低的话，就看不到文字了。

移动端布局

1、rem + viewPort：1rem = font-size的大小，计算其他元素大小时，使用rem作为单位。font-size的值根据不同屏幕，动态计算，为了方便计算一般分为10等分。font-size = clientWidth / 10; 动态设置在html根元素上。
移动端默认宽度是980px，通过设置viewPort="device-width"可匹配不同手机的屏幕大小。
2、vw、vh：整个屏幕的宽高是100vw，100vh。
3、devicePixcelRatio = 2，如何绘制0.5px的线条？

• rem + scale：
• transform：
• box-shadow：
• border设置为图片

具体操作参考链接：移动端1px解决方案