超级实习生计划学习——前端学习记录

学习和实战过程中的不熟悉的易错点的一些笔记，在此写来加深印象。

· 怪异盒模型

div {
      box-sizing: border-box;
 }

特点： 对其添加外边距、边框或内边距时，是向内压缩，与正常盒模型相反。

· Flex布局（弹性盒子）

div {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      align-content: center;
 }

简介： 设置 display 属性为 flex 的元素可以成为 flex container，flex container 里面的直接元素叫做 flex items。

应用场景： 想要一个无论浏览器窗口大小怎么变化，文本内容都居中（比如新年倒计时，如下图），可以通过设置 flex container 的属性来实现。

 · 背景图占满并居中（随浏览器窗口变化）

        body {
            background-image: url(img/