css 常见用法

主配置：

 body{
     margin : 0;
 }

动画：

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;

渐变背景：

1. 线性渐变：
   background:linear-gradient(to right,from-color,to-color);
2. 径向渐变：
   background:radial-gradient(from-color,to-color);

渐变颜色：

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;

自适应图片：

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;
    }

自动计算单位：
calc();

圆角边框：

border-radius: 50px;
border: 1px solid red;

块居中：

display:block;
text-align:center;
margin-left: auto;
margin-right: auto;

鼠标悬停形状：

1. 手形：
   cursor:pointer;
2. 禁止：
   cursor:not-allowed;

清除浮动：

the-target:after{
    content: '';
    display: block;
    clear: both;
}
the-target{
    overflow: hidden;
}

自定义字体：

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';

文本相关：

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;

百分比宽度：

float:left;
display:block;
width: calc(100% / 3);
margin-left:calc(100% / 3);

分隔线：

margin: 1px 0;
border: 0;
border-top: 1px solid red;

超链接：

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;
}

列表样式：
list-style: none;

表格样式：
border-collapse: collapse;

文本框-textarea样式：

# 不允许拉伸
resize: none;
# 不显示边框
outline: none;
# 聚焦样式：
textarea:focus{
    border: 1px solid red;
}

自适应屏幕：

@media (max-width: 200px){
    ...
}
@media (min-width: 200px) and (max-width: 300px){
    ...
}

透明度：
opacity: （0-1）;

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;
}

相对定位（父相子绝）：

1. 外层（父）：
   position: relative;
2. 内层（子）：

   position: absolute;
   left: 10px;
   top; 10px;

打印属性：

1. 对打印机不可见：

    @media print{
        item-name{
            display: none;
        }
    }

2. 自动插入换行符：
   page-break-after:always;

阴影：
box-shadow: 0 0 3px 3px black;

自适应正方形：

.square{
    width: 50px;
    overflow: hidden;
}
.square:after{
    content: '';
    display: block;
    margin-top: 100%;
}

扭曲变形：

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);

过渡：

transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;

滑条样式：

/* 设置滚动条的样式 */
#target::-webkit-scrollbar {
    width:10px;
    height: 10px;
}
/* 滚动槽 */
#target::-webkit-scrollbar-track {
    background: blue;
}
/* 滚动条滑块 */
#target::-webkit-scrollbar-thumb {
    background:yellow;
    border-radius: 2px;
}

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;