发表于: 2018-10-25 22:52:50
1 619
今天完成的事情:今天主要是完成了任务6,自己刚开始的一些毛病没有纠正,导致修修改改,
以后进来不会在犯这样的错误。
CSS雪碧图又叫CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分
雪碧图的干什么的
雪碧图被运用在众多使用了很多小图标的网站上。
相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更好。
使用雪碧图的优点有以下几点:
将多张图片合并到一张图片中,可以减小图片的总大小。
将多张图片合并成一张图片后,下载全部所需的资源,只需一次请求。可以减小建立连接的消耗。
二、雪碧图的制作与使用方法:
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布局
收获:
评论