CSS基本知识

这里我们不说更基本的类似于选择器的优先级、如何改变颜色字体大小等这些问题，我们说一下在工作中常见的的且最好需要掌握的那些能力，以及我个人对这些问题的一些理解

对盒模型的理解

在 CSS 中我们广泛地使用两种"盒子": 块级盒子和内联盒子,这两种盒子会在页面流和元素之间的关系表现出不同的行为

块级盒子

盒子会在内联方向向上扩展并占据父容器在该方向上的所有可用空间,在绝大多数情况下意味着盒子会和父容易一样宽
每个盒子都会换行
w/h 属性可以发挥作用
内边距,外边距和边框会将其他元素从当前盒子周围"推开"

内联盒子

盒子不会产生换行
w/h 属性不起作用
内边距,外边距以及边框会被应用但是不会把其他内联盒子推开

盒模型图解

标准盒模型

box-sizing: content-box;

content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

IE 盒模型

box-sizing: border-box;

border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px,那么这 100px 会包含其它的 border 和 padding，内容区的实际宽度会是 width 减去 border + padding 的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
border-box 不包含 margin

浮动和定位

浮动

关于浮动，我想用一张图去让自己去理解

图 1: 没有浮动的时候，三个块级元素，独占一行，一次排开，这也是块级元素的特性
图 2: 只有框 1 向右边浮动，此时框 1 脱离文档流，框 2 和框 3 顶上位置
图 3: 只有框 1 向左浮动，框 2 和框 3 顶上位置，而框 1 脱离文档流向左靠拢在框 2 的上面，盖住框 2
图 4: 三个框左浮动，框 1 先抢占最左边的位置，框 2 框 3 一次跟上，条件是在框 1+框 2+框 3 的总宽小于外层元素的宽，或者外层元素没有出发 BFC
图 5: 和 4 对框 3 没有在一行的空间，被几下到了第二行
图 6: 和 5 对比框 3 在被挤下来的过程中被框 1 的高度挡住，5 和 6 反着看会更好理解

定位

关于定位的理解，更容易是背的内容

设置定位

position: static(默认值) | relative | absolute | fixed | sticky

对不同定位值得理解

relative(相对定位)
- 相对定位是以自己为参照物移动的，和父元素无关没有脱离文档流
absolute(绝对定位)
- 绝对定位是相对于祖先元素中离他嵌套层次最近的加了定位的祖先元素去定位，(如果祖先元素中没有定位过得元素，则相对于 body 去定位,一般子元素如果使用 absolute 定位,则父元素必须定位,方便使用的做法)
fixed(固定定位)
- 相对于窗口定位，一些一键置顶的按钮，都是用的这哥们，有一点得注意一下，他并不总是相对于窗口定位的，如果他的父级元素中出现了 transform 不为 none 的情况，他会相对于有 transform 的父级定位
sticky(粘性布局)
- 兼容性比较差，下面代码可以在chrome中运行看一下效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 100%;
      height: 1600px;
      background: #eee;
      margin: 20px auto;
    }
    nav{
      height: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: cyan;
      position: sticky;
      top:0;
    }
  </style>
</head>
<body>
  <div class="box">
    <nav>这个地方是导航区域</nav>
    <main>这个地方是内容区域</main>
  </div>
</body>
</html>

position 在 MDN 中的解释

flex与grid

flex

关于弹性盒布局

早期时候弹性盒的兼容性不是很好，在移动端使用的场景比较多，web端相对少一些
web端上如果不考虑低版本的 IE，使用基本是没有问题的
弹性盒的使用可以省去我们很大的代码量看起来更加简洁
对于属性的使用建议记住 flex-direction、flex-wrap、justify-content、align-items以及相关的值，就可以满足90%的开发工作

提供两个比较好的查阅资料的地方

grid

关于网格布局

在高级浏览器的内核使用grid的性能是比较理想的
使用grid比较容易更快速的得到想要的布局
同样存在着兼容性的问题

简单的说一些我实际中一个开发的例子，重点需要关注的是：

如何设置每个子元素的宽高
一个子元素如何垮多行多列
单个子元素的自适应宽高
多个子元素的比例问题

@import "~@/styles/variables.scss";
.app-container{
  // MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid
  display: grid;
  // NOTE: 4行
  grid-template-columns: 1fr 1.5fr $right-width;
  // NOTE: 3列
  grid-template-rows: 1fr auto 1fr 220px;
  // NOTE: 子元素之间的间隙
  grid-gap: $gap;
  &>div{
    border-radius: $border-radius;
    border: $border;
    overflow: hidden;
    padding: $padding;
    &:first-child{
      // 跨行/跨列的关键属性
      grid-column-start: span 2;
      grid-row-start: span 3;
      border: none;
      overflow: hidden;
      background: url(../../assets/map-bg.png) no-repeat;
      background-size: scale-down;
      img{
        width: 100%;
        height: 100%;
        // MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
        object-fit: cover;
      }
    }
    .sum{
      flex: 1;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr;
    }
  }
}

提供相对应的资料查阅

过渡和动画

过渡

transition：可以在一定的时间内实现元素得状态过渡为最终状态，用于模拟一种过渡动画效果但是功能有限，只能制作简单得动画效果

简单的使用demo(vue路由切换时候的过渡部分代码)

.right-enter-active,
.right-leave-active,
.left-enter-active,
.left-leave-active {
  will-change: transform;
  transition: all 0.3s;
  position: fixed !important;
  width: 100%;
  height: 100%;
  left: 0;
  overflow: hidden;
  background: #f7f8fa;
}

.right-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.right-enter-to {
  transform: translateX(0);
  opacity: 1;
}
.right-leave {
  transform: translateX(0);
  opacity: 1;
}
.right-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.left-enter {
  transform: translateX(100%);
}
.left-enter-to {
  transform: translateX(0);
}
.left-leave {
  transform: translateX(0);
}
.left-leave-to {
  transform: translateX(-100%);
}

动画

animation：可以制作类似于 flash 动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画

简单的demo说明使用(react脚手架demo中的原子旋转)

.App-logo {
    animation: App-logo-spin infinite 20s linear;
}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

css中我们需要知道的点有很多很多，加上技术的不断更新，我们需要学习的东西也会越来越多，同时我们也再越来越强

希望你保持学习，越来越好，加油共勉！！！

CSS工作中你应该掌握的基本知识