CSS知识总结（二）

CSS知识总结（含js题）

一、只知道图片的URL，怎么让其铺满或居中？

<div class="img-container">
        <img src="metaln.jpg" alt="">
</div>

只知道图片的URL=>>不知道图片的大小
可以用transform，这里面的百分比只是相对于父盒子的，因此不需要知道图片的size。

.img-container img {
            position: absolute;
            width: 100px;
            height: 100px;
            left: 50%;
            top: 50%;
            /* 这个是不知道图片大小的情况下 */
            transform: translateX(-50%) translateY(-50%);
            /* 这个是在知道图片大小情况下 */
            margin-left: -50px;
            margin-top: -50px;
        }

若知道图片的size，可以使用负margin，注意：负margin中的百分比是相对于自身的。

二、null与0的比较

console.log(null > 0); // 比较=>转换成number=> Number(param)=> 0>0 => false
console.log(null < 0); // false
console.log(null >= 0); // true
console.log(null <= 0); // true
console.log(null == 0); // fasle

其中，null == 0不做类型转换，所以为false。

null 和undefined

实际上，undefined 值是派生自 null 值的，因此 ECMA-262 规定对它们的相等性测试要返回 true：

console.log(null == undefined); // true

相等操作符总结

• 如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值。
• 如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf()方法，用得到的基本类型值按照前面的规则进行比较
• null 和 undefined 是相等的。
• 要比较相等性之前，不能将 null 和 undefined 转换成其他任何值。
• 如果有一个操作数是 NaN，则相等操作符返回 false，而不相等操作符返回 true。重要提示：即使两个操作数都是 NaN，相等操作符也返回 false；因为按照规则，NaN 不等于 NaN。

特例：

空数组

console.log([] == !([])); // true

console.log(Number([]));  // 0

空对象

console.log({} == !({})); // false

console.log(Number({})); // NaN

关系操作符总结

• 如果两个操作数都是字符串，则比较两个字符串对应的字符编码值。
• 如果一个操作数是数值，则将另一个操作数转换为一个数值，然后执行数值比较。（这里可以转换null或undefined）
• 如果一个操作数是对象，则调用这个对象的 valueOf()方法，用得到的结果按照前面的规则执行比较。如果对象没有 valueOf()方法，则调用 toString()方法，并用得到的结果根据前面的规则执行比较。

减性操作符总结

• 如果有一个操作数是 NaN，则结果是 NaN；
• 如果是 Infinity 减 Infinity，则结果是 NaN；
• 如果是-Infinity 减-Infinity，则结果是 NaN；
• 如果是 Infinity 减-Infinity，则结果是 Infinity；
• 如果是-Infinity 减 Infinity，则结果是-Infinity；
• 如果是+0 减+0，则结果是+0；
• 如果是+0 减-0，则结果是-0；
• 如果是-0 减-0，则结果是+0；
• 如果有一个操作数是字符串、布尔值、null 或 undefined，则先在后台调用 Number()函数将其转换为数值，然后再根据前面的规则执行减法计算。如果转换的结果是 NaN，则减法的结果就是 NaN；（可以用该方法把字符串转换为数字例如：'10' - '0' => 10）；
• 如果有一个操作数是对象，则调用对象的 valueOf()方法以取得表示该对象的数值。如果得到的值是 NaN，则减法的结果就是 NaN。如果对象没有 valueOf()方法，则调用其 toString()方法并将得到的字符串转换为数值。

取数字不同数量级上的数字

用取余操作获得当前数量级的 sum % 10 => 个位数
用整除操作获得进位 sum / 10 => 十位数