理解CSS | 青训营笔记

_Kevin_
69 阅读3分钟

基础知识

Casading规则

CSS 规则可能产生冲突，层叠概念用于解决冲突。它涉及三个优先规则：样式表来源、选择器特异性和源码顺序

  • 优先级程度（递减）

    • 样式表来源 -> 选择器优先级 -> 源码顺序

  • 关于样式表来源的重要排序（递减）

    1. 用户代理样式表中的!important
    2. 用户样式表中的! important
    3. 作者样式表中的! important
    4. 作者样式表(developer写的)
    5. 用户样式表（很少有）
    6. 用户代理样式(浏览器默认样式)

  • 关于选择器优先级 image.png

  • 关于源码顺序的优先级

    • 对于！import的样式，根据@import的顺序
    • 对于link和style标签的样式，根据在document中的顺序决定

  • 建议（虽然是建议，但你最好这样做，利人利己）

    • 选择器尽量少用id
    • 尽量不要用!important
    • 自己的样式加载在引用库样式的后面

继承

  • 大部分具有继承特性的属性跟文本有关
  • 可以使用inherit关键字显式指定一个属性值从其父元素继承

值和单位

图片描述的比较好，这里贴图片 image.png

盒模型

使用盒模型特性实现的展现形式
  • 三角形 image.png
<div class="triangle-bottom"></div>

.triangle-bottom {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}
  • 固定比例矩形

image.png

<div class="ratio-box"></div>

.ratio-box {
    background-color: cadetblue;
    // width是父元素宽度100%
    width: 100%;
    height: 0;
    padding: 0;
    // padding-bottom是父元素宽度75%
    padding-bottom: 75%;
}
  • 实现水平居中 image.png
<div class="wrap">
    <div class="h-center"></div>
</div>

.wrap {
    width: 100%;
    height: 80px;
    border: 1px dashed grey;
}

.h-center {
    width: 100px;
    height: 50px;
    background-color: navajowhite;
    // 左右两侧margin使用auto
    // 将水平方向剩余空间均分auto
    margin: 10px auto;
}

变形、过渡、动画

变形

  • transform变形 2D
    • 相关属性
      • transform: translate(移动)、rotate(旋转)、scale(放缩)、matrix(变形矩阵)等
      • transform-origin: right top、center等表示变形时依据的原点
  • transform变形 3D
    • 相关属性
      • transform: translate3d、rotate3d、scale3d、matrix3d等
      • transform-origin: right top、50px 30px等表示变形时依据的原点
      • transform-style: flat 或 preserve-3d 看子元素的3d表现
      • perspective: 观看点距离z=0这个平面的距离，可以在transform中用perspective()使用作为当前元素也可以直接使用，给后代元素一个统一值
      • perspective-origin: 观看者的位置，如top、bottom等
      • backface-visibility: 元素正面只有朝向观察者的时候可见

过渡

通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态

动画

  • @keyframes 关键帧 用来定义动画过程中出现的关键样式 image.png
  • animation-* 相关属性 用来为元素添加动画
    • animation-name: 定义好的关键帧的名字
    • animation-duration：动画时长
    • animation-timing-function：动画节奏
    • 更多的可以到文档里去看

个人总结

今天跟着青训营老师算是又把css系统（大致）的学习了一遍，内容很多，覆盖很广，感谢青训营老师，现在发现的不足总结了如下几点

  1. 缺乏实践经验：学的很多，但对应的实践很少
  2. 知识理解不够深入：尽管今天有已经学过的很多东西，但是在听老师讲课的时候依然发现有很多新知识进入到了脑子里
  3. 不熟悉一些高级特性和技巧：掌握了低级开发，但是没学会很多高级的技巧，这点是非常大的不足
  4. 缺乏综合性项目经验：在实际工作中，这些知识点只有一部分是常用的（对于我的工作），还有很多内容是用不到的，时间久了就生疏了，所以缺乏综合性的项目实践

总之，在青训营学到的东西还是比较多且实用的

avatar
文章
阅读
粉丝