FE.CSS-容易疏忽的CSS细节

flex-grow 与 flex-shrink 分配空间的计算规则

flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时,如何分配这些剩余空间。

  1. 比如剩余空间为 x,三个元素的 flex-grow 分别为 a,b,c。设 sum 为 a + b + c。那么三个元素将得到剩余空间分别是 x a / sum, x b / sum, x * c / sum,是为权重也。
  2. 当所有元素的 flex-grow 之和小于 1 的时候(注意是 1,也就是说每个元素的 flex-grow 都是一个小数如 0.2 这样的),上面式子中的 sum 将会使用 1 来参与计算,而不论它们的和是多少。也就是说,当所有的元素的 flex-grow 之和小于 1 的时候,实际上用来分配的空间是 sum(flex-grow) / 1 * 剩余空间,这些用来分配的空间依然是按 flex-grow 的比例来分配。
  3. 如果最终 grow 后的结果大于 max-width 指定的值,max-width 的值将会优先使用。同样会导致父元素有部分剩余空间没有分配。

flex-shrink 可以在空间不够时让各个子元素收缩以适应有限的空间

  1. 每个元素收缩的权重为其 flex-shrink 乘以其宽度。
  2. 当所有元素的 flex-shrink 之和小于 1 时,只会收缩 flex-shrink 之和相对于 1 的比例的空间。
  3. 类似 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权重

你可能感兴趣的:(css3)