css布局

1.float布局

  • 子元素上加 float:left和width
  • 在父元素上加.clearfix
    .clearfix::after{
        content:'';
        display:block;
        clear:both;
}

注意

  • float要自己计算宽度，不灵活
  • float在IE6/7有双倍margin bug，加display: inline-block;
  • 用于IE足矣
  • float平面布局，要用-margin
  • 居中： 
        margin-left:auto;
    margin-right:auto;

2.flex布局

  1. 让一个元素变成flex容器 
        .comtainer{
        display: flex;
    }
  2. 改变流动方向 flex-direction:row / column
  3. 控制折行 flex-wrap: wrap
  4. 横轴对齐（主轴） just-content: center/space-between
  5. 纵轴对齐（次轴） align-items: center

注意

  • flex用于平局布局，也用负数margin
  • 不要写死width和height,可以用min-width/max-width/min-height/
  • flex可以满足所有需求

grid布局

    container{
        grid-template-columns: 40px 50px auto 50px 40px;
        grid-template-rows: 25% 100px auto;
    }

注意

Grid适合不规则的布局

css定位

position

  1. static 默认值，在文档流里
  2. relative相对定位，升起来，但不脱离文档流
  3. absolute 绝对定位，定位基准是祖先里的非static
  4. fixed 固定定位，定位基准是viewpoint（有诈）
  5. sticky粘滞定位 （少用）

注意

  1. 写了absolute，补一个(爸爸)relative
  2. 写了absolute和fixed，补上top和left

css动画

浏览器渲染过程

步骤

  1. 根据HTML构建HTML树（DOM）
  2. 根据css构建css树（CSSOM）
  3. 将两颗树合并成一颗渲染树（render tree）
  4. Layout布局（文档流、盒子模型、位置大小）
  5. paint绘制（边框、颜色）
  6. compose合成（根据曾姐关系展示）

transform（变形）

  1. translate 位移

    transform: translateX(50px);
transform: translate3d(x,y,z);

    translate(-50%,-50%)可以绝对定位元素居中

  2. scale 缩放 scale(numX,numY)

  3. rotate 旋转 rotate(45deg);

  4. skew 倾斜 skewX(45deg);

注意

  • 一般需要transition过渡
  • inline元素不支持transform，需要变成block

transition过渡

用于补充中间帧 transition：属性名 时长 过渡方式 延迟

animation

.demo.start{
    animation:xxx 1s
}

@keyframes xxx{
    0%{
        transform:none;
    }
    60%{
        transform:translateX(200px);
    }
    100%{
        transform:translateX(200x) translateY(100px);
    }
}