CSS 相关

Published by powerfulyang on Mar 16, 2022

关于 CSS 有关的问题，比如以前不太关注的换行相关的 CSS，数字等宽相关的 CSS，面试遇到的 BFC 是个啥东西（外边距重叠），还有如何在低版本浏览器中使用 tailwindcss。

关于 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 规则的整体优先级，在最后的优先级最高。

关于 :first-child 和 :first-of-type

关于 :first-child 和 :first-of-type 这两个伪类，这里简要说明一下它们的区别和为什么在服务端渲染（Server-Side Rendering, SSR）中 :first-child 可能会带来问题：

  1. :first-child :first-child 伪类针对的是其父元素的第一个子元素，不管这个子元素是什么类型。

例子：

html
1<div>
2  <span></span>
3  <p></p>
4  <p></p>
5</div>

在这个结构中，<span> 是 <div> 的第一个子元素。如果你有以下的 CSS：

css
1:first-child {
2  color: red;
3}

那么 <span> 将被设定为红色。

  1. :first-of-type 而 :first-of-type 伪类针对的是它同胞中的第一个特定类型的元素。

使用同样的结构，如果你有：

css
1p:first-of-type {
2  color: blue;
3}

那么第一个 <p> 将被设定为蓝色，而不是 <span>。

  1. 为什么在 SSR 中使用 :first-child 可能会有问题？

在服务端渲染时，一些框架可能会在 DOM 中插入额外的包装器或实用程序元素。如果你依赖 :first-child，并且 SSR 框架在第一个子元素位置添加了一个意外的元素，你的样式可能不会应用于你原先预期的元素。

通过使用 :first-of-type，你可以更具体地针对某种类型的第一个元素，从而减少因添加额外元素而产生的意外行为的可能性。

  1. 从 :first-child 切换到 :first-of-type

如果你决定进行切换，请确保彻底测试更改，确保它们不会引入其他意外的样式问题。如果你的样式表很大且复杂，或者你正在使用一个组件库，在那里更改可能会有广泛的影响，这一点尤为重要。