[无名弟子]JS-桂梦|2018年11月24日的日报-技能树.IT修真院

发表于： 2018-11-24 21:38:39

1 871

今天完成的事情：

一、了解background-position属性定义：设置背景图像的起始位置。（但是设置背景原图像的位置是由background-image定义的）前提是使用background-image。

background-position有两个属性值，X/Y，用法上可以单独使用background-position-x和background-position-y。

注意：两个属性值可以混用。并非x轴和y轴要设同类型的属性值。

background-position属性值有三种情况。

（1）方向值：x轴方向：left、right、center；y轴方向：top、bottom、center。

（2）百分比：x轴方向：x% y轴方向：x%

百分比和方向值是以自身容器的长宽 - 图片的长宽 x 百分比来得到数值来确定图片的位置。

公式：容器自身的宽度 - 高度 - 图片自身的宽度 - 高度）x 百分比

例如：容器的宽高为300/100，百分比为50%，（300-100）x 50%等于一个轴的值。

方向值和百分比计算方法是一样的，之间可以相互转换。

（3）数值：x轴方向：x px(单位值) y轴方向：x px(单位值)

数值就意味着图片的起始位置是相对于容器而言，图片在距离自身容器x轴和y轴的位置作为图片显示的起点位置。例如：100px是x轴，50px是y轴就是图片显示的位置。

注意：1、如果不设置background-position属性值，默认起始位置的值为0% 0%。

2、如果background-position属性值只设置一个，那另一个默认为center。

二、了解css雪碧图：css sprites，别称css精灵，是一种css图像合并技术。

该方法是将小图标和背景图像合并到一张图片上，然后利用css背景定位来显示需要的图片部分。

使用雪碧图是background-position属性值为负数。因为容器的长宽会限制图片呈现的背景大小，超出的则被容器部分隐藏起来，所以在容器尺寸较小的时候，position值为0 0时，雪碧图要像x轴的左边移动时，它的position值就会是负数，如background-position：-25px，0。

三、看了下css编码的书写规范。

四、header头部代码写出来了，现在就是要解决垂直居中的问题，明天准备了解下flex弹性盒子中justify-content的属性，然后写在代码里让button在网页上显示出垂直居中效果。

明天的计划：

继续完成任务六

问题：

这次想运用flex弹性盒子来写，关于弹性盒子的运用没有头绪。

今天有点浮躁了，有点静不下心来写代码，