1.文字阴影:text-shadow
<!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>
2.块元素阴影：
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) 改为内部阴影。
3.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，则可以正常弹框
4.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
5.使用变量做对象的key
key1 = "a"
obj = {a:1,b:2}
obj[key1] //输出1
obj.key1 //undefined 不能用这种形式
6.css3新单位vw、vh、vmin、vmax
- vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
- vh：视窗高度的百分比
- vmin：当前 vw 和 vh 中较小的一个值
- vmax：当前 vw 和 vh 中较大的一个值
vw、vh 与 % 百分比的区别
<!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>
7.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
8.使用外部字体：
首先下载字体ttf文件
9.js获取当前点击的元素
10.inline-block默认宽度由内容决定