发表于: 2018-10-25 22:52:50

1 619


今天完成的事情:今天主要是完成了任务6,自己刚开始的一些毛病没有纠正,导致修修改改,

以后进来不会在犯这样的错误。


CSS雪碧图又叫CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分


雪碧图的干什么的


  1. 雪碧图被运用在众多使用了很多小图标的网站上。

  2. 相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更好。


使用雪碧图的优点有以下几点:
  1. 将多张图片合并到一张图片中,可以减小图片的总大小。

  2. 将多张图片合并成一张图片后,下载全部所需的资源,只需一次请求。可以减小建立连接的消耗。

二、雪碧图的制作与使用方法:

1.使用图像编辑软件如Photoshop将多张图放到同一个图层并导出


2使用自动化构建工具自动拼接合并后的图片。


3引用图片时,图片地址为合并后的图片地址


有六个属性设置在box父容器上,来控制子元素的显示方式;分别是


  • flex-direction    设置主轴对齐方式  默认 row  x轴从左到右;

  • flex-wrap   子元素换行的方式  默认nowrap ;

  • flex-flow   flex-direction和flex-wrap的简写 默认row nowrap;

  • justify-content  子元素的对齐方式  默认flex-start  左对齐

  • align-items 
  •   
  • align-content


垂直定位的几种方式。(更重要的还是Flex的布局垂直定位,这样才能更方便快捷的做出好看的页面而不是拼拼凑凑,加油

针对文本,通过display:flex;配合align-items和justify-content实现文本居中

.content{

display: flex;

align-items: center;

justify-content: center;


    绝对定位,配合top:50%和负margin-top(元素高度一半)进行垂直居中

.content{

position: absolute;

top: 50%;

left: 50%;

margin-top: -10em; /* 为元素height/2 */

margin-left: -10em;

width: 20em;

height: 20em;

background-color: aqua;

}






明天计划的事情:做出很完美的布局,优化代码,深入学习知识
遇到的问题:flex布局
收获:


返回列表 返回列表
评论

    分享到