CSS 知识总结

注释：/* */

CSS reset （去除默认样式）

*   {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
 }
ul,ol {
    list-style:none;
}
img {
   max-width: 100%;
}
复制代码

CSS排错

当border占用空间时，可以改为outline

草图工具

文档流

每个元素都有一个默认类型，但是都可以通过display:inline/block/inline-block改变

	代表	特性
内联元素（inline）	span	宽度：有内部内联元素总和决定的,不能自定义实际高度：由line-height决定与height无关可视化高度：可以通过增加padding来改变
块级元素（block）	block	宽度：默认auto,不是100%，可自定义高度：由内部文档流元素决定，可以设height
内联-块级元素		宽度：有内部内联元素总和决定的,可自定义高度：和block类似

overflow

盒模型

box-sizing:content-box box-sizing:border-box

CSS布局

float布局

总结：当元素为“内联-块级”元素时，半脱离文档流，仍占据原来位置

步骤：

子元素上加float:left和right
在父元素上加.clearfix,父元素一般不设height

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/`
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;将元素隐藏，但是在网页中该占的位置还是占着。
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
复制代码

flow布局

.container属性(容器)

主轴流动方向

.container {
    flex-direction:row|row-reverse|column|column-reverse
}
复制代码

是否折行（默认不折行）

.container {
    flex-wrap:nowrap|wrap|wrap-reverse
}
复制代码

主轴对齐方式

次轴对齐方式

默认：stretch

多行对齐方式

.item属性

order

用于控制弹性元素的位置，默认为 order:0 数值越小越在前面，可以负数或整数。

flex-grow

分配多余的空间
```
flex-grow:1
复制代码
```

一般写导航栏的时候

.loge {
    flex:0;/*0可以省略*/
}
.nav {
    flex:1;
}
.touxiang {
    flex:0;
}
复制代码

flex-shrink

控制当宽度不够时，按分配比例缩小

align-slef

grid布局

.container属性

成为container

.container{
    diplay:grid|inline-grid;
}
复制代码

行和列

CSS定位

div分层

属性

position:relative

总结：不脱离文档流，还占据原来的位置（移动的时候）

position:absolute

鼠标提示

总结：1.脱离文档流 2.相对于祖先元素中第一个position不是static的元素定位

position:fixed

相对于视口定位

总结：不要和transform一起用

position：static

粘滞点位

层叠上下文

CSS渲染动画

浏览器渲染过程

transform（变形）

translate（偏移）

#demo:hover {
    transform: translateX(50px);
    transform: translateY(50px);
    transform: translate(50px,50px);/*缩写*/
}


transform:translateZ(50px);
/*Z轴在三维上，需要在父级上加一个视点*/
.container {
    perspective:1000px;/*这个视点在容器中心往后1000px*/
}
复制代码

利于translate实现垂直居中

#demo {
    left:50%;
    top:50%;
    transform:translate ( -50%, -50%);
}
复制代码

scale(缩放)

rotate（旋转）

skew（倾斜）

添加动画

transition（过渡）

animation

1.声明关键字
   1. @keyframes xxx {
        0% {
            transform: none;
        }
        66.66% {
            transform: translateX(200px);
        }
        100% {
           transform: translateX(200px);
           transform: translateY(100px);
        }
    }
  2.@keyframes xxx {
        from {
            transform: none;
        }
        to {
            transform: translateX(100%);
        }
    }

2.添加动画
#demo.start {
  animation: xxx 1.5s forwards(停在最后一帧);    
}

3.加js
button.onclick = ()=>{
    demo.classList.add('start')
}

复制代码