# 10进制转16进制

var num = 255
console.log(num.toString(16)) //输出：ff
或
console.log((255).toString(16))



注意: 下面这种事错误的
console.log(255.toString(16))  //这样会报错  Invalid or unexpected token

# 16进制转10进制
parseInt("0x26F1627")

function fruits() {}
 
fruits.prototype = {
    color: "red",
    say: function() {
        console.log("My color is " + this.color);
    }
}
 
var apple = new fruits;
apple.say();    //My color is red

banana = {
    color: "yellow"
}
apple.say.call(banana);     //My color is yellow
apple.say.apply(banana);    //My color is yellow

var func = function(arg1, arg2) {
     
};

func.call(this, arg1, arg2);

// 数组追加
var array1 = [12 , "foo" , {name "Joe"} , -2458]; 
var array2 = ["Doe" , 555 , 100]; 
Array.prototype.push.apply(array1, array2); 
/* array1 值为  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */


// 获取数组中最大值和最小值
var  numbers = [5, 458 , 120 , -215 ]; 
var maxInNumbers = Math.max.apply(Math, numbers),   //458
    maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458
number 本身没有 max 方法，但是 Math 有，我们就可以借助 call 或者 apply 使用其方法

// 验证是否是数组（前提是toString()方法没有被重写过）
functionisArray(obj){ 
    return Object.prototype.toString.call(obj) === '[object Array]' ;
}

var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

var obj = {a: 1};
Object.assign(obj) === obj // true

typeof Object.assign(2) // "object"

Object.assign(undefined) //  报错
Object.assign(null) //  报错

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

var v1 = 'abc';
var v2 = true;
var v3 = 10;
var obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2

var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source)
// { a: { b: 'hello' } }

>"undefined".length
9
>"void 0".length
6

void function iife() {
    var bar = function () {};
    var baz = function () {};
    var foo = function () {
        bar();
        baz();
     };
    var biz = function () {};

    foo();
    biz();
}();

<a href="javascript:void(0);">
  这个链接点击之后不会做任何事情，如果去掉 void()，
  点击之后整个页面会被替换成一个字符 0。
</a>
<p> chrome中即使<a href="javascript:0;">也没变化，firefox中会变成一个字符串0 </p>
<a href="javascript:void(document.body.style.backgroundColor='green');">
  点击这个链接会让页面背景变成绿色。
</a>

// 抑制函数返回值
const result = void console.log('Hello world!'); // undefined

// 解决表达式中的错误
const input = null;
const length = void input.length; // undefined

// 防止副作用
void fetch('https://example.com/'); // 不会进行网络请求

#myid {
  background-color: blue;
}
 
.myclass {
  background-color: gray;
}
 
p {
  background-color: red !important;
}

# 语法结构:

div{border-radius:5px} 
#设置div对象四个角5像素的圆角效果

div{border-radius:5px 5px 0 0;}
#设置div对象左上角和右上角5像素的圆角,其他两个都是0不圆角


border-radius:3px 4px 5px 6px
代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角



注: 如果是0的话可以不写单位

一个值：所有方向使用相同值
两个值：第一个值用于上/下，第二个值用于左/右
三个值：第一个值用于上，第二个值用于左右，第三个值用于下
四个值：分别用于上、右、下、左

.box {
    width: 200px;
    height: 200px;
    background-color: #f0f;
    margin-bottom: 20px;
    box-sizing: border-box;
}

CSS中原生的变量定义语法是：变量名前面要加两根连词线 --*
变量使用语法是：var()函数用于读取变量 var(--*)
其中 * 表示我们的变量名称
变量名大小写敏感，--header-color和--Header-Color是两个不同变量

不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文

无论是变量的定义和使用只能在声明块{}里面

变量值只能用作属性值，不能用作属性名

:root 伪类可以看做是一个全局作用域，在里面声明的变量，他下面的所有选择器都可以拿到；
局部变量；

// 全局变量
:root { --color: blue; }
.box{color: var(--color)}

// 局部变量
.box{
    --color: red;
    color: var(--color);
}

var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分;

color: var(--foo, #7F583F);
var(--font-stack, "Roboto", "Helvetica");   var(--pad, 10px 15px 20px);

如果变量值是一个字符串，可以与其他字符串拼接；
如果变量值是数值，不能与数值单位直接连用;
如果变量值带有单位，就不能写成字符串;

// 字符串
--bar: 'hello';   
--foo: var(--bar)' world';

// 变量值是数值
foo { 
    --gap: 20; 
  margin-top: var(--gap)px;  /* 无效 */  
}

// 上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc() 函数，将它们连接，
foo { 
    --gap: 20; 
  margin-top: calc(var(--gap) * 1px); 
}

// 变量值带有单位
.foo {
    --foo: '20px'; 
  font-size: var(--foo);  /* 无效 */ 
} 

.foo {
    --foo: 20px;
  font-size: var(--foo);  /* 有效 */ 
}

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的；

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

body {
  --foo: #7F583F;
}

.content {
  --bar: #F7EFD2;
}

上面代码中，变量--foo的作用域是body选择器的生效范围，--bar的作用域是.content选择器的生效范围。

由于这个原因，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。

:root {
  --main-color: #06c;
}

CSS 是动态的，页面的任何变化，都会导致采用的规则变化。

利用这个特点，可以在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}

a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }
}

// 用属性值得无效声明
a {
  color: #7F583F;
  color: var(--primary);
}

// 也可以使用@support命令进行检测
@supports ( (--a: 0)) {
  /* supported */
}
@supports ( not (--a: 0)) {
  /* not supported */
}

// JavaScript 检测浏览器是否支持 CSS变量
const isSupported =
    window.CSS &&
    window.CSS.supports &&
    window.CSS.supports('--a', 0);
 
if (isSupported) {
    /* supported */
} else {
    /* not supported */
}

// JavaScript 操作 CSS 变量的写法
window.onload = function() {
    // 设置值
    document.body.style.setProperty("--primary","pink");
    // 读取值
    let primary = document.body.style.getPropertyValue("--primary");
    console.log(primary);
    // 删除变量;返回删除的变量值
    let delPrimary = document.body.style.removeProperty("--primary");
    console.log(delPrimary);
}