什么是 CSS？

级联样式表 (CSS) 是一种样式表语言，用于描述以 HTML 等标记语言编写的文档的样式。CSS 是万维网的主要技术之一，与 HTML 和 JavaScript 并驾齐驱。
CSS 旨在实现样式和内容的分离，包括布局、颜色和字体。这种分离可以提高内容的可访问性，在样式特性的规范中提供更多的灵活性和控制，通过在单独的 .css 文件中指定相关的 CSS 使多个网页能够共享样式，并降低结构内容的复杂性和重复性。

重置样式1

  1. html ,body ,div ,span ,applet ,object ,iframe ,p ,blockquote ,pre ,a ,abbr ,acronym ,address ,big ,cite ,code ,del ,dfn ,em ,img ,ins ,kbd ,q ,s ,samp ,small ,strike ,strong ,sub ,sup ,tt ,var ,b ,u ,i ,center ,dl ,dt ,dd ,ol ,ul ,li ,fieldset ,form ,label ,legend ,table ,caption ,tbody ,tfoot ,thead ,tr ,th ,td ,article ,aside ,canvas ,details ,embed ,figure ,figcaption ,footer ,header ,hgroup ,main ,menu ,nav ,output ,ruby ,section ,summary ,time ,mark ,audio ,video {margin: 0;padding: 0;vertical-align: baseline;border: none;}
  2. body ,textarea ,input ,button ,select ,keygen ,legend {font: 14px/1.5 'Microsoft YaHei UI','Microsoft YaHei',Roboto,Helvetica,Arial,Verdana,sans-serif;outline: none;}
  3. article ,aside ,details ,figcaption ,figure ,footer ,header ,hgroup ,main ,menu ,nav ,section {display: block;}
  4. blockquote:before ,blockquote:after ,q:before ,q:after {content: none;}
  5. table {width: 100%;border-spacing: 0;border-collapse: collapse;}
  6. input ,select {outline: none;appearance: none;}
  7. h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,em ,strong ,b {font-weight: bold;}
  8. del ,ins ,u ,s ,a ,a:hover {text-decoration: none;}
  9. * ,:after ,:before {box-sizing: border-box;-webkit-tap-highlight-color: transparent;}
  10. textarea {overflow: auto;resize: none;}
  11. blockquote ,q {quotes: none;}
  12. a ,button {cursor: pointer;}
  13. *[hidden] {display: none;}
  14. ol ,ul ,li {list-style: none;}
  15. html ,body {width: 100%;height: 100%;}
  16. /* 滚动条 */
  17. ::-webkit-scrollbar-track {border-radius: 10px;background-color: #fff;box-shadow: inset 0 0 6px rgba(0,0,0,.3);}
  18. ::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #999;box-shadow: inset 0 0 6px rgba(0,0,0,.3);}
  19. ::-webkit-scrollbar {width: 6px;height: 6px;background-color: #f5f5f5;}

重置样式2

  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, menu, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, embed,
  11. figure, figcaption, footer, header, hgroup,
  12. main, menu, nav, output, ruby, section, summary,
  13. time, mark, audio, video {
  14.     margin: 0;
  15.     padding: 0;
  16.     border: 0;
  17.     font-size: 100%;
  18.     font: inherit;
  19.     vertical-align: baseline;
  20. }
  21. /* HTML5 display-role reset for older browsers */
  22. article, aside, details, figcaption, figure,
  23. footer, header, hgroup, main, menu, nav, section {
  24.     display: block;
  25. }
  26. /* HTML5 hidden-attribute fix for newer browsers */
  27. *[hidden] {
  28.     display: none;
  29. }
  30. body {
  31.     line-height: 1;
  32. }
  33. menu, ol, ul {
  34.     list-style: none;
  35. }
  36. blockquote, q {
  37.     quotes: none;
  38. }
  39. blockquote:before, blockquote:after,
  40. q:before, q:after {
  41.     content: '';
  42.     content: none;
  43. }
  44. table {
  45.     border-collapse: collapse;
  46.     border-spacing: 0;
  47. }

css中的选择器

~(波浪号)
p~ul选择器 p之后出现的所有ul。
两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。

+(加号）

  • 二者有相同的父元素，
  • 选择紧接在另一个元素后的元素

>(大于号)
是css3特有的选择器，
A>B 表示选择A元素的所有子B元素。

打字效果

您知道吗？其实您可以使用零 JavaScript 来创建打字效果。
CSS - 图1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       .wrapper {
  10.         height: 100vh;
  11.         /*This part is important for centering*/
  12.         display: flex;
  13.         align-items: center;
  14.         justify-content: center;
  15.       }
  17.       .typing-demo {
  18.         width: 22ch;
  19.         animation: typing 2s steps(22), blink 0.5s step-end infinite alternate;
  20.         white-space: nowrap;
  21.         overflow: hidden;
  22.         border-right: 3px solid;
  23.         font-family: monospace;
  24.         font-size: 2em;
  25.       }
  27.       @keyframes typing {
  28.         from {
  29.           width: 0;
  30.         }
  31.       }
  33.       @keyframes blink {
  34.         50% {
  35.           border-color: transparent;
  36.         }
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="wrapper">
  42.       <div class="typing-demo">这是一个打字演示。</div>
  43.     </div>
  44.   </body>
  45. </html>

图片非透明区域添加投影

当您使用透明图像时，您可以使用 drop-shadow() 过滤器函数在图像内容上创建阴影，而不是使用 box-shadow 属性在元素的整个框后面创建矩形阴影：filter: drop-shadow(2px 4px 8px #585858);
CSS - 图2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       .wrapper {
  10.         height: 100vh;
  11.         display: flex;
  12.         align-items: center;
  13.         justify-content: center;
  14.       }
  16.       .mr-2 {
  17.         margin-right: 2em;
  18.       }
  20.       .mb-1 {
  21.         margin-bottom: 1em;
  22.       }
  24.       .text-center {
  25.         text-align: center;
  26.       }
  28.       .box-shadow {
  29.         box-shadow: 2px 4px 8px #585858;
  30.       }
  32.       .drop-shadow {
  33.         filter: drop-shadow(2px 4px 8px #585858);
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <div class="wrapper">
  39.       <div class="mr-2">
  40.         <div class="mb-1 text-center">box-shadow</div>
  42.         <img
  43.           class="box-shadow"
  44.           src="https://markodenic.com/man_working.png"
  45.           alt="Image with box-shadow"
  46.         />
  47.       </div>
  49.       <div>
  50.         <div class="mb-1 text-center">drop-shadow</div>
  52.         <img
  53.           class="drop-shadow"
  54.           src="https://markodenic.com/man_working.png"
  55.           alt="Image with drop-shadow"
  56.         />
  57.       </div>
  58.     </div>
  59.   </body>
  60. </html>

平滑滚动

不需要 JavaScript 就可以实现平滑滚动，只需一行 CSS。
CSS - 图3

  1. /* 喜欢的同学一定要点赞、转发、收藏啊! */
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <style>
  10.       html {
  11.         scroll-behavior: smooth;
  12.       }
  14.       nav {
  15.         position: fixed;
  16.         left: calc(50vw - 115px);
  17.         top: 0;
  18.         width: 200px;
  19.         text-align: center;
  20.         padding: 15px;
  21.         background: #fff;
  22.         box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
  23.       }
  25.       nav .link {
  26.         padding: 5px;
  27.         color: white;
  28.       }
  30.       .section {
  31.         height: 100vh;
  32.         display: flex;
  33.         align-items: center;
  34.         justify-content: center;
  35.         color: #fff;
  36.         font-size: 5em;
  37.         text-shadow: 0px 2px 0px #b2a98f, 0px 4px 3px rgba(0, 0, 0, 0.15),
  38.           0px 8px 1px rgba(0, 0, 0, 0.1);
  39.       }
  41.       .bg-red {
  42.         background: #de5448;
  43.       }
  45.       .bg-blue {
  46.         background: #4267b2;
  47.       }
  49.       .bg-green {
  50.         background: #4caf50;
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <nav>
  56.       Scroll to:
  57.       <a href="#sectionA" class="link bg-red">A</a>
  58.       <a href="#sectionB" class="link bg-blue">B</a>
  59.       <a href="#sectionC" class="link bg-green">C</a>
  60.     </nav>
  62.     <div class="wrapper">
  63.       <div id="sectionA" class="section bg-red">A</div>
  64.       <div id="sectionB" class="section bg-blue">B</div>
  65.       <div id="sectionC" class="section bg-green">C</div>
  66.     </div>
  67.   </body>
  68. </html>

图片光标

您知道如何使用自己的图像，甚至是表情符号作为光标吗？
CSS - 图4

  1. /* 喜欢的同学一定要点赞、转发、收藏啊! */
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <style>
  10.       .wrapper {
  11.         display: flex;
  12.         height: 100vh;
  13.         align-items: center;
  14.         justify-content: center;
  15.         background: #4776e6;
  16.         background: -webkit-linear-gradient(to right, #4776e6, #8e54e9);
  17.         background: linear-gradient(to right, #4776e6, #8e54e9);
  18.         padding: 0 10px;
  19.       }
  21.       .tile {
  22.         width: 200px;
  23.         height: 200px;
  24.         display: flex;
  25.         align-items: center;
  26.         justify-content: center;
  27.         background-color: #de5448;
  28.         margin-right: 10px;
  29.         color: #fff;
  30.         font-size: 1.4em;
  31.         text-align: center;
  32.       }
  34.       .tile--image-cursor {
  35.         background-color: #1da1f2;
  36.         cursor: url(https://picsum.photos/20/20), auto;
  37.       }
  39.       .tile--emoji-cursor {
  40.         background-color: #4267b2;
  41.         cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"),
  42.           auto;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <div class="wrapper">
  48.       <div class="tile">Default</div>
  49.       <div class="tile tile--image-cursor">Image Cursor</div>
  50.       <div class="tile tile--emoji-cursor">Emoji Cursor</div>
  51.     </div>
  52.   </body>
  53. </html>

文本保留特定行数其余内容省略

您可以使用“-webkit-line-clamp”属性将文本截断为特定的行数。文本被夹住的点将显示一个省略号。
CSS - 图5

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       body {
  10.         padding: 20px;
  11.         font-family: "Open Sans", sans-serif;
  12.       }
  14.       .tile {
  15.         background: linear-gradient(to right, #2b32b2, #1488cc);
  16.         padding: 15px;
  17.         margin-bottom: 15px;
  18.         padding: 15px;
  19.         width: 300px;
  20.         color: #fff;
  21.       }
  23.       .line-clamp {
  24.         display: -webkit-box;
  25.         -webkit-box-orient: vertical;
  26.         -webkit-line-clamp: 3; /* Change this line if you want. In this case it trimmed the text to 3 lines. */
  27.         overflow: hidden;
  28.       }
  30.       .line-clamp--four {
  31.         -webkit-line-clamp: 4; /* Trimmed the second tile to four lines. */
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     文本保留 3 行
  37.     <div class="tile">
  38.       <p class="line-clamp">
  39.         可以使用 <code>-webkit-line-clamp</code> 属性截断文本到特定行数。屏幕 3
  40.         行显示不完全，将显示省略号。喜欢的同学一定要点赞、转发、收藏啊 !
  41.         喜欢的同学一定要点赞、转发、收藏啊 !
  42.       </p>
  43.     </div>
  45.     文本保留 4 行
  46.     <div class="tile">
  47.       <p class="line-clamp line-clamp--four">
  48.         可以使用 <code>-webkit-line-clamp</code> 属性截断文本到特定行数。屏幕 4
  49.         行显示不完全，将显示省略号。喜欢的同学一定要点赞、转发、收藏啊 !
  50.         喜欢的同学一定要点赞、转发、收藏啊 !
  51.       </p>
  52.     </div>
  54.     文本全部显示
  55.     <div class="tile">
  56.       <p>
  57.         可以使用 <code>-webkit-line-clamp</code> 属性截断文本到特定行数。屏幕 4
  58.         行显示不完全，将显示省略号。喜欢的同学一定要点赞、转发、收藏啊 !
  59.         喜欢的同学一定要点赞、转发、收藏啊 !
  60.       </p>
  61.     </div>
  62.   </body>
  63. </html>

::selection CSS 伪元素

::selection CSS 伪元素可以自定义控制鼠标选中部分内容的样式。
CSS - 图6

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       .wrapper {
  10.         height: 100vh;
  11.         display: flex;
  12.         align-items: center;
  13.         justify-content: center;
  14.       }
  16.       p {
  17.         font-size: 2rem;
  18.         font-family: sans-serif;
  19.       }
  21.       .custom-highlighting::selection {
  22.         background-color: #8e44ad;
  23.         color: #fff;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="wrapper">
  29.       <div>
  30.         <p>这是默认高亮显示。鼠标选中试试看。</p>
  31.         <p class="custom-highlighting">这是自定义高亮显示。鼠标选中试试看。</p>
  32.       </div>
  33.     </div>
  34.   </body>
  35. </html>

万物皆可伸缩

你知道任何元素调整大小，都可以像 <textarea> 一样吗？
CSS - 图7

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Document</title>
  6.     <style>
  7.       div {
  8.         border: 2px solid;
  9.         padding: 10px 40px;
  10.         width: 300px;
  11.         /* 核心代码 */
  12.         resize: both;
  13.         overflow: auto;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>
  19.     <div>调整属性指定一个元素是否由用户可调整大小的。</div>
  20.   </body>
  21. </html>

CSS 模态框

你可以使用 :target 伪类来创建零 JavaScript 的模态。
CSS - 图8

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Document</title>
  6.     <style>
  7.       .wrapper {
  8.         height: 100vh;
  9.         /* This part is important for centering the content */
  10.         display: flex;
  11.         align-items: center;
  12.         justify-content: center;
  13.         /* End center */
  14.         background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);
  15.         background: linear-gradient(to right, #834d9b, #d04ed6);
  16.       }
  18.       .wrapper a {
  19.         display: inline-block;
  20.         text-decoration: none;
  21.         padding: 15px;
  22.         background-color: #fff;
  23.         border-radius: 3px;
  24.         text-transform: uppercase;
  25.         color: #585858;
  26.         font-family: "Roboto", sans-serif;
  27.       }
  29.       .modal {
  30.         visibility: hidden;
  31.         opacity: 0;
  32.         position: absolute;
  33.         top: 0;
  34.         right: 0;
  35.         bottom: 0;
  36.         left: 0;
  37.         display: flex;
  38.         align-items: center;
  39.         justify-content: center;
  40.         background: rgba(77, 77, 77, 0.7);
  41.         transition: all 0.4s;
  42.       }
  44.       .modal:target {
  45.         visibility: visible;
  46.         opacity: 1;
  47.       }
  49.       .modal__content {
  50.         border-radius: 4px;
  51.         position: relative;
  52.         width: 500px;
  53.         max-width: 90%;
  54.         background: #fff;
  55.         padding: 1em 2em;
  56.       }
  58.       .modal__footer {
  59.         text-align: right;
  60.       }
  61.       .modal__close {
  62.         position: absolute;
  63.         top: 10px;
  64.         right: 10px;
  65.         color: #585858;
  66.         text-decoration: none;
  67.       }
  68.     </style>
  69.   </head>
  70.   <body>
  71.     <div class="wrapper">
  72.       <a href="#demo-modal">打开模态框</a>
  73.     </div>
  75.     <div id="demo-modal" class="modal">
  76.       <div class="modal__content">
  77.         <h1>CSS 实现模态框</h1>
  78.         <p>
  79.           您可以使用 :target 伪类创建零 JavaScript 的模态框。赶紧一起玩一玩啊！
  80.         </p>
  81.         <div class="modal__footer">
  82.           Made with <i class="fa fa-heart"></i>, by
  83.           <a href="https://juejin.cn/user/958429872534056/posts" target="_blank"
  84.             >@gyx_这个杀手不太冷静</a
  85.           >
  86.         </div>
  87.         <a href="#" class="modal__close">&times;</a>
  88.       </div>
  89.     </div>
  90.   </body>
  91. </html>

您可以创建自定义样式滚动条

CSS - 图9

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Document</title>
  6.     <style>
  7.       .wrapper {
  8.         height: 100vh;
  9.         /*This part is important for centering*/
  10.         display: flex;
  11.         align-items: center;
  12.         justify-content: center;
  13.       }
  15.       .mr-1 {
  16.         margin-right: 1em;
  17.       }
  19.       .tile {
  20.         overflow: auto;
  21.         display: inline-block;
  22.         background-color: #ccc;
  23.         height: 200px;
  24.         width: 180px;
  25.       }
  27.       .tile--custom-scrollbar::-webkit-scrollbar {
  28.         width: 12px;
  29.         background-color: #eff1f5;
  30.       }
  32.       .tile--custom-scrollbar::-webkit-scrollbar-track {
  33.         border-radius: 3px;
  34.         background-color: transparent;
  35.       }
  37.       .tile--custom-scrollbar::-webkit-scrollbar-thumb {
  38.         border-radius: 5px;
  39.         background-color: #515769;
  40.         border: 2px solid #eff1f5;
  41.       }
  43.       .tile-content {
  44.         padding: 20px;
  45.         height: 500px;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <div class="wrapper">
  51.       <div>
  52.         <div class="tile mr-1">
  53.           <div class="tile-content">默认滚动条</div>
  54.         </div>
  55.         <div class="tile tile--custom-scrollbar">
  56.           <div class="tile-content">自定义滚动条</div>
  57.         </div>
  58.       </div>
  59.     </div>
  60.   </body>
  61. </html>

position: sticky 吸顶效果

您可以使用 2 行 CSS 实现导航栏吸顶效果。
CSS - 图10

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Document</title>
  6.     <style>
  7.       .section {
  8.         font-size: 1.4em;
  9.         letter-spacing: 0.05em;
  10.         line-height: 1.5em;
  11.       }
  13.       .section h2,
  14.       .section h3 {
  15.         text-align: center;
  16.         margin: 0;
  17.         font-weight: normal;
  18.       }
  20.       .section__header {
  21.         position: sticky;
  22.         top: 0;
  23.         padding: 1em;
  24.         color: #a99160;
  25.         background: #171717;
  26.       }
  28.       .section__content {
  29.         padding: 1em;
  30.         display: flex;
  31.         justify-content: center;
  32.       }
  34.       .section__content > div {
  35.         max-width: 992px;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <section class="section">
  41.       <div class="section__header">
  42.         <h2>第 1 章导航条</h2>
  43.       </div>
  44.       <div class="section__content">
  45.         <div>
  46.           <h3>第 1 章</h3>
  47.           <p>
  48.             元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest
  49.             scrolling ancestor）和 containing block (最近块级祖先 nearest
  50.             block-level ancestor)，包括 table-related 元素，基于 top, right,
  51.             bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。
  52.           </p>
  53.           <p>
  54.             该值总是创建一个新的层叠上下文（stacking context）。注意，一个
  55.             sticky
  56.             元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的
  57.             overflow 是 hidden, scroll, auto, 或 overlay
  58.             时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见
  59.             Github issue on W3C CSSWG）。
  60.           </p>
  61.         </div>
  62.       </div>
  63.     </section>
  64.     <section class="section">
  65.       <div class="section__header">
  66.         <h2>第 2 章导航条</h2>
  67.       </div>
  68.       <div class="section__content">
  69.         <div>
  70.           <h3>第 2 章</h3>
  71.           <p>
  72.             元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest
  73.             scrolling ancestor）和 containing block (最近块级祖先 nearest
  74.             block-level ancestor)，包括 table-related 元素，基于 top, right,
  75.             bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。
  76.           </p>
  77.           <p>
  78.             该值总是创建一个新的层叠上下文（stacking context）。注意，一个
  79.             sticky
  80.             元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的
  81.             overflow 是 hidden, scroll, auto, 或 overlay
  82.             时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见
  83.             Github issue on W3C CSSWG）。
  84.           </p>
  85.         </div>
  86.       </div>
  87.     </section>
  88.     <section class="section">
  89.       <div class="section__header">
  90.         <h2>第 3 章导航条</h2>
  91.       </div>
  92.       <div class="section__content">
  93.         <div>
  94.           <h3>第 3 章</h3>
  95.           <p>
  96.             元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest
  97.             scrolling ancestor）和 containing block (最近块级祖先 nearest
  98.             block-level ancestor)，包括 table-related 元素，基于 top, right,
  99.             bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。
  100.           </p>
  101.           <p>
  102.             该值总是创建一个新的层叠上下文（stacking context）。注意，一个
  103.             sticky
  104.             元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的
  105.             overflow 是 hidden, scroll, auto, 或 overlay
  106.             时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见
  107.             Github issue on W3C CSSWG）。
  108.           </p>
  109.         </div>
  110.       </div>
  111.     </section>
  112.     <section class="section">
  113.       <div class="section__header">
  114.         <h2>第 4 章导航条</h2>
  115.       </div>
  116.       <div class="section__content">
  117.         <div>
  118.           <h3>第 4 章</h3>
  119.           <p>
  120.             元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest
  121.             scrolling ancestor）和 containing block (最近块级祖先 nearest
  122.             block-level ancestor)，包括 table-related 元素，基于 top, right,
  123.             bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。
  124.           </p>
  125.           <p>
  126.             该值总是创建一个新的层叠上下文（stacking context）。注意，一个
  127.             sticky
  128.             元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的
  129.             overflow 是 hidden, scroll, auto, 或 overlay
  130.             时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见
  131.             Github issue on W3C CSSWG）。
  132.           </p>
  133.         </div>
  134.       </div>
  135.     </section>
  136.   </body>
  137. </html>

CSS 滚动捕捉优化滚动体验

您可以控制 scroll-snap-type 值来获取良好的滚动体验：

这个可能要亲自体验，滚动鼠标，才可以感受到效果！

CSS - 图11

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Document</title>
  6.     <style>
  7.       body {
  8.         margin: 0;
  9.         padding: 0;
  10.       }
  12.       .wrapper {
  13.         height: 100vh;
  14.         overflow: auto;
  15.         scroll-snap-type: y mandatory;
  16.       }
  18.       .section {
  19.         scroll-snap-align: center;
  20.         height: 100vh;
  21.         display: flex;
  22.         justify-content: center;
  23.         align-items: center;
  24.         background-color: #de5448;
  25.         color: #fff;
  26.         font-size: 3em;
  27.       }
  29.       .bg-blue {
  30.         background: #4267b2;
  31.       }
  33.       .bg-green {
  34.         background: #4caf50;
  35.       }
  36.     </style>
  37.   </head>
  38.   <body>
  39.     <div class="wrapper">
  40.       <div class="section">Content 1</div>
  41.       <div class="section bg-blue">Content 2</div>
  42.       <div class="section bg-green">Content 3</div>
  43.       <div class="section">Content 4</div>
  44.       <div class="section bg-blue">Content 5</div>
  45.     </div>
  46.   </body>
  47. </html>

CSS 动态文字提示

使用 attr() CSS 函数创建动态的仅用 CSS 实现文字提示。
CSS - 图12

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Document</title>
  6.     <style>
  7.       body {
  8.         padding: 20px;
  9.       }
  11.       .tooltip {
  12.         position: relative;
  13.         border-bottom: 1px dotted black;
  14.       }
  16.       /* Tooltip box */
  17.       .tooltip:before {
  18.         content: attr(data-tooltip);
  19.         position: absolute;
  20.         width: 100px;
  21.         background-color: #062b45;
  22.         color: #fff;
  23.         text-align: center;
  24.         padding: 10px;
  25.         line-height: 1.2;
  26.         border-radius: 6px;
  27.         z-index: 1;
  28.         opacity: 0;
  29.         transition: opacity 0.6s;
  30.         bottom: 125%;
  31.         left: 50%;
  32.         margin-left: -60px;
  33.         font-size: 0.75em;
  34.         visibility: hidden;
  35.       }
  37.       /* Tooltip arrow */
  38.       .tooltip:after {
  39.         content: "";
  40.         position: absolute;
  41.         bottom: 75%;
  42.         left: 50%;
  43.         margin-left: -5px;
  44.         border-width: 5px;
  45.         border-style: solid;
  46.         opacity: 0;
  47.         transition: opacity 0.6s;
  48.         border-color: #062b45 transparent transparent transparent;
  49.         visibility: hidden;
  50.       }
  52.       .tooltip:hover:before,
  53.       .tooltip:hover:after {
  54.         opacity: 1;
  55.         visibility: visible;
  56.       }
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <h1>HTML/CSS 文字提示</h1>
  61.     <p>
  62.       鼠标移入<span class="tooltip" data-tooltip="这是一个文字提示">这里</span
  63.       >显示文字提示。
  64.     </p>
  65.     <p>
  66.       你也可以移入<span class="tooltip" data-tooltip="这是另一个文字提示"
  67.         >这里</span
  68.       >显示另一个文字提示。
  69.     </p>
  70.   </body>
  71. </html>

输入框光标颜色

您可以更改文本输入框光标的颜色。
CSS - 图13

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Document</title>
  6.     <style>
  7.       input {
  8.         caret-color: red;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <input type="text" />
  14.   </body>
  15. </html>

::in-range 和 ::out-of-range 伪类

使用 ::in-range 和 ::out-of-range 伪类来设置当前值超出 min 和 max 属性指定的范围限制的输入的样式。
CSS - 图14

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Document</title>
  6.     <style>
  7.       input:in-range {
  8.         background-color: rgba(0, 255, 0, 0.25);
  9.         border: 1px solid green;
  10.       }
  12.       input:out-of-range {
  13.         background-color: rgba(255, 0, 0, 0.25);
  14.         border: 1px solid red;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <form>
  20.       <label for="one">输入 1 - 10 之间的一个数值</label>
  21.       <input type="number" id="one" name="one" min="1" max="10" />
  22.       <br />
  23.       <label for="two">输入 1 - 10 之间的一个数值</label>
  24.       <input type="number" id="two" name="two" min="1" max="10" />
  25.     </form>
  26.   </body>
  27. </html>

花里胡哨的文字

使用 background-clip 属性创建漂亮的标题。
CSS - 图15

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Document</title>
  6.     <style>
  7.       h1 {
  8.         background: blue url("https://picsum.photos/id/1015/200/300");
  9.         background-clip: text;
  10.         -webkit-background-clip: text;
  11.         color: transparent;
  12.         margin-top: 20px;
  13.         font-size: 120px;
  14.       }
  16.       @media (max-width: 600px) {
  17.         h1 {
  18.           font-size: 45px;
  19.         }
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <h1>揭秘 CSS</h1>
  25.   </body>
  26. </html>

保持宽高比

在响应式网页设计中，保持一致的宽高比，即所谓的长宽比
使用padding-top
解决方案需要一个父容器和一个绝对放置的子容器。然后，可以将宽高比计算为百分比以设置为 padding-top。例如：
1:1长宽比 = 1/1 = 1 = padding-top: 100%
4:3的长宽比 = 3/4 = 0.75 = padding-top: 75%
3:2的长宽比 = 2 / 3 = 0.66666 = padding-top: 66.67%
16:9的长宽比 = 9 / 16 = 0.5625 = padding-top: 56.25%

  1. <div class="container">
  2.   <img class="media" src="..." alt="...">
  3. </div>
  1. .container {
  2.   position: relative;
  3.   width: 100%;
  4.   padding-top: 56.25%; /* 16:9 宽高比 */
  5. }
  7. .media {
  8.   position: absolute;
  9.   top: 0;
  10. }

aspect-ratio CSS属性
aspect-ratio: 16 / 9 代替：padding-top: 56.25%，将 aspect-ratio 设置为指定的 width / height比例
使用padding-top

  1. .container {
  2.   width: 100%;
  3.   padding-top: 56.25%;
  4. }

使用aspect-ratio

  1. .container {
  2.   width: 100%;
  3.   aspect-ratio: 16 / 9;
  4. }

文本溢出

单行

  1. {
  2.     overflow: hidden;
  3.   white-space: nowrap;
  4.   text-overflow: ellipsis;
  5. }

多行

只有-webkit内核才有作用

  1. {
  2.     display: -webkit-box;
  3.   overflow: hidden;
  4.   text-overflow: ellipsis;
  5.   -webkit-box-orient: vertical;
  6.   -webkit-line-clamp: 2;
  7. }

居中对齐

  1. {
  2.   position: absolute;
  3.   top: 50%;
  4.   left: 50%;
  5.   transform: translate(-50%, -50%);
  6. }

隐藏滚动条

  1. ::-webkit-scrollbar {
  2.   display: none;
  3. }

video/audio隐藏控件 — chrome 58+

  1. // 全屏
  2. video::-webkit-media-controls-fullscreen-button {
  3.   display: none;
  4. }

禁止用户选择页面中的文字或者图片

  1. div {
  2.   user-select: none;
  3. }

清除输入框内阴影- iOS

  1. div {
  2.   -webkit-appearance: none;
  3. }

禁止保存或拷贝图像

  1. img {
  2.   -webkit-touch-callout: none;
  3. }

placeholder字体颜色

  1. input::-webkit-input-placeholder,
  2. textarea::-webkit-input-placeholder {
  3.   color: #c7c7c7;
  4. }
  5. input:-moz-placeholder,
  6. textarea:-moz-placeholder {
  7.   color: #c7c7c7;
  8. }
  9. input:-ms-input-placeholder,
  10. textarea:-ms-input-placeholder {
  11.   color: #c7c7c7;
  12. }

字体禁止缩放

  1. body {
  2.   text-size-adjust: 100% !important;
  3. }

旋转动画

  1. .demo { animation: rotateTurn 5s infinite linear; }
  3. @keyframes rotateTurn {
  4.   0% {
  5.     transform: translate3d(0, 0, 0) rotate(0);
  6.   }
  7.   to {
  8.     // 1turn从左往右
  9.     // -1turn从右往左
  10.     transform: translate3d(0, 0, 0) rotate(1turn);
  11.   }
  12. }

过渡

  1.     position: relative;
  2.     touch-action: none;
  3.     transform: translate3d(0px, -3810px, 0px);
  4.     transition: all 700ms ease;

position: fixed依据父元素定位

  1.     transform: scale(1);