关于文字排版和相关操作的总结

想到什么写什么的总结帖：

1. 段落首行空两格：text-indent: 2em;

这个属性直接写长度几乎所有现代浏览器都能支持，但是关键字就不一定了。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-indent
https://caniuse.com/#search=text-indent

2. 首字大小：::first-letter { font-size: 130%; }

相似的伪元素还有：::first-line，可以改变第一行的文字效果。

3. 英文大小写：text-transform: uppercase;

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-transform
一般常用的就是uppercase | lowercase，另外none可以禁止改变大小写。

4. 段落之间空行：直接用margin-bottom。

5. 加粗和斜体：不要将样式寄希望于标签！建议老老实实用span+class，或者可以在css中加一句：

p b { font-weight: bolder; }
p i { font-style: italic; }

6. 关于语义化标签：

自从HTML5开始语义化了之后，有些标签的含义发生了变化。

• <strong>：表示文本十分重要，一般用粗体；
• <b>：提醒注意（Bring Attention To），虽然一般浏览器依然把它显示为粗体，但是不要把它当成粗体。
• <em>：着重元素 (<em>) 标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
• <i>：用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。（现在很多地方会把<i>解释为icon）
• <blockquote>, <q>, <cite>：引用。块级引用、行内引用、引用（ Citation）。引用标签也可以嵌套。cite可能会显示为斜体。

再次强调：不要将样式寄希望于标签，因为浏览器的默认样式可能不一样。如果真的懒，请使用normalize.css。

7. 光标选中文字样式：还有一个伪类选择器叫做::selection

例如：

::selection { background: #009a61;color:#fff; }  
::-moz-selection { background: #009a61;color:#fff; }  
::-webkit-selection { background: #009a61;color:#fff; }

不过::selection只支持background和color这两个属性。原因很简单：如果每次选中文字都要引起回流和重绘，那浏览器的开销也太大了些。

8. 想要保留滚动行为但是不想显示滚动条？

webkit内核中还有个伪类-webkit-scrollbar，不过看前缀就知道仅支持webkit内核的浏览器。

/* 禁止显示滚动条，但不影响滚动行为 */
.container::-webkit-scrollbar {
  display: none;
}

类似的css属性还有：

• ::-webkit-scrollbar — 整个滚动条.
• ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
• ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
• ::-webkit-scrollbar-track — 滚动条轨道.
• ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
• ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
• ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

参考资料：

• ::-webkit-scrollbar --- MDN
• Styling Scrollbars

IE还是放弃吧，早期IE的滚动条只能改颜色，IE10+用webkit属性也是可以的。

9. 禁止复制（伪）

1. JS和HTML属性的方式：

<div
    onmousemove="\HideMenu()\"
    oncontextmenu="return false"
    ondragstart="return false"
    onselectstart="return false"
    onselect="document.selection.empty()"
    oncopy="document.selection.empty()"
    onbeforecopy="return false"
    onmouseup="document.selection.empty()"
  >
    <!-- 一些内容 -->
  </div>

2. CSS属性：user-select

  user-select: none; 
// -webkit-user-select已弃用
// 这是一个实验中的功能

• 参考文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select
• 参考文档：https://caniuse.com/#search=user-select
• 伪？ 因为是治标不治本的方法，其实直接打开console平台还是可以复制到文字的。前端是开放的，如果有很重要的信息，请不要交给前端，至少不要使用明文。