1. 主配置:
    body{
     margin : 0;
    }
  2. 动画:
    1. 定义:
      @keyframes animation-name{
       from{
           ...
       }
       to{
           ...
       }
      }
      @-moz-keyframes animation-name{
       from{
           ...
       }
       to{
           ...
       }
      }
      @-webkit-keyframes animation-name{
       from{
           ...
       }
       to{
           ...
       }
      }
      @-o-keyframes animation-name{
       from{
           ...
       }
       to{
           ...
       }
      }
    2. 使用:
      animation:animation-name 1s ease-in-out infinite;
      -webkit-animation:animation-name 1s ease-in-out infinite;
  3. 渐变背景:
    1. 线性渐变:
      background:linear-gradient(to right,from-color,to-color);
    2. 径向渐变:
      background:radial-gradient(from-color,to-color);
  4. 渐变颜色:
    1. 线性渐变:
      background:linear-gradient(to right,from-color,to-color);
      -webkit-background-clip: text;
      color: transparent;
    2. 径向渐变:
      background:radial-gradient(from-color,to-color);
      -webkit-background-clip: text;
      color: transparent;
  5. 自适应图片:
    1. 作为背景图片:
      background-image: url("path/to/image");
      background-repeat: no-repeat;
      background-position:center;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      -webkit-background-origin:content-box;
      background-origin:content-box;
    2. 作为 img:
      img{
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      }
      或
      img{
      width: 500px;
      height: 500px;
      object-fit: contain | cover;
      }
  6. 自动计算单位:
    calc();
  7. 圆角边框:
    border-radius: 50px;
    border: 1px solid red;
  8. 块居中:
    display:block;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
  9. 鼠标悬停形状:
    1. 手形:
      cursor:pointer;
    2. 禁止:
      cursor:not-allowed;
  10. 清除浮动:
    the-target:after{
    content: '';
    display: block;
    clear: both;
    }
    overflow: hidden;
  11. 自定义字体:
    1. 定义:
      @font-face {
      font-family: 'font-name';
      src:
       url('path/to/xx.eot?#iefix') format('embedded-opentype'),
       url('path/to/xx.woff2') format('woff2'),
       url('path/to/xx.woff') format('woff'),
       url('path/to/xx.ttf') format('truetype');
      }
    2. 使用:
      font-family: 'font-name';
  12. 文本相关:
    1. 文本两边对齐:
      text-align:justify;
      text-justify:distribute-all-lines;
      text-align-last:justify;
      -moz-text-align-last:justify;
      -webkit-text-align-last:justify;
    2. 字间距:
      letter-spacing: 5px;
    3. 单词间距:
      word-spacing: 5px;
    4. 超出部分隐藏:
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    5. 大小写:
      // 1. 大写
      text-transform:uppercase;
      // 2. 小写
      text-transform:lowercase;
      // 3. 首字母大写
      text-transform:capitalize;
    6. 打断文本:
      1. 打断:
        word-break: break-all;
        white-space: pre-wrap;
      2. 不打断:
        word-break: keep-all;
    7. 文本修饰:
      // 1. 无修饰
      text-decoration: none;
      // 2. 上划线
      text-decoration: overline;
      // 3. 删除线
      text-decoration: line-through;
      // 4. 下划线
      text-decoration: underline;
    8. 段落缩进:
      text-indent: 30px;
  13. 百分比宽度:
    float:left;
    display:block;
    width: 33%;
    margin-left:calc(100% / 3);
  14. 分隔线:
    margin: 1px 0;
    border: 0;
    border-top: 1px solid red;
  15. 超链接:
    a:link {
    color: red;
    text-decoration:none;
    }
    a:hover {
    color: red;
    text-decoration:none;
    cursor:pointer;
    }
    a:active {
    color: red;
    text-decoration:none;
    }
    a:visited {
    color: red;
    text-decoration:none;
    }
  16. 列表样式:
    list-style: none;
  17. 表格样式:
    border-collapse: collapse;
  18. 文本框-textarea样式:
    # 不允许拉伸
    resize: none;
    # 不显示边框
    outline: none;
    # 聚焦样式:
    textarea:focus{
    border: 1px solid red;
    }
  19. 自适应屏幕:
    @media (max-width: 200px){
    ...
    }
    @media (min-width: 200px) and (max-width: 300px){
    ...
    }
  20. 透明度:
    opacity: (0-1);
  21. placeholder颜色:
    input-name::-webkit-input-placeholder {
    color: red;
    }
    input-name:-moz-placeholder {
    color: red;
    }
    input-name::-moz-placeholder {
    color: red;
    }
    input-name:-ms-input-placeholder {
    color: red;
    }
  22. 相对定位(父相子绝):
    1. 外层(父):
      position: relative;
    2. 内层(子):
      position: absolute;
      left: 10px;
      top; 10px;
  23. 打印属性:
    1. 对打印机不可见:
      @media print{
      item-name{
       display: none;
      }
      }
    2. 自动插入换行符:
      page-break-after:always;
  24. 阴影:
    box-shadow: 0 0 3px 3px black;
  25. 自适应正方形:
    .square{
    width: 50px;
    overflow: hidden;
    }
    .square:after{
    content: '';
    display: block;
    margin-top: 100%;
    }
  26. 扭曲变形:
    1. 旋转:
      transform: rotate(rotate-unit);
      -ms-transform: rotate(rotate-unit);
      -webkit-transform: rotate(rotate-unit);
      -o-transform: rotate(rotate-unit);
      -moz-transform: rotate(rotate-unit);
    2. 偏移:
      transform: translate(translate-right,translate-bottom);
      -ms-transform: translate(translate-right,translate-bottom);
      -webkit-transform: translate(translate-right,translate-bottom);
      -o-transform: translate(translate-right,translate-bottom);
      -moz-transform: translate(translate-right,translate-bottom);
    3. 缩放:
      transform: scale(scale-right,scale-bottom);
      -ms-transform: scale(scale-right,scale-bottom);
      -webkit-transform: scale(scale-right,scale-bottom);
      -o-transform: scale(scale-right,scale-bottom);
      -moz-transform: scale(scale-right,scale-bottom);
    4. 翻转:
      transform: skew(-skew-right,skew-bottom);
      -ms-transform: skew(-skew-right,skew-bottom);
      -webkit-transform: skew(-skew-right,skew-bottom);
      -o-transform: skew(-skew-right,skew-bottom);
      -moz-transform: skew(-skew-right,skew-bottom);
  27. 过渡:
    transition:all 1s;
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
    -o-transition:all 1s;
  28. 滑条样式:
    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
    width:10px;
    height: 10px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
    background: blue;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
    background:yellow;
    border-radius: 2px;
    }
  29. flex 布局:
    1. 父容器:
      1-1. 开启布局:
      display: flex;
      1-2. flex-direction 属性:
      flex-direction: row | row-reverse | column | column-reverse;

      1-3. flex-wrap 属性:
      flex-wrap: nowrap | wrap | wrap-reverse;

      1-4. justify-content 属性:
      justify-content: flex-start | flex-end | center | space-between | space-around;

      1-5. align-items 属性:
      align-items: flex-start | flex-end | center | baseline | stretch;

      1-6. align-content 属性:
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    2. 子元素:
      2-1. order 属性:
      order: 1 | 2 | 3;

      2-2. flex-grow 属性(放大比例):
      flex-grow: 1 | 2 | 3;

      2-3. flex-shrink 属性(缩小比例):
      flex-shrink: 1 | 2 | 3;

      2-4. flex-basis 属性(设置固定尺寸):
      flex-basis: 10px | auto;
      2-5. flex 属性:
      flex: none | flex-grow flex-shrink flex-basis
      2-6. align-self 属性:
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
文档更新时间: 2020-11-22 20:37   作者:lee