CSS 相关

Published by powerfulyang on Mar 16, 2022

关于 css 小细节的集合:

white-space

New linesSpaces and tabsText wrappingEnd-of-line spacesEnd-of-line other space separators
normalCollapseCollapseWrapRemoveHang
nowrapCollapseCollapseNo wrapRemoveHang
prePreservePreserveNo wrapPreserveNo wrap
pre-wrapPreservePreserveWrapHangHang
pre-linePreserveCollapseWrapRemoveHang
break-spacesPreservePreserveWrapWrapWrap

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
1font-variant-numeric = 
2  normal                                              |
3  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]  
4
5<numeric-figure-values> = 
6  lining-nums    |
7  oldstyle-nums  
8
9<numeric-spacing-values> = 
10  proportional-nums  |
11  tabular-nums       
12
13<numeric-fraction-values> = 
14  diagonal-fractions  |
15  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。

codepen
1<iframe height="300" style="width: 100%;" scrolling="no" title="Block Formatting Context" src="https://codepen.io/powerfulyang/embed/QWrzYKm?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
2  See the Pen <a href="https://codepen.io/powerfulyang/pen/QWrzYKm">
3  Block Formatting Context</a> by powerfulyang (<a href="https://codepen.io/powerfulyang">@powerfulyang</a>)
4  on <a href="https://codepen.io">CodePen</a>.
5</iframe>

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 中定义。

tailwindcss 使用问题，解决浏览器不支持 CSS variables 的问题

These days CSS variables (officially known as custom properties) have really good browser support, so you may not actually need a plugin for variables at all.

However if you need to support IE11, you can use the postcss-custom-properties plugin to automatically create fallbacks for your variables.

@layer

@layer, 对于组件或者模块的CSS，我们可以全部写在 @layer 规则中，把自身的优先级降到底部。

在默认情况下，@layer 规则内 CSS 声明的优先级是按照前后顺序来的。
@layer layer-name, layer-name, layer-name 的语法作用可以根据自己的需求调整 @layer 规则的整体优先级，在最后的优先级最高。