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

· 怪异盒模型

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/yh2.jpg);
            height: 100vh;
            background-size: cover;
            background-position: center center;
        }

效果： 如上图的新年倒计时的背景图。

· 长静态页面的中间内容居中

<body>
    <div class="d1">
        <div class="wrap">
            /* 此处填写页面展示的内容细节 */
        </div>
    </div>
</body>

说明： div.d1是用来实现背景色（width = 100%, height 根据子内容自动增加）； div.wrap是用来让页面内容居中的，注意要设置 min-width。例如：

<style>
        .d1 {
            background-color: #333;
            width: 100%;
        }
        .wrap {
            min-width: 1200px;
            margin: 0 auto;
        }
        
        ···
        
</style>

效果图：

补充：
· 上图中最靠右的一个小div框架，是通过 " position:fixed " 来定位于浏览器窗口最右边的。
· 要想实现同一个 div 里的 a 标签和 p 标签，在鼠标移至 div 时都同时变色，用 " div : hover a, div : hover p { color : pink ; } "。

· 隐式转换问题
要点：
1、数字与字符串进行四则运算，“+”转字符，其余都转数字。

2、转布尔型：非空非零即为真。

3、强制类型转换：
①：字符串转数字用 " Number() " ，数字转字符串用 " String() "
②：" parseInt() " 转 int 型， " parseFloat() " 转 float 型

· 随机数的灵活应用
根据 Math.random() 函数返回值为 [0,1) 区间内的随机小数的特性

// 生成 [min,max) 区间内的随机数
function rand(min,max) {
        return Math.floor(Math.random() * (max-min) + min);
}

结合数组，rand()函数可灵活应用于各种“随机”场合！！！
eg：随机颜色、随机大小、给每个弹跳的小球随机的速度……

补充： Math.random() 还可以用于返回值 " 正负各占一半 " 的情景！！

原文链接：https://blog.csdn.net/weixin_32424432/article/details/124982385