CSS 冷知识收集

⚫ direction: rtl 控制水平流向方向从右向左，可以搭配text-overflow:ellipsis 使省略号在前面。
也可反转表格列的展示顺序。

⚫ text-transform: uppercase/lowercase;  使输入框中的文字变为大写/小写（忽略用户键盘是否开启大小写）。用这条css就可以满足一些产品对于在输入框中输入的单位，必须大写的要求。

⚫ overflow:hidden 元素下面的position:absolute;元素不会被裁剪！（父元素未设置相对定位：position:relative 等）

<div style="overflow:hidden;width: 100px;height:100px;">
    <div style="width: 200px;height:200px;background-color:bisque;border:2px solid red;position:absolute;"></div>
</div>

⚫ border-radius: 50%/50%;绘制椭圆

⚫ table 可以通过border-collapse: separate;border-spacing: 1px;来画网格线，而非设置单元格border

 table{
    border-collapse: separate; /*默认*/
    border-spacing: 1px; 
    background-color:#aaa;
  }
  table td,table th {
    background-color: #fff;
    /* border: 1px solid #aaa; */
  }

 

⚫border 实现“三条杠”。红框标注为content-box

border-top: 60px double; border-bottom: 20px solid;

⚫ border， dashed 宽度设置大一点就变成最大化图标了

  <div style="box-sizing:border-box;width: 100px;height: 100px;background-color:#eee;border: 20px dashed #f90;"></div>

⚫ clip-path 可以裁剪元素

clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50% );
transform: rotate(45deg);

• 
  
  vertical-align 是支持数值，和百分比（相对于line-height）的。平时使用vertical-align:middle 对齐一些图标时，middle参考的是x字符的中线，而x字符的中线对于中文来说是偏下的，因此总会感觉对不齐。（参考删除线：x中文）此时可以使用vertical-align: xxpx来相对基线（baseline）垂直移动。display: table-cell支持vertical-align

• contain: strict 优化渲染。

• overflow: clip 裁剪溢出内容。overflow:hidden 可以滚动。clip不可滚动。
• :nth-child() 与:nth-of-type() 在相同tag的元素下，表现相同，若要使用:nth-of-type() 的特性，一定要区分tag，比如<p><div>。
  虽然className不同，但是标签都是<div>的话，用 .class:nth-of-type 也是等价于 tag:nth-of-type。
• inset (chrome > 87)
  inset: 0  等价于 top: 0;right: 0;bottom: 0;left: 0; ，
  inset: 10px 20px;可以写多个 
• user-select: all; 点击时会选中元素中的所有内容。
• flex: auto 等同于 flex: 1 1 auto
• drop-shadow 给图片、元素加阴影。这个阴影会投影在透明的背景上。若元素background-color设为透明，则里面的文字会投影到背景。用在tooltip上则不用单独设置三角的阴影。
  
• place-items 是 align-items  justify-items (不是justify-content) 的简写
• font 是多个字体属性合集，常用的可以是font: 12px/30px; // font-size / line-height  
• caret-color  输入框中光标的颜色
• aspect-ratio 设定元素宽高比
• text-indent: 2em  文字首行缩进
• background-clip  背景渲染范围
  
• background-blend-mode 背景混合模式
• mix-blend-mode 混合模式
• backface-visibility 旋转背面不可见 （transform:rotate元素背面）
• count-increment: name  当前元素编号
• content: counter(name, [lower-lation])
• direction:rtl 文字书写方向
• writing-mode:vertical-rl  文字垂直书写
• shape-outside 相邻内容环绕
  
• -webkit-text-stroke(非标准) 文字描边
  
• text-shadow 文字阴影
  
• -webkit-box-reflect(非标准) 倒影特效
• border-image 定义边框背景
• column 列布局 column-width / column-count / column-gap / column-rule
  
• transform: skew(deg, deg) 坐标轴旋转元素变平行四边形
• -webkit-line-clamp 多行文本，溢出时最后一行显示‘...’
  
• overscroll-behavior 阻止滚动事件传递到父元素
• touch-action 触摸屏用？
• display: flow-root 创建无副作用bfc
• overflow:overlay 滚动条不占空间
• content-visibility:auto
  比如设置一个div元素content-visibility:hidden。则该元素下的所有子元素都不渲染。
  设置为auto表示若该元素在屏幕外，则为hidden。滚动到屏幕内了就为visiblie。
  兼容>=chrome85，优化渲染性能。（在table tr, tbody等标签中设置无效[2022.11.11]）
• scroll-snap  弹性滚动
• flex-grow:1 根据剩余空间按比例分配。flex:1 根据比例分配全部空间

table

• caption-side 表格标题位置
• empty-cells:hide 隐藏空单元格

@supports(display:grid) 校验是否支持css特性

@property{} 更多的css动画支持，比如linear-gradient 的动画

:focus-within 元素或其后代元素获取焦点时

:focus-visible tab切换触发，鼠标点击不触发

:target  id锚点选中时的样式

:fullscreen  f11全屏时的样式

::selection 被选中的文字样式

::first-letter  首字母选择器

:where() / :is() 选择器 （实验性）

:not() 不满足括号内选择器的元素。比如div:not(:last-child)

:has() 选择器，选择满足括号中选择器条件的元素。类似:not()，当成祖先选择器理解。div:has(>.selected)