[碎片知识点]子元素margin-top 对元素的影响 弹性盒最后一项向右对齐 html中脚本引入资源路径定位问题

子元素margin-top 对元素的影响

现象：子div设置的margin-top对整个父div的位置造成了影响

原因：所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。

毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、padding或border分隔。

子div的margin-top直接作用于合并的margin，将整个父div模块和子div模块下拉。因为两者同时下移，所以子div相对于父div的位置并未发生改变。

解决方法：

1. 父级或子元素使用浮动或者绝对定位absolute

浮动或绝对定位不参与margin的折叠

2. 父级overflow:hidden;

3. 父级设置padding（破坏非空白的折叠条件）

4. 父级设置borde

弹性盒最后一项向右对其

①前提条件：具有width

方法：最后一项增添margin-left:auto
②父元素设置display:flex 和justify-content:flex-end,使弹性项目居右

html中脚本引入资源路径定位问题

假使在js中使用了'./'或'../'等在当前目录或者父级目录中获取资源，那么当html引入该脚本的时候，当前目录以html文件所在目录为准，而不是以js目录为准