任务9- CSS常见技巧

1、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用

  • 简介
    CSS Sprites(雪碧图|精灵图)是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

  • 作用
    利用CSS Sprites能很好地减少了网页的http请求次数,从而大大的提高了页面的性能,节省时间和带宽。

  • 缺点
    CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内不会出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用RIA开发了一个CSS Sprites 样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK!CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。

  • 注意点
    CSS Sprites非常值得学习和应用,特别是页面有一堆ico(图标)。总之很多时候大家要权衡一下利弊,再决定是不是应用CSS Sprites

2、img标签和CSS背景使用图片在使用场景上有何区别

对于固定不变的内容,如图标等用背景图。对于可变的内容,图片是和内容相关的,用图片

Paste_Image.png
Paste_Image.png

3、title和 alt属性分别有什么作用

title是一个全局属性,主要是为元素增加一个小提示或者注释,当鼠标hover到这个有title
属性的元素时,title的值会在鼠标的旁边显示出来。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
        .content{

        }
    </style>
</head>
<body>

<div class="content" title="哈哈">
    测试title
</div>
</body>
</html>
Paste_Image.png

alt
主要是当图片无法加载的时候用来替代图片的文字内容。

Paste_Image.png

4、background: url(abc.png) 0 0 no-repeat;这句话是什么意思

这句话是一个background属性的简写方式,其中对应的值是background-image、bakground-position、background-repeat。
background-image可以为背景引入背景图片,接受的值是一个相对URL地址或绝对URL地址
background-position可以指定背景图片的初始位置,其中0 0表示的是左上角
background-repeat表示的是背景图片是否重复,默认的值是repeat

  • background: url(abc.png) 0 0 no-repeat;效果
    Paste_Image.png
  • background: url(abc.png) 20px 20px repeat;效果
Paste_Image.png

5、background-size有什么作用? 兼容性如何? 常用的值是?

  • background-size是指定背景图片的大小
  • background-size是CSS3的属性
Paste_Image.png

background-size常用的值:length|percentage|cover|contain;

描述
length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

6、如何让一个div水平居中?如何让图片水平居中

  • div居中
    如果设置div宽度,可以直接设置margin: 0 auto;
Paste_Image.png

如果不设置div宽度
div设置display: inline-block;,然后对父元素设置text-align: center;
或者div设置display: table;,然后设置margin: 0 auto;

Paste_Image.png
Paste_Image.png
  • 图片水平居中
    text-align: center;

7、如何设置元素透明? 兼容性?

  • 通过opacity: 0;不透明度这个属性来设置,它的属性值0表示完全透明,1表示完全不透明。
  • 兼容性


    Paste_Image.png

8、opacity 和 rgba都能设置透明,有什么区别

opacity是对元素设置透明度,可以对任何元素进行设置。
rgba是通过颜色alpha通道来设置颜色的透明,只能针对颜色。eg:背景颜色,字体颜色,边框颜色等颜色属性

** 本教程版权归作者和饥人谷所有,转载须说明来源! **

推荐阅读更多精彩内容

  • 课程目标 熟悉常见的样式写法,如背景图片、居中、透明等 学习建议 问答题一定要动手写 demo ,否则学习效果只能...
    Timmmmmmm阅读 130评论 0 0
  • 1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite是一种网页图片应用处理方式...
    小木子2016阅读 58评论 0 0
  • 1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 雪碧图指的是把一个网页上需要用到的多张图片整合到一...
    饥人谷_kule阅读 31评论 0 0
  • CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? 为了提高网页的性能,减少加载次数(减少http请求次...
    咸吧阅读 97评论 0 0
  • 2016/05/18 @hunger 说: CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 主要是指将...
    嘿菠萝阅读 48评论 0 0