任务九~CSS常见技巧

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

CSS Sprite把多个背景图片合成为一张，通过background-positiong定位图片的技术
CSS Sprite原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量
CSS Sprite作用
减少加载网页图片时对服务器的请求次数
提高页面的加载速度
减少鼠标滑过的一些bug

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

img标签的使用场景是如果一张图片属于网页内容的一部分，那么则该用img标签，以及img标签也多用于网页中经常更换的图片部分，比如，购物网站的轮播广告等
css背景则多用于图片不经常变动的场景
eg如下

图片使用场景

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

title作为属性，用来为元素提供额外说明信息。例如，给a标签添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果
alt属性用来指定替换文字，只能用在img、area和input元素中，用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息

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

background属性总结（整理自CSS权威指南和图解CSS）
background-image:url || none，用来设置元素的背景图片，<url>是指背景图片的地址，这个地址可以使绝对地址，也可以是相对地址
background-position:percentage || length || 关键词，用来设置元素背景图片的位置
- 当值为关键字时，一是关键字不能超过两个，一个对应水平方向，另一个对应垂直方向；而是当值设置一个值时，则认为另一个关键字是center
当值为百分数时，第一百分数对齐方式是原图像的百分数所在的位置同元素中描述为该百分数所在元素中的位置相对齐，比如，当用百分数把图像居中时，原图像中描述为50% 50%的点同元素中描述为50% 50%的点对齐；第二，用百分数设置位置，水平值总是先出现；第三，如果只提供一个百分数值，则这个提供的值用作水平值，垂直值假设为50%
当值为长度值时，这些长度值解释为从元素内边距区左上角的偏移，偏移点在原图像的左上角，比如，如果设置值为10px 15px，则原图像的左上角将在元素内边距区左上角向右10px，向下15px
百分数和长度值都可以使用负值，这样可以将原图像拉出元素的背景区
background-repeat:repeat || repeat-x || repeat-y || no-repeat，用来设置元素背景图片在元素的盒模型中的铺放方式
background-color:transpatrent || color，用来设置元素的背景颜色
background-attachment:scroll || fixed，用来设置元素背景图片是否固定或随着页面的其余部分滚动，值为scroll则图片会随着浏览器滚动条滚动，值为fixed则图片固定不动
background-origin:padding-box || border-box || content-box，用来决定background-position属性的参考原点
- padding-box，默认值，决定background-position起始位置从padding外边缘（即border内边缘）开始显示背景图片
- border-box，决定background-position起始位置从border外边缘开始显示背景图片
- content-box，决定background-position起始位置从content外边缘（即padding内边缘）开始显示背景图片
background-clip:border-box || padding-box || content-box，用来定义背景图像的裁剪区域
- border-box，默认值，决定元素背景图像从border区域向外裁剪
- padding-box，决定元素背景图像从paddingr区域向外裁剪
- content-box，决定元素背景图像从content区域向外裁剪
background-size:auto || length || percentage || cover || contain，用来指定背景图片的尺寸
auto，默认值，将保持背景图片的原始高度和宽度
length，取具体的数值作为背景图片的大小
percentage，值为0~100%，其值是相对于元素的宽度进行计算
cover，将背景图片放大，以适合铺满整个容器
contain，保持背景图片本身的宽高比例，将背景图片缩放宽度或高度正好适应所定义的容器区域
background: url(abc.png) 0 0 no-repeat;表示某个元素设置了一个abc.png的没有偏移的不重复的背景

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

background-size的作用是用来指定背景图片的尺寸
background-size兼容性通过查询如下图
background-size兼容性
background-size常用的值如下
- auto，默认值，将保持背景图片的原始高度和宽度
- length，取具体的数值作为背景图片的大小
- percentage，值为0~100%，其值是相对于元素的宽度进行计算（取值为length或percentage，只设置一个值时，这个值指定了背景图片的宽度，第二个值相当于auto）
- cover，将背景图片放大，以适合铺满整个容器
- contain，保持背景图片本身的宽高比例，将背景图片缩放宽度或高度正好适应所定义的容器区域
比如如下代码

<!doctype html>
<html>
   <head>
       <meta charset="utf-8"/>
       <title>background-size测试</title>
       <style>
           .test{
               width: 600px;
               height: 600px;
               border: 1px solid red;
               background: url(img/lufei.jpg) center no-repeat;
               background-size: auto;/*测试*/
           }
       </style>
   </head>
   <body>
       <div class="test"></div>
   </body>
</html>

值为auto时效果图如下

background-size值为auto效果图
值为length（500px 300px）时效果图如下

background-size值为length效果图
值为百分数（80% 80%）时，此时图片高宽是相对于元素的高宽的百分数，即60080%=480px,60080%=480px
background-size值为percentate效果图
值为cover时效果图如下

background-size值为cover效果图
值为contain时效果图如下

background-size值为contain效果图

六、如何让一个div水平居中？如何让图片水平居中？

通过div{margin:0 auto;}可以使div水平居中

<!doctype html>
<html>
   <head>
       <meta charset="utf-8"/>
       <title>水平居中</title>
       <style>
           .test{
               width: 200px;
               height: 200px;
               background-color: red;
               margin: 0 auto;
           }
       </style>
   </head>
   <body>
       <div class="test"></div>
   </body>
</html>

效果图如下

div水平居中

通过在图片的父元素中设置E{text-align:center;}可以使图片水平居中

<!doctype html>
<html>
   <head>
       <meta charset="utf-8"/>
       <title>图片水平居中</title>
       <style>
           .test{
               width: 600px;
               height: 600px;
               text-align: center;
               border: 1px solid red;
               margin: 0 auto;
           }
       </style>
   </head>
   <body>
       <div class="test">
           <img src="img/lufei.jpg" alt="路飞">
       </div>
   </body>
</html>

效果图如下

图片居中水平图

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

通过opacity属性可以设置元素透明度
语法为opacity:alphavalue || inherit，alphavalue取值为0~1任意浮点数，其中1表示完全不透明，0表示完全透明，比如

<!doctype html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>opacity属性</title>
   <style>
       .test{
           width: 200px;
           height: 200px;
           background-color: red;
           opacity: 0.4;
           margin: 0 auto;
       }
   </style>
</head>
<body>
   <div class="test"></div>
</body>
</html>

效果图如下

opacity效果图

opacity兼容性通过查询如下图

opacity兼容性

八、opacity和rgba都能设置透明，有什么区别？

opacity是对整个元素设置不透明属性，而RGBA只对元素的背景色设置不透明
opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性

<!doctype html>
<html>
 <head>
     <meta charset="utf-8"/>
     <title>水平居中</title>
     <style>
         .opacity{
             width: 200px;
             height: 200px;
             background-color: red;
             border: 5px solid black;
             opacity: 0.4;
             margin: 0 auto;
             margin-bottom: 50px;
             text-align: center;
         }
         .rgba{
             width: 200px;
             height: 200px;
             background:rgba(255, 0, 0, 0.4);;
             border: 5px solid black;
             margin: 0 auto;
             text-align: center;
         }
     </style>
 </head>
 <body>
     <div class="opacity">opacity</div>
     <div class="rgba">rgba</div>
 </body>
</html>

效果图

opacity和rgba的效果图