推断以下代码执行的结果

1
2
3
4
5
6
7
8

var foo = 1
function bar() {
    if (!foo) {
        var foo = 10
    }
    console.log(foo)
}
bar()

innerHTML vs innerText vs outerHTML vs outerText

• innerHTML 设置或者获取标签所包含的 HTML 与文本信息, 不含标签本身
• innerText 设置或者获取标签所包含的文本信息, 不含标签本身
• outerHTML 设置或获取标签本身以及所包含的 HTML 与文本信息, 包含本身
• outerText 设置或获取标签本身以及所包含的文本信息, 包含本身

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="div1"><p>this is text</p></div>
<script>
    const div = document.querySelector("div");
    console.log('div.innerHTML', div.innerHTML);
    console.log('div.innerText', div.innerText);
    console.log('div.outerHTML', div.outerHTML);
    console.log('div.outerText', div.outerText);
</script>

<!-- 控制台打印的结果为
div.innerHTML <p>this is text</p>
index.html:5 div.innerText this is text
index.html:6 div.outerHTML <div id="div1"><p>this is text</p></div>
index.html:7 div.outerText this is text
-->

input 可选的 type

link 和 import 的区别

1. link 是 html 标签, 而 imort 是 css 提供的关键词
2. Link 加载的 css 文件会在页面加载过程中加载而 import 的 css 文件则需页面加载完成后开始加载
3. Link 方式引入的 css 文件权重高于 @import

相对单位

• px
• em
• rem
• ex
• %

绝对单位

• cm
• pt
• in
• pc
• mm

具体含义

px

像素(Pixel). 是屏幕上显示数据的最基本的点. windows 用户使用的分辨率一般为 96 像素/英寸, mac 用户使用的分辨率一般为 72 像素/英寸

em

相对于当前元素内文本的字体尺寸, 如果当前元素内文本尺寸没有人为设置, 则相对于浏览器默认的字体尺寸, 1em === 100% 可以结合 css 的继承关系使用. 具有灵活性

rem

相对于根元素(html 元素)内文本的字体尺寸, 如果当前元素内文本尺寸没有人为设置, 则相对于浏览器默认的字体尺寸

ex

相对于 “x” 的高度, 此高度通常为字体高度的一半

pt

点(Point), 印刷行业常用单位. 等于1/72英寸

1in = 2.54cm = 25.4mm = 72pt = 6pc

pc

派卡(Pica), 相当于新四号铅字的尺寸

in

英寸(Inch)

mm

毫米(Millimeter)

cm

厘米(Centimeter)

区别

px 是一个点, 不是自然界的长度单位, 可以画的很小也可以画的很大. 如果点很小, 那么画面就清晰, 我们称之为 “分辨率高”. 反之, 就是 “分辨率低”. 像素点的大小是会变的, 因此被称为相对长度单位.

pt 就是 point, 大小相当于 1/72 英寸. 他是一个符合自然界标准的长度单位, 也称为”绝对长度”

• absolute 绝对定位
• relative 相对定位
• fixed 固定定位
• static 默认值, 没有定位
• inherit 继承父级定位方式
• initial 设置该属性为默认值
• sticky 黏性定位

前言

由于不可描述的原因在年初我加入了一个新团队. 程序猿的快乐莫过于入职开发新项目, 即没有前人代码的束缚的同时又提供了与项目共同进步的契机. 本文作为开发笔记行文方式较为轻松. 旨在记录探索开发中遇到的各种技术问题和解决方案, 同时感谢在此过程中给予帮助的多位同学 ~