想到什么寫什么的總結(jié)帖：
1. 段落首行空兩格：text-indent: 2em;
這個(gè)屬性直接寫長度幾乎所有現(xiàn)代瀏覽器都能支持，但是關(guān)鍵字就不一定了。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-indent
https://caniuse.com/#search=text-indent
2. 首字大?。?code>::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. 加粗和斜體：不要將樣式寄希望于標(biāo)簽！建議老老實(shí)實(shí)用span+class，或者可以在css中加一句：
p b { font-weight: bolder; }
p i { font-style: italic; }
6. 關(guān)于語義化標(biāo)簽：
自從HTML5開始語義化了之后，有些標(biāo)簽的含義發(fā)生了變化。
-
<strong>：表示文本十分重要，一般用粗體； -
<b>：提醒注意（Bring Attention To），雖然一般瀏覽器依然把它顯示為粗體，但是不要把它當(dāng)成粗體。 -
<em>：著重元素 (<em>) 標(biāo)記出需要用戶著重閱讀的內(nèi)容， <em> 元素是可以嵌套的，嵌套層次越深，則其包含的內(nèi)容被認(rèn)定為越需要著重閱讀。 -
<i>：用于表現(xiàn)因某些原因需要區(qū)分普通文本的一系列文本。例如技術(shù)術(shù)語、外文短語或是小說中人物的思想活動等，它的內(nèi)容通常以斜體顯示。（現(xiàn)在很多地方會把<i>解釋為icon） -
<blockquote>, <q>, <cite>：引用。塊級引用、行內(nèi)引用、引用（ Citation）。引用標(biāo)簽也可以嵌套。cite可能會顯示為斜體。
再次強(qiáng)調(diào)：不要將樣式寄希望于標(biāo)簽，因?yàn)闉g覽器的默認(rèn)樣式可能不一樣。如果真的懶，請使用normalize.css。
7. 光標(biāo)選中文字樣式：還有一個(gè)偽類選擇器叫做::selection
例如：
::selection { background: #009a61;color:#fff; }
::-moz-selection { background: #009a61;color:#fff; }
::-webkit-selection { background: #009a61;color:#fff; }
不過::selection只支持background和color這兩個(gè)屬性。原因很簡單：如果每次選中文字都要引起回流和重繪，那瀏覽器的開銷也太大了些。
8. 想要保留滾動行為但是不想顯示滾動條？
webkit內(nèi)核中還有個(gè)偽類-webkit-scrollbar，不過看前綴就知道僅支持webkit內(nèi)核的瀏覽器。
/* 禁止顯示滾動條，但不影響滾動行為 */
.container::-webkit-scrollbar {
display: none;
}
類似的css屬性還有：
- ::-webkit-scrollbar — 整個(gè)滾動條.
- ::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭).
- ::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊.
- ::-webkit-scrollbar-track — 滾動條軌道.
- ::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分.
- ::-webkit-scrollbar-corner — 當(dāng)同時(shí)有垂直滾動條和水平滾動條時(shí)交匯的部分.
- ::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕).
參考資料：
IE還是放棄吧，早期IE的滾動條只能改顏色，IE10+用webkit屬性也是可以的。
9. 禁止復(fù)制（偽）
- 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()"
>
<!-- 一些內(nèi)容 -->
</div>
- CSS屬性：user-select
user-select: none;
// -webkit-user-select已棄用
// 這是一個(gè)實(shí)驗(yàn)中的功能
- 參考文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select
- 參考文檔：https://caniuse.com/#search=user-select
- 偽？ 因?yàn)槭侵螛?biāo)不治本的方法，其實(shí)直接打開console平臺還是可以復(fù)制到文字的。前端是開放的，如果有很重要的信息，請不要交給前端，至少不要使用明文。
