前端笔记（问题集4）

2020/2/12
1.刚刚发现了一个很牛的东西，在写微博网页的时候，我发现它有一个地方把font-size设为了0，我当时觉得奇怪，就给它取消了，结果发现文字不能环绕图片了。
当时我就想这么麻烦干嘛，不如用float,直接将他浮动，这样文字就会自动环绕图片。但是我还是查了查这个问题，原来给为inline-block元素的父元素设置为0后。就能让父元素中的空格的大小为0，这样就解决了行内块级元素之间的空格问题。（真的牛啊！！)，但是由于字体大小有继承性，所以应该在行内块级元素内重新设置字体大小，以此覆盖。
这时我才明白，原来我之前认为的文字不能环绕图片这个说法并不准确，应该是中间多了一个空格，导致放不下承载文字的盒子了。
2.伪类选择器与伪元素选择器的区别？
简短的描述帮助我理解了差异：

伪类描述了一种特殊的状态。（link,hover）

伪元素匹配虚拟元素。(::section,::after，本不存在的元素，在html文档中找不到痕迹)

2020/2/13
1.绝对定位和translate的区别
在写微博新闻热点的时候，发现在对图片定位的时候，源代码同时使用了translate和绝对定位，而且赋值都是50%,让我当时以为是相互抵消的，结果就是水平不移动，竖直不移动。但我觉得这很不可思议，如果是这样就不会出现这行代码。但是经过实验，确实和不写是一样的。终于我一直往下找图，找到了写和不写不一样的。

绝对定位和translate的区别。绝对定位以设置了相对定位的父元素左上角为基准点进行偏移，translate是以设置了该属性的元素起始位置左上角为基准点。定位可能改变布局，而移动不会。在js中定位改变top等值变化，而移动不会改变top，只是位置变化了。

以上是我找到了解释，translate的50%是自身宽高的50%，而绝对定位的是其为定位流的祖辈元素大的宽高的50%，而上面的绝大部分图片效果都一样产生的原因是其祖辈的宽高和该元素是一样的。

2.设置子元素在父元素水平，竖直居中的一种方法。（写微博的视频播放键的时候学到的）

position: absolute;
margin: auto;
（margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;）
top: 0;
right: 0;
bottom: 0;
left: 0;
}

这里面设置了margin： auto,使得每个属性均为auto，然后再设置上下左右四个属性的值为零，就可居中。