CSS常见技巧

作者: 饥人谷_张世钧 | 来源:发表于2016-08-14 19:23 被阅读19次

CSS常见技巧
CSS - 常见技巧
CSS常见技巧
CSS常见技巧
CSS常见技巧
CSS常见技巧
CSS常见技巧
css常见技巧
css常见技巧
CSS常见技巧

css Sprite(雪碧图丨精灵图)指什么？有什么作用

雪碧图就是把一些小图片利用软件合并到一张图片上，利用position的方法定位。
可以减少网络请求，加快网页显示速度。

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

在不用有点击作用、只是修饰作用并且不长更换的使用背景图片。
对于需要和用户有交互效果的，或者点击有链接效果的使用img

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

title是鼠标滑过选定元素（停留）时显示的描述性文字，可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。

alt是选定元素不能显示时显示的文字，它可以比title更明确地告诉使用者不能显示的是什么内容，alt是必要的属性，alt属性只能用在img、area和input元素中。

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

是用url引用图片abc.png作为背景，即用图片作为背景。
0 0是图片的偏移数，第一个0是X轴偏移量，第二个0是Y轴偏移量，0 0即是偏移量都为0。 no-repeat是不重复，repeat是重复，即引入一张图片是显示一张还是有序排列。

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

background-size：规定背景图像的尺寸。background-size:100px 100px; 设定背景图像尺寸宽高为100像素。宽高数值不能为负值。
常用的值：
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
cover：使背景图像比内容区域要大，完全填满内容区域，由于是完全填满，所以有些部分不可见
length：设置背景图像宽度和高度
percentage：以父元素的百分比来设置宽和高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height:200px;
            width:200px;
            background:url(奥运.jpg)0 0 no-repeat;
            background-size:contain;
            border:1px solid;
            margin: 10px;
            display: inline-block;
       }
        .div2{
            height:200px;
            width:200px;
            background:url(奥运.jpg)0 0 no-repeat;
            background-size:cover;
            border:1px solid;
            margin: 10px;
            display: inline-block;
       }
        .div3{
            height:200px;
            width:200px;
            background:url(奥运.jpg)0 0 no-repeat;
            background-size:190px;
            border:1px solid;
            margin: 10px;
            display: inline-block;
        }
        .first{
            height:300px;
            width:500px;
            background:url(奥运.jpg)0 0 no-repeat;
            background-size:200px 200px;
            border:1px solid;
            margin: 10px;
        }
        .div4{
            height:200px;
            width:200px;
            background:url(奥运.jpg)0 0 no-repeat;
            background-size:50% 50%;
            border:1px solid;
            margin-left:250px;
        }
    </style>
</head>
<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="first">
        <div class="div4">4</div>
    5</div>
</body>
</html>