2023/01/18 随便刷点题

导入页面样式，link和@import的区别

1. link是一个html标签，它可以用来引入css文件。@import是css规则，用于在css内部引入其他样式文件。
2. link引入的样式在页面加载时同时应用，而@import引入的样式，要在也买你完全加载之后才应用，所以可能造成页面加载后的一瞬的样式错乱。
3. link可以使用js控制引入，但是@import不能。

px/em/rem

1. px是我们开发时最常用的尺寸单位，比如我的电脑分辨率是1920 * 1080，但是由于设置了125%，所以最后我的屏幕应该是：1536px * 864px。表示横向屏幕上有1536个像素点，纵向上有864个像素点。
2. em表示元素相对于它父元素fontSize的尺寸，比如div下有一个p元素，这个div的font-size为16px，当设置p的宽度width为10em时，p的实际大小就是:10 * 16 = 160px。
3. rem表示元素相对于根元素（html）的尺寸。

px/dp/pt

1. px 像素
2. dp android开发的尺寸单位，在不同机型上px和dp的转换倍数不同。
3. pt ios开发的尺寸单位

before伪元素前面是：还是：：

一般来说用单冒号：表示伪类，例如active :hover :focus :visited。用双冒号表示伪元素，例如::after ::before。 伪元素在css1中已经存在当时用单冒号，css3时做了修订用双冒号 ::before ::after表示伪元素用来区别伪类，只是为了能兼容，所以也可以表示成:before和:after。

转跳到页面固定位置的几种方法

1. 锚点：使用a标签的href属性可以转跳到页面对应id的元素

<a href='#t1'>转跳到id为t1的锚点</a>
<p id='t1'>锚点</p>

2. scrollTo: window.scrollTo可以滚动到文档中的某个坐标

window.scrollTo( 0, 1000 );

3. scrollIntoView: Element.scrollIntoView让当前的元素滚动到浏览器窗口的可视区域内

var element = document.getElementById("t1");
element.scrollIntoView();