CSS 相关

Published by powerfulyang on Mar 16, 2022

关于 css 小细节的集合:

white-space

	New lines	Spaces and tabs	Text wrapping	End-of-line spaces	End-of-line other space separators
`normal`	Collapse	Collapse	Wrap	Remove	Hang
`nowrap`	Collapse	Collapse	No wrap	Remove	Hang
`pre`	Preserve	Preserve	No wrap	Preserve	No wrap
`pre-wrap`	Preserve	Preserve	Wrap	Hang	Hang
`pre-line`	Preserve	Collapse	Wrap	Remove	Hang
`break-spaces`	Preserve	Preserve	Wrap	Wrap	Wrap

break-word & overflow-wrap

word-break: normal | break-all | keep-all | break-word

overflow-wrap: normal | break-word | anywhere
The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.
In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

css 设置数字等宽

font-variant-numeric CSS 属性控制数字，分数和序号标记的替代字形的使用。
Formal syntax:

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
font-variant-numeric = 
  normal                                              |
  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]  

<numeric-figure-values> = 
  lining-nums    |
  oldstyle-nums  

<numeric-spacing-values> = 
  proportional-nums  |
  tabular-nums       

<numeric-fraction-values> = 
  diagonal-fractions  |
  stacked-fractions

可以使用 font-variant-numeric: tabular-nums 来使数字等宽。

mix-blend-mode

最近遇到的一个问题，首页的文章列表使用了未知颜色的图片做背景，想在上面显示标题和日期，遇到的问题就是颜色重合导致看不清文字。

其实使用 mix-blend-mode: difference 可以尝试去解决，但是我当时并没有意识到。

ps: 估计效果不太好因为颜色太斑驳。当时的解决办法是在角落加了一个：半透明的的黑色背景，然后再显示文字，当然效果也不差。

BFC

BFC 全称为 block formatting context，中文为“块级格式化上下文”。它是一个只有块级盒子参与的独立块级渲染区域，它规定了内部的块级盒子如何布局，且与区域外部无关。

BFC 有什么用

修复浮动元素造成的高度塌陷问题。
避免非期望的外边距折叠。
实现灵活健壮的自适应布局。

触发 BFC 的常见条件

<html> 根元素。
float 的值不为 none。
position 的值不为 relative 或 static。
overflow 的值不为 visible 或 clip（除了根元素）。
display 的值为 table-cell，table-caption，或 inline-block 中的任意一个。
display 的值为 flow-root，或 display 值为 flow-root list-item。
flex items，即 display 的值为 flex 或 inline-flex 的元素的直接子元素（该子元素 display 不为 flex，grid，或 table）。
grid items，即 display 的值为 grid 或 inline-grid 的元素的直接子元素（该子元素 display 不为 flex，grid，或 table）。
contain 的值为 layout，content，paint，或 strict 中的任意一个。
column-span 设置为 all 的元素。

提示：display: flow-root，contain: layout 等是无副作用的，可在不影响已有布局的情况下触发 BFC。


  See the Pen <a href="https://codepen.io/powerfulyang/pen/QWrzYKm">
  Block Formatting Context</a> by powerfulyang (<a href="https://codepen.io/powerfulyang">@powerfulyang</a>)
  on <a href="https://codepen.io">CodePen</a>.

Mastering margin collapsing

属于同一个 BFC 的两个相邻块级元素的上下 margin 会发生重叠(设置 writing-mode: tb-rl 时，水平 margin 会发生重叠)。当两个相邻块级子元素属于不同的 BFC 时可以阻止外边距重叠
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

IFC

内联格式化上下文（IFC，inline formatting context）。

FFC

弹性格式化上下文（FFC，flex formatting context），在 CSS3 中定义。

GFC

栅格格式化上下文（GFC，grid formatting context），在 CSS3 中定义。

# CSS 相关

## white-space

## break-word & overflow-wrap

## css 设置数字等宽

## mix-blend-mode

## BFC

### Mastering margin collapsing

## IFC

## FFC

## GFC