css基础文档 https://www.w3school.com.cn/css/index.asp

文字两端对齐

image.png

  1. text-align-last: justify;

滚动链接

input[type=”button”] { width: 120px; margin-left: 35px; display: block; }

  1. <a name="a2txC"></a>
  2. ### background-size
  4. ```bash
  5. background-size中，100%和cover都是用于将图片扩大或者缩放来适应整个容器
  6. background-size：100% 100%;---按容器比例撑满，图片变形；
  7. background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉

自定义滚动条样式

  1.  ::-webkit-scrollbar {
  2.    width: 8px;
  3.    background: white;
  4.  }
  6.  ::-webkit-scrollbar-corner,
  7.    /* 滚动条角落 */
  8.  ::-webkit-scrollbar-thumb,
  9.  ::-webkit-scrollbar-track {      /*滚动条的轨道*/
  10.    border-radius: 4px;
  11.  }
  12.  ::-webkit-scrollbar-corner,
  13.  ::-webkit-scrollbar-track {
  14.    /* 滚动条轨道 */
  15.    background-color: rgba(180, 160, 120, 0.1);
  16.    box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
  17.  }
  19.  ::-webkit-scrollbar-thumb {
  20.    /* 滚动条手柄 */
  21.    background-color: #00adb5;
  22.  }

单行文本多行文本超出溢出

  1. // 单行文本出现省略号
  2. width: 300px;
  3. overflow: hidden;
  4. text-overflow: ellipsis;
  5. white-space: nowrap;
  6. word-break: break-all;
  1. // 多行文本出现省略号
  2. display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
  3. -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
  4. -webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
  5. line-clamp: 3;
  6. word-break: break-all;
  7. overflow: hidden;
  8. max-width: 100%;

使用:not() 解决lists末尾元素单独样式问题

  • 在web设计中，我们通常使用：last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。

  • 比如说一个导航菜单，通过使用borders 来给每个链接Link创建分割符，然后再在加上一条规则 解除最后一个link的border。

    1. //bad
    2. .nav li {
    3.   border-right: 1px solid #666;
    4. }
    5. .nav li:last-child {
    6.   border-right: none;
    7. }

  • 这是一种很混乱的方式，它不仅强制浏览器以一种方式渲染，然后又通过特定的选择器来撤销它。这样覆盖样式是不可避免的。

  • 然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式：

    1. .nav li:not(:last-child) {
    2.   border-right: 1px solid #666;
    3. }

    CSS 内置的计数器（带计数器的自动编号）

  • 案例 https://www.w3school.com.cn/css/css_counters.asp

如需使用 CSS 计数器，我们将使用以下属性：

  • counter-reset - 创建或重置计数器
  • counter-increment - 递增计数器值
  • content - 插入生成的内容
  • counter() 或 counters() 函数 - 将计数器的值添加到元素

如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .container ,.two{
  6.   counter-reset: section;
  7. }
  8. .container li::before ,.two li::before {
  9.   counter-increment: section;
  10.   content: counter(section);
  11. }
  13. </style>
  14. </head>
  15. <body>
  16.     <ul class="container">
  17.         <li>
  18.             <ul class="two">
  19.                 <li></li>
  20.                 <li></li>
  21.                 <li></li>
  22.             </ul>
  23.         </li>
  24.         <li>
  25.             <ul class="two">
  26.                 <li></li>
  27.                 <li></li>
  28.                 <li></li>
  29.             </ul>
  30.         </li>
  31.         <li>
  32.             <ul class="two">
  33.                 <li></li>
  34.                 <li></li>
  35.                 <li></li>
  36.             </ul>
  37.         </li>
  38.     </ul>
  39. </body>
  40. </html>
  41. // 页面展示
  42. 1
  43.    1
  44.    2
  45.    3
  46. 2
  47.    1
  48.    2
  49.    3
  50. 3
  51.    1
  52.    2
  53.    3
  • content: counters(section,’-‘); //counters第二个参数
    1. .container li::before ,.two li::before {
    2. counter-increment: section;
    3. content: counters(section,'-');
    4. }
    5. // 页面展示
    6. 1
    7.  1-1
    8.  1-2
    9.  1-3
    10. 2
    11.  2-1
    12.  2-2
    13.  2-3
    14. 3
    15.  3-1
    16.  3-2
    17.  3-3