常见问题
tip
- 布局谨记三个上下文:
- containing block - 位置 - 影响 paint, relayout
- stacking context - z-index
- block formatting context - flow, float
- border 不支持渐变
-webkit-user-modify
- BEM - Block Element Modifier
- by Yandex 2007
.block
-.block--mod
.block__elem
-.block__elem--mod
- 目前已不太推荐,以前全局 CSS 容易冲突,现在很容易用 css module 和控制 scope
- CSS Reference
.style {
/* 对齐数字 */
font-variant-numeric: tabular-nums;
}
border 渐变
- border 不支持渐变
- https://css-tricks.com/gradient-borders-in-css/
- wrapper - 额外元素
- border-image+border-image-slice - 不支持 radius
- https://codepen.io/AlexOverbeck/pen/axGQyv
- by wrapper
- https://codepen.io/fabianmichael/pen/yLPyRry
- by svg
- 不支持 input 因为 input 不支持
::before
pure selector
- 能够被 prefix 的 selector
- 用于 css module
/* 不是 pure selector */
:global(body) {
}
/* 是 pure selector - 会变成 .xyz body */
body {
}