Css小知识

CSS： css reset

*{box-sizing: border-box;}
*::before, *:after{box-sizing: border-box;}
*{margin: 0; padding: 0;}
ul,ol{ list-style: none;}
a{color: inherit; text-decoration: none;}
img{max- 100%;max-height: 100%;}

css 块元素命名要注意避坑

text-transform: uppercase  //转换大写


    margin-left: auto;
    margin-right: auto;    //如果一个元素他的最大宽度固定或宽度固定  用这两行代码来居中

display：inline-flex和display：flex之间有什么区别

• flex并且inline-flex都将flex布局应用于容器的子项。容器的display:flex行为类似于块级元素本身，同时display:inline-flex使容器的行为类似于内联元素。
• 用了inline-flex遇到对不齐的情况要加vertical-align: middle（跟外部的东西对齐）

justify-content: center

• justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。（左右居中）

align-items: center

• align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。（水平居中）

线性旋转360

• 声明动画

@keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

• 无限线性的旋转

class = "loading"

.loading{
            animation: spin 1s infinite linear;
        }

空隙

字跟字之间的空隙用em

隐藏滚动条

::-webkit-scrollbar{
        display: none; 

新

前面三个都是display:flex 默认从左开始排     
设置 ： margin-left:auto 就会去到最右面