CSS常用技巧

2016-07-29 本文已影响0人老虎爱吃母鸡

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兼容性
- <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
  - cover
    图片会覆盖整个背景区域,不会留下空白
  - contain
    图片被包裹在背景区域里，有可能会留下空白
    
    cover和contain
  - <length>
    为图片强制指定宽度和长度，若只有一个值则另一个值为auto
  - <percentage>
    相对于背景区域宽度和高度的百分比，若只有一个值则另一个为auto
如何让一个div水平居中？如何让图片水平居中
- div居中
  - 如果div是固定宽度，可以直接设置margin: 0 auto;
  - 如果div是不定宽度
    - 可以对div设置display: inline-block;，然后对父元素设置text-align: center;
    - 或者div设置display: table;，然后设置margin: 0 auto;
- 图片水平居中
  直接text-align: center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            border: 1px solid;
        }

        .box1 {
            width: 400px;
            margin: 20px auto;
        }

        .box2 {
            display: table;
            margin: 20px auto;
        }

        .box3 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box1">我是固定宽度的div</div>
    <div class="box2">我是用display: table;设置的，我的宽度是内容宽度</div>
    <div class="box3">
        <img src="mia.jpg" alt="">
    </div>
</body>
</html>

居中

如何设置元素透明? 兼容性？
通过opacity: 0;不透明度这个属性来设置，它的属性值1表示完全不同，0表示完全透明，这个属性在IE8及以下只有部分支持
opacity兼容性
opacity和rgba都能设置透明，有什么区别
- opacity是对元素设置透明度，可以对任何元素设置
- rgba是通过颜色alpha通道来设置颜色的透明，只能针对颜色，例如背景颜色，字体颜色，边框颜色等颜色属性

CSS常用技巧

猜你喜欢

热点阅读