[CSS] 表单 Css 样式

原 youtube 视频链接：Form Styling Essentials | The basics to modern CSS tips & tricks

accent-color

详情可以参考 mdn：accent-color - CSS: Cascading Style Sheets | MDN

目前 accent-color 只能影响一些表单元素的颜色：

而且这个属性目前还存在兼容性问题，参考 caniuse："accent-color" | Can I use... Support tables for HTML5, CSS3, etc

font: inherit

默认情况下， font 属性是默认继承父元素的值的。参考 stack overflow 上的文章：css - What is the purpose of using font: inherit? - Stack Overflow

但是也是有例外的，例如表单元素，参考我写的 jsFiddle 上的 demo：Edit fiddle - JSFiddle - Code Playground

可以看到，如果表单元素不使用 font: inherit 的话，input 框中的字体样式是有区别的：

代码具体如下：

<div class="container">
  <div class="form__group">
    <label for="first">FIRST</label>
    <input name="first"/>
  </div>
</div>

<style>
    .form__group {
      color: skyblue;
      font-family: Georgia;
      font-weight: 700;
      line-height: 20px;
    }

    label,
    input {
      /* font: inherit; */
    }
</style>

思考：虽然如上面所说，font 属性是默认继承父元素的值的，但是也有像表单这样的例外，不过目前我只了解到有表单是这样的，所以如果后面碰到了默认没有继承父元素的 font 的，也可以尝试用 inherit

长度、高度单位

• ch ：表示你所使用的字体中的一个字符 “0” 的宽度（不要认为是任意一个字符的宽度，因为会不等宽字体）

  • 参考 medium 的文章：What is the CSS ‘ch’ Unit?. I keep seeing authors and speakers… | by Eric A. Meyer | Medium

• lh ：以 line-height 为基准的高度

  • 有一定的兼容性问题："lh" | Can I use... Support tables for HTML5, CSS3, etc

    

• cap ：基于一个大写字母的高度； ex ：基于一个小写字母的高度

  • 参考一篇很不错的文章：CSS Cap Unit

  • ex 的兼容性不错，但 cap 的不太行：