阅读 46

CSS 知识总结

1. 在哪里搜索练习素:PSD web
2. margin合并

  • 哪些情况会合并:父子margin合并、兄弟margin合并
  • 如何阻止合并:padding、border挡住;overflow:hidden;display:翻了下

3. 基本单位

  • 长度:px、em、百分数、整数、rem、vm和vh
  • 颜色:十六进制(eg. #FF6600)、RBGA颜色(eg. rgb(0,0,0)或rgba(0,0,0,1))、hsl颜色(eg. hsl(360,100%,100%))

4. css布局

  • float布局
  • flex布局
    (1) 记住这些代码:
    display: flex;
    flex-direction: row/column;
    flex-wrap: wrap;
    justify-content: center/space-between;
    align-items: center;
    复制代码

(2) 注意事项:
除非特殊说明,否则不要把width和height写死,使用min-width、max—width、min-height、max-height;
flex可以基本满足需求;
flex和margin-xxx:auto 配合有意外的效果

  • grid布局
containerP{
    grid-template-column: 40px 50px auto 50px 40px;
    grid-template-row: 25% 100px auto;
}
复制代码

grid-template-area很好用,尤其适合不规则布局。

5. CSS定位

  • background < border < 块级元素 < 浮动元素 < 内联元素 < 定位元素
  • position:static、relative、absolute、fixed、sticky
    (1)position:static;默认值
    (2) position:relative
    给absolute元素做爸爸,配合z-index;
    (3)position: absolute
    脱离原来位置,另起一层,例如对话框的关闭按钮,配合z-index
    (4)position: fix
    相对于视口定位

6. 层叠上下文

  • 每个层叠上下文都是一个新的小世界(作用域),这个小世界里面的z-index跟外界无关,处在同一个世界的z-index才能比较。
  • 那些不正交的属性可以创建层叠上下文:
    层叠上下文
    需要记忆的有:z-index、flex、opacity、transform

7. CSS动画

  • 一般使用JS更新样式,例如
div.calssList.add('red')
div.remove()
复制代码
  • CSS渲染过程依次包含布局、绘制、合成,其中布局和绘制可省略
  • CSS动画优化:
    JS优化:使用requestAnimationFrame代替setTimeout或setInterval
    CSS和功能优化: 使用will-change或translate
  • transform:
    四个常用功能:位移:translate、缩放:scale、旋转:rotate、倾斜:skew
    经验:一般都需要配合transition过度;inline元素不支持transform,需要先变成block。
    绝对定位元素居中常用代码:
left50%top50%transform:translate(-50%,-50%复制代码
  • transition:过渡帧
    语法:transition:属性名、时长、过渡方式、延迟
    transition:left 200ms linear
    可以用逗号分隔两个不同属性eg. transition:left 200ms, top 400ms
    可以用all代表所有属性,eg.transition:all 200ms
    过渡方式有linear、ease、ease-in、ease-out、ease-in-out、cubic-bazier、step-start、step-end、steps
    注意事项display:none => block没法过渡,一般改成visibility:hidden => visible
  • @keyframe语法
    (1)from to,例如:
@keyframes slidein{
    from{
        transform:translateX(0%);
    }
    to{
        transform: translateX(100%)
    }
}
复制代码

(2)百分数,例如:

@keyframes identifier{
    0% { top0; left: 0;}
    30% { top: 50px;}
    68%, 72% { left:50px;}
    100% { top:100px;left:100%;}
}
复制代码
  • animation
    缩写语法:
    animation: 时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
    (1)时长:1s或1000ms
    (2) 过渡方式:跟transition取值一样,如linear
    (3) 次数:3或者2.4或者infinite
    (4) 方向:reverse|alternate|alternate-reverse
    (5) 填充方式:none|forwards|backwards|both
    (6) 是否暂停:paused|running
    以上所有属性都有单独属性
文章分类
前端
文章标签