flex-grow 与 flex-shrink 分配空间的计算规则
flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时，如何分配这些剩余空间。
- 比如剩余空间为 x，三个元素的 flex-grow 分别为 a，b，c。设 sum 为 a + b + c。那么三个元素将得到剩余空间分别是 x a / sum, x b / sum, x * c / sum，是为权重也。
- 当所有元素的 flex-grow 之和小于 1 的时候（注意是 1，也就是说每个元素的 flex-grow 都是一个小数如 0.2 这样的），上面式子中的 sum 将会使用 1 来参与计算，而不论它们的和是多少。也就是说，当所有的元素的 flex-grow 之和小于 1 的时候，实际上用来分配的空间是 sum(flex-grow) / 1 * 剩余空间，这些用来分配的空间依然是按 flex-grow 的比例来分配。
- 如果最终 grow 后的结果大于 max-width 指定的值，max-width 的值将会优先使用。同样会导致父元素有部分剩余空间没有分配。
flex-shrink 可以在空间不够时让各个子元素收缩以适应有限的空间
- 每个元素收缩的权重为其 flex-shrink 乘以其宽度。
- 当所有元素的 flex-shrink 之和小于 1 时，只会收缩 flex-shrink 之和相对于 1 的比例的空间。
- 类似 flex-grow，flex-shrink 也会受到 min-width 的影响。
百分比值
vertical-align的百分比值是相对于line-height计算的。
{
line-height: 30px;
/*vertical-align: -10% */
vertical-align: -3px;
}margin和padding的百分比值是相对于父元素的width计算的。
.parent{width:100px}
.child{
margin-bottom:10%;/*10px*/
padding-bottom:10%;
}幽灵空白节点
在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，称之为“幽灵空白节点”。
block>inline
原因：vertical-align默认值是baseline,导致下方留空
解决方案：
- 让vertical-align失效：
img { display: block; } - 使用其他vertical-align值：
bottom/middle/top - 修改line-height值足够小：
div { line-height: 5px; } - 修改font-size:
div { font-size: 0; }
inline-block + inline-block
.dib-baseline {
display: inline-block; width: 150px; height: 150px;
border: 1px solid #cad5eb; background-color: #f0f3f9;
}
x-baseline原因：一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。
解决方案：
- 改造元素的基线:空元素随便放几个字符
- 改造“幽灵空白节点”的基线位置：
font-size:0 - 使用其他vertical-align对齐方式:
bottom/middle/top
滚动
实现幻灯片滚动终止定位
- 父元素
scroll-snap-type:x mandatory - 子元素
scroll-snap-align:center
实现平滑滚动
scroll-behavior:smooth
滚动回弹
-webkit-overflow-scrolling:auto使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。-webkit-overflow-scrolling:touch 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
-
bug:
- 滚动中 scrollTop 属性不会变化
- 手势可穿过其他元素触发元素滚动
- 滚动时暂停其他 transition
ios的fixed布局抖动解决方案
-webkit-overflow-scrolling:touch- 在main上使用fixed定位，加上overflow-y属性。
- 中间的main不设定位，高度100%，再padding头部和尾部
- 三方库 iScroll 或 better-scroll
自定义属性
搭配动画使用
@keyframes var {
33% { --someVar: 33%; }
66% { --someVar: 66%; }
}搭配计数器使用
.bar::before {
counter-reset: progress var(--percent);
content: counter(progress);
}无效情况
/* 无效 */
.bar::before {
content: var(--percent);
}计数器
初始化
/* 计数器名称是'small-apple', 并且默认起始值是2 */
.xxx { counter-reset: small-apple 2; } 多个计数器同时命名
/*多个计数器同时命名*/
.xxx { counter-reset: wangxiaoer 2 wangxiaosan 3; }计数与显示
.counter { counter-reset: wangxiaoer 2; counter-increment: wangxiaoer; }
.counter:before { content: counter(wangxiaoer); }style-type
content: counter(wangxiaoer, lower-roman);
/* 以小写罗马数字格式表示当前计数器wangxiaoer的值 */拼接文字
{
counter-reset: progress var(--percent);
content: counter(progress) '%\2002';
width: calc(1% * var(--percent));
}普照规则
计数器的数值变化遵循HTML渲染顺序，遇到一个increment计数器就变化，什么时候counter输出就输出此时的计数值。
失效情况
display的属性值是none或者含有hidden属性（针对支持浏览器），则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。
css权重
权重等级
1、行内样式style
2、ID选择器
3、类，属性选择器和伪类选择器
4、元素和伪元素
规则:相同的权重：后出现的选择器生效;不同的权重，权重值高则生效
01. *{} ====》0
02. li{} ====》1(一个元素)
03. li:first-line{} ====》2(一个元素，一个伪元素)
04. ul li {} ====》2（两个元素）
05. ul ol+li{} ====》3（三个元素）
06. h1+ *[rel=up] {} ====》11（一个属性选择器，一个元素）
07. ul ol li.red{} ====》13（一个类，三个元素）
08. li.red.level{} ====》21（两个类，一个元素）
09. style="" ====》1000(一个行内样式)
10. p {} ====》1（一个元素）
11. div p {} ====》2（两个元素）
12. .sith {} ====》10（一个类）
13. div p.sith{} ====》12（一个类，两个元素）
14. #sith{} ====》100（一个ID选择器）
15. body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)position与布局
- static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
- relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
- absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
- fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
- sticky：当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。
BFC与折叠margin细则
BFC满足条件：
- float的值不为”none”
- overflow的值不为”visible”
- display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个
- position的值不为 “static” 或 “relative”中的任何一个
折叠margin触发条件:
- 这些margin都处于普通流中，并在同一个BFC中；
- 这些margin没有被非空内容、padding、border 或 clear 分隔开；
-
这些margin在垂直方向上是毗邻的，包括以下几种情况：
- 一个box的top margin与第一个子box的top margin
- 一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height为auto的情况下
- 一个box的bottom margin与紧接着的下一个box的top margin
- 一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box
- 根元素的外边距不会参与折叠
BFC作用
- BFC可以阻止垂直边距叠加问题
- BFC可以包含内部元素的浮动
- BFC可以阻止元素被浮动覆盖
- BFC可以决定清除浮动的范围
IFC规则
- 在行内格式化上下文中，框一个接一个地水平排列，起点是包含块的顶部。
- 水平方向上的 margin，border 和 padding 在框之间得到保留
- 框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐
参考资料
详解 flex-grow 与 flex-shrink
css学习专题-BFC
深入研究-webkit-overflow-scrolling:touch及ios滚动
CSS深入理解vertical-align和line-height的基友关系
CSS counter计数器(content目录序号自动递增)详解
杀了个回马枪，还是说说position:sticky吧
你应该知道的一些事情——CSS权重