CSS常见技巧

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

CSS Sprite是指把多个icon合并成一张大图，然后利用css的背景定位来显示需要显示的图片部分，从而达到减少加载网页时对服务器的请求次数，提高页面的加载速度，减少鼠标滑过的一些bug等目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .pig{
            background: url(ps.png) 0 0 no-repeat;
            width: 45px;
            height: 45px;
            border:1px solid;
        }
        .pig1{
            background-position: 0px 0px;
        }
        .pig2{
            background-position: 0px -45px;
        }
    </style>
</head>
<body>
    <div class="pig pig1"></div>
    <div class="pig pig2"></div>
</body>
</html>

css sprite.png

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

<img>是HTML标签，是HTML结构的一部分。而CSS背景是CSS样式。
在网页加载过程中CSS背景会在网页结构完全加载完成之后才开始加载，<img>则会在家在过程中加载。
图片作为背景，如果加载失败，不会有图片的占位标记。

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

alt属性是在不能显示图像，窗体或applets时的用户代理，用来指定替换文字。编辑代码时使用alt属性是为了那些不能看到你文档中的图像的浏览者提供文字说明。替换文字是用来替代图像而不是提供额外文字说明的。
tilte属性为设置该属性的元素提供建议性信息。可以用在除了<base> <basefont> <head> <html> <meta> <param> <script> <title>之外的所有标签，但不是必须的。
总结来说alt属性是在图片加载失败时的替换语音，性质为替代。title属性则是为表达一些额外信息，性质为一种备注或注释。

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

background的属性设置依次为：
background-color：设置要使用的背景颜色
background-image：设置要使用的背景图片
background-repeat：设置如何重复背景图片
background-attachment：设置背景图片是否固定或者随着页面其余部分滚动
background-position：设置背景图片的位置，默认有两个值，如果只固定了一个值，则另一个值为50%
inherit:设置从父元素继承background属性的设置
所以题目的意思是把abc.png作为背景图片，位置为xpos0，ypos0，不重复绘制图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .test{
            background: url(1.jpg) 0 0;
            width: 500px;
            height: 500px;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="test"></div>
</body>
</html>

background.png

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

background-size指定背景图片的大小。常用的值：
length：设置图片的高度和宽度。第一个值为宽度，第二个为高度，如果只设置一个值则第二个值为auto
percentage：计算相对于背景定位区域的百分比。第一个值为宽度，第二个为高度，如果只设置一个值则第二个值为auto
cover：此时会保持图像的纵横比并将图像缩放成完全覆盖背景定位区域的最小大小。
contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .test{
            display: inline-block;
            background: url(1.jpg) 0 0 no-repeat;
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        .jpg1{
            background-size: 100px 100px;
        }
        .jpg2{
            background-size: 50% 50%; 
        }
        .jpg3{
            background-size: cover;
        }
        .jpg4{
            background-size: contain;
        }
    </style>
</head>
<body>
    <div class="test jpg1"></div>
    <div class="test jpg2"></div>
    <div class="test jpg3"></div>
    <div class="test jpg4"></div>
</body>
</html>

background-size.png

兼容性：IE9+, Firefox 4+, Opera, Chrome, 和 Safari 5+。

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

div水平居中：设置固定宽度，然后margin:0 auto
图片居中：<img>是行内元素，所以只有在父级元素中设置text-algin:center就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            background-color:gray; 
            width: 500px;
            border: 1px solid;
            margin:0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        ![](1.jpg)
    </div>
</body>
</html>

居中.png

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

透明有两种方法设置。
rgba：rgba(red, green, blue, alpha)。
opacity：0~1
rgba兼容性：

rgba兼容性.png

opacity兼容性：

opacity兼容性.png

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

opacity作用于元素以及元素内所有内容的透明度，而rgba只作用于元素的颜色或背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .opacity{
            display: inline-block;
            background-color:gray;
            width: 400px;
            height: 400px; 
            opacity: 0.5;
            border: 1px solid;
        }
        .rgba{
            display: inline-block;
            background-color:rgba(192,192,192,0.5);
            width: 400px;
            height: 400px; 
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="opacity">
        ![](1.jpg)
        这是针对opacity属性的测试
    </div>
    <div class="rgba">
        ![](1.jpg)
        这是针对rgba属性的测试
    </div>
</body>
</html>

透明设置.png

代码题

一.
代码题一
 在线预览一
二.
代码题二
 在线预览二
三.
代码题三
 在线预览三

本文版权归本人和饥人谷所有，转载请注明来源。

CSS常见技巧