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权重