CSS常用技巧

• CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
  CSS Sprite值的是把多个icon图片放在一张图里面，通过background-position这个属性调整背景图片的位置来达到预期效果
  1. 服务器上都每一个资源都需要加载，图片也是如此，如果有许多不同的icon，就需要有多次的http请求，如果合成一张图片就可以减少http请求的次数，从而提高加载速度
  2. 而且多张合成一张图片的大小小于这些图片的总和，所以也就减少了http请求的加载时间
• img标签和CSS背景使用图片在使用场景上有何区别
  • 是否使用img标签取决于图片是否是内容的一部分，例如网站的logo就是内容的一部分就需要使用image标签
  • 还有img常用于需要经常更换的内容，而CSS的背景图片作为背景是不需要经常变动的

CSS Sprite

• title和alt属性分别有什么作用
  • title是一个全局属性，主要是为元素增加一个小提示或者注释，当鼠标hover到这个有title属性的元素时，title的值会在鼠标的旁边显示出来
    
    

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

    alt
• background: url(abc.png) 0 0 no-repeat;这句话是什么意思
  这句话是一个background属性的shorthand，其中的值是background-image、bakground-position、background-repeat三个属性的简写
  • background-image可以为背景引入背景图片，接受的值是一个相对URL地址或绝对URL地址
  • background-position可以指定背景图片的初始位置，其中0 0表示的是左上角
  • background-repeat表示的是背景图片是否重复，默认的值是repeat

div {
            width: 1000px;
            height: 1000px;
            background-image: url(mia.jpg);
        }

img

• background-size有什么作用? 兼容性如何? 常用的值是?
  • background-size的作用是指定背景图片的大小
  • background-size是CSS3的属性，在IE6、7、8不支持
    
    

    background-size兼容性
  • = [ | | auto ]{1,2} | cover | contain
    • cover
      图片会覆盖整个背景区域,不会留下空白

    • contain
      图片被包裹在背景区域里，有可能会留下空白

      
      
      

      cover和contain
    • 
      为图片强制指定宽度和长度，若只有一个值则另一个值为auto
    • 
      相对于背景区域宽度和高度的百分比，若只有一个值则另一个为auto
• 如何让一个div水平居中？如何让图片水平居中
  • div居中
    • 如果div是固定宽度，可以直接设置margin: 0 auto;
    • 如果div是不定宽度
      • 可以对div设置display: inline-block;，然后对父元素设置text-align: center;
      • 或者div设置display: table;，然后设置margin: 0 auto;
  • 图片水平居中
    直接text-align: center;

    
    
    


    
我是固定宽度的div
    
我是用display: table;设置的，我的宽度是内容宽度
    

        
    

居中

• 如何设置元素透明? 兼容性？
  通过opacity: 0;不透明度这个属性来设置，它的属性值1表示完全不同，0表示完全透明，这个属性在IE8及以下只有部分支持
  
  

  opacity兼容性
• opacity和rgba都能设置透明，有什么区别
  • opacity是对元素设置透明度，可以对任何元素设置
  • rgba是通过颜色alpha通道来设置颜色的透明，只能针对颜色，例如背景颜色，字体颜色，边框颜色等颜色属性