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

2024年3月22日 81次阅读 来源: seasonley

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

<div style="background-color:#e5edff;"><img src="mm1.jpg"></div>

原因：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;
}
<span class="dib-baseline"></span>
<span class="dib-baseline">x-baseline</span>

原因：一个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权重

    原文作者：seasonley
    原文地址: https://segmentfault.com/a/1190000019688952
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞