[上海|荣耀师兄]JS-周建刚|2019年03月08日的日报-技能树.IT修真院

发表于： 2019-03-08 23:05:26

2 794

今天完成的事情：

1.学习了雪碧图。

2.任务五写了一半。

明天计划的事情：

1.完成任务五。

2.如果还有时间学习一下flex布局。

3.线下报名。

遇到的问题：

1.雪碧图的概念一早上没理解通透，浪费了做任务五的时间。

2.font-size设置625%又导致页面混乱了，下次要记得在body设置font-size：initial，誓死捍卫625%党派！

收获：

1.今天发现了一个很神奇的东西：幽灵空白节点。

如下图，我们在一个容器里有两个内联块，左边内联块里是一个图片，右边是内联块里是文本，我们可以看到中间有一块空白的地方

关于单行或者多行居中的问题就是从它开始的。

1.如果只有一个图片我们想让它垂直居中：

我们只给图片设置vertical-align:middle 是不起作用的，是因为这句话是：将支持valign特性的对象的内容与对象中部对齐，看起来是有些拗口，我们这样翻译:

支持vertical特性的对象是内联块，意思就是两个内联块中部对齐。所以我们可以利用这个幽灵空白节点，让图片与这个空白节点的中部对齐就可以实现图片的垂直居中

代码如下：

<div class="box">
<div class="photo"></div>
</div>

.box {
width: 300px;
height: 300px;
border: 1px solid;
　　line-height: 300px; //给父容器设置line-height，幽灵空白节点就会继承父容器的line-height，从而把内联块的高度撑开，空白节点在中间，于是与图片近似对齐
}

.photo {
display: inline-block;
width: 100px;
height: 100px;
background: url("product.png");
}

所以要用vertical-align:middle来实现定位的话必须要设置父元素的line=height。

而当我们实现了图片和文本垂直居中时，也只是近似集中，因为这样对齐的方式是将两者的中线对齐。

图片的中线就是中点，而文本不存在中线，选中的应该是基线，在中线中等偏下一点的位置。

解决问题的办法就是，给父容器的font-size设为0，此时文本两条线重合，于是问题解决。

理解了一上午。首先这个网站会默认margin：10px，最好设置成0。

width和height是指相框的大小。图片background为缩写形式。刚开始学最好写全称。

background-image：url（）；background-size设置雪碧图大小。（注意如果写100%则是相对于父元素设置的，如果父元素宽度是100px，那就是设置了雪碧图宽度为100px；同理，如果写了50%，则是设置雪碧图宽度为100px，而不是雪碧图原来大小的一半，这个东西我晕了半天）。

background-position用来找雪碧图的坐标，一般是负值。如果调整了雪碧图的大小，比如缩小了一半，那这个坐标值也要缩小一半。background-repeat设置雪碧图是否需要重复。