h5笔记

1.文字阴影: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>

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、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。

视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

vw、vh 与 % 百分比的区别

（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。

（2）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>

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文件

@font-face {

font-family: 'MyFont';

/*字体名称*/

src: url('myfont.ttf');

/*字体源文件*/

}

body {

font-family: MyFont

}

9.js获取当前点击的元素

<div id="test1" style="width: 100%" onclick="hideme(this)">click to hide</div>

function hideme(e) {

}

10.inline-block默认宽度由内容决定

posted @ 2019-06-25 10:57 手指乐阅读(181) 评论(0) 编辑收藏举报

刷新页面返回顶部

h5笔记

vw、vh 与 % 百分比的区别

公告