前端优秀的文章的收集

getElementById和querySelector方法的区别
float和position的用法
postion的具体用法
offsetwidth和width的区别
js中的引用(和python很类似)
JavaScript中this的用法
input标签和图片不能顶端对齐(看底部的回答)
行内元素的padding和margin

• 浮动流脱离标准流，在同一平面内排布。而定位流脱离标准流，根据z-index在不同等级平面内排布，出现层叠现象。因为relative还占用标准流，所以float对其有影响。而absolute已经脱离标准流，float对齐没有影响。
• 工程中有种常用的表达方式，就是ul,li的嵌套使用，而li一般都会设置为float。此时ul就会出现高度塌陷。就算设置了ul的高度等方式让他不再高度塌陷，他的宽度还是没有办法保证(ul会默认和父元素一样宽)，此时，如果设置ul也是float,就会发现，li可以撑开ul的宽高，就算是没有设置ul的高度也可以撑开。(感觉是不是同时设置了float,二者都跑到了一个流体上，因此就没有高度塌陷了？？？？)
• 当设置了absolute的时候，如何让元素水平居中。先left: 50%, 然后margin-left: 元素宽度的一半。
• 行内元素没有宽度，所以设置text-align并不能让元素居中。如果对一个元素设置了text-align，它的子孙后代都具有text-align这个属性
• 当指定了图片的宽或者高的时候，另一条会进行等比缩放。
• 当插入图片的大小超过了父元素的宽时，如何进行居中设置？父亲元素设置text-align:center,图片设置：margin:0 -100%即可。
• 如何设置蒙版，例如鼠标移动到一张图片上时候，图片变暗？将图片的opacity设置为0.5，然后给图片的父元素设置背景颜色为黑色即可。