阅读 119

CSS 知识总结

注释:/* */

CSS reset (去除默认样式)

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

CSS排错

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

草图工具

推荐网站

  1. MDN
  2. 张鑫旭的博客

文档流

每个元素都有一个默认类型,但是都可以通过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')
}

复制代码