- 文字阴影:text-shadow
text-shadow: 0px 5px 2px black
参数1：x方向偏移
参数2：y方向偏移
参数3: 阴影模糊程度，值越大越模糊
参数4：阴影颜色
文字颜色浅于背景颜色时，可以用阴影在文字左上方做一个深色浮雕效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
display: inline-block;
}
.box2 {
color: white;
font-size: 58px;
min-width: 800px;
background: yellow;
text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.7)
}
</style>
</head>
<body>
</div>
<div class="box2">你好
</div>
</body>
</html>
文字颜色深于背景色时，可以在右下方做一个浅色浮雕效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
display: inline-block;
}
.box2 {
color: black;
font-size: 58px;
min-width: 800px;
background: pink;
text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.7)
}
</style>
</head>
<body>
</div>
<div class="box2">你好
</div>
</body>
</html>
- 块元素阴影：
div
{
box-shadow: 10px 10px 5px #888888;
}
可以在第三个参数（模糊程度）后面加一个参数阴影的尺寸大小
所有参数：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
- var,let,const区别
- var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
- let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
- const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
以下第一个alert正常弹框，第二个会报变量未定义异常
<script>
function test() {
let temp = "test"
if (true) {
alert(temp)
let temp2 = "test2"
}
alert(temp2)
}
test();
</script>
把第二个let改为var，则可以正常弹框
- null和undefined的区别
undefined表示对象没有初始化或者对象没有这个属性
var tmp;
tmp === undefined //true
var test = {a:1,b:2}
var.c === undefined //true
null表示没有这个对象
document.getElementById('notExistElement') === null //true
使用两个等号的时候，undefined == null //ture
直接使用一个不存在的对象时，会抛出异常
alert(notExistObj)
Uncaught ReferenceError: notExistObj is not defined
所以判断对象是否存在要使用
typeof notExistObj == "undefined"
注意typeof返回的是字符串，比如
typeof 1
"number"
另外,null,undefined和boolean的关系：
null == flase //false
undefined == flase //false
!null == true //true
!undefined == true //true
- 使用变量做对象的key
key1 = "a"
obj = {a:1,b:2}
obj[key1] //输出1
obj.key1 //undefined 不能用这种形式
- css3新单位vw、vh、vmin、vmax
vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器
- vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
- vh：视窗高度的百分比
- vmin：当前 vw 和 vh 中较小的一个值
- vmax：当前 vw 和 vh 中较大的一个值
vw、vh 与 % 百分比的区别 - % 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
- vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。
做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
下例中，没有设置html和body高度的情况下，可以用vh设置div的高度，字体设置为5vw，随着viewport增加，字体会变大，实现了响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.test {
font-size: 5vw;
width: 100vw;
height: 100vh;
background-color: red;
}
</style>
<body>
<div class="test">
dfadfas
</div>
</body>
</html>
- em,rem:
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
用于做响应式页面，不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.test {
font-size: 2em
}
.test span {
font-size: 0.5rem
}
</style>
</head>
<body>
test1
<div class="test">
test2
<span>
test3
</span>
</div>
</body>
</html>
chrome默认的字体大小是12px，也就是1em默认为12px
上例中test2字体为24px，test3为6px
- 使用外部字体：
首先下载字体ttf文件
@font-face {
font-family: 'MyFont';
/*字体名称*/
src: url('myfont.ttf');
/*字体源文件*/
}
body {
font-family: MyFont
}
- js获取当前点击的元素
<div id="test1" style="width: 100%" onclick="hideme(this)">click to hide</div>
function hideme(e) {
}
- inline-block默认宽度由内容决定
- 相对路径./和/的区别
./:相对当前目录
/:相对网站根目录
网站下有img目录，下面还有1.png
在任意目录下使用/img/1.png可以访问到这个图片
只有在img目录下才能访问./1.png
在与img平级的test目录下使用../img/1.png访问图片
- JavaScript 箭头函数（Lambda表达式）
Lambda表达式(箭头函数)用于表示一个函数，所以它和函数一样，也拥有参数、返回值、函数体，但它没有函数名，所以Lambda表达式相当于一个匿名函数。
使用方法：
()=>{}
小括号里放参数，大括号里放函数体箭头函数做回调参数
[5, 8, 9].map(item => item + 1);// -> [6, 9, 10]当箭头函数有一个参数时，参数两边的括号是可有可无的，但是还是有括号看起来看清楚
const foo = bar => bar + 1;
const bar = (baz) => baz + 1;箭头函数不带参数时，必须要用括号
const foo = () => "foo";如果函数体不是只一行，应该用花括号，并显式地返回（如果需要返回值）
const foo = bar => {
const baz = 5;
return bar + baz;
};
foo(1); // -> 6函数如果只有一行，可以省略return
const foo = bar => bar + 5
alert(foo(5)) //10
如果不止一行，要加花括号，不可以省略return
const foo = bar => {
const baz = 5;
bar + baz;
};
foo(1); // -> undefined
只要加了花括号，就必须要return
const foo = bar => {
bar + 5
}
alert(foo(5)) //undefined
- 以下只是定义函数
() => {
alert(11)
}
以下是定义加执行：
(() => {
alert(11)
})()
- 以下都不会执行alert：
null && (() => {
alert(11)
})()
undefined && (() => {
alert(11)
})()
if (undefined) {
alert("ok")
}
if (null) {
alert("ok")
}
