一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
2022/4/3-2022
如果向Web服务器请求一个目录会怎么用？
Web服务器会尝试寻找一个默认文件，通常为index.html或default.htm 。
弹性盒造成的影响？
弹性盒是一种新的布局方式，特别适用于移动端布局。
影响：
- 子元素默认横向排列(主轴横向)。
- 子元素中的行内元素会变成块元素。
- 给子元素添加
margin: auto;会让子盒子居中。
如何引入字体图标？
在矢量图标库选择所需要的图标，然后可以生成在线的css链接，然后引入进html文件即可使用。
<span class="iconfont icon-Dyanjing"></span>放在i标签里面。可以用font-size和color修改颜色和大小。
模拟器显示的移动端像素为什么与截图显示像素不符？
模拟器上显示分辨率 css像素：设备的独立像素。css 1像素 pc上显示1像素。
实际是按物理分辨率 设备像素：设备的物理像素 css 1像素 移动设备像素 2或3像素。
设备像素比（dpr）= 物理像素/css像素
在实际设计过程中，会提供物理像素的设计稿，为了使页面更清晰，而且只有1份，所以设计稿不写固定的，基本采用百分比，弹性盒布局，rem布局。这样可以适配。
width: 100%;和width: 100vw;的区别?
在没有滚动条的时候，100%和100vw表示出来的效果是一样的。
在有滚动条的时候，100%表示刨除滚动条后，剩余的空间占满，而100vw表示占满视口空间，之后在加上滚动条，所以会在水平方向也会产生滚动条。
在做动画的时候，设置left属性和transform属性的区别？
设置left属性是真实改变了元素的位置，而transform属性只是改变了视觉上的效果。
设置left属性会频繁造成浏览器的回流重拍，影响性能。而transform和opacity属性不会，因为transform属性是作为独立图层发送到GPU上，由显卡执行渲染，这样的好处有：可以通过亚像素精度得到一个运行在特殊优化过的单位图形任务上的平滑动画，而且运行非常快；动画不在绑定到CPU重排，而是通过GPU合成图形，即使运行一个非常复杂的JavaScript任务，动画仍然会很快运行。
animation和transition的区别?
- 相同点：都是随着时间改变元素的属性值
- 不同点：transition需要触发一个时间（hover事件或者click事件等）才会随着时间改变其css属性。而animation在不需要触发任何事件的情况下也可以显式的随着时间改变来改变元素的属性值，从而达到一种动画的效果，css3的1animation就需要明确的动画属性值。
网格布局和flex布局的区别？
grid布局和flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，他们也存在重大区别。
flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看做是一维布局。
grid布局则是将容器划分为"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看做是二维布局。
目前看完了HTML&CSS，接下来准备看JavaScript，会在看js的同时，写一下html&css的小实例。
