css常见技巧

作者: ahong_吴 | 来源:发表于2016-07-23 12:20 被阅读29次

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

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

雪碧图是：把一些小图片、小图标合成在一张图上，然后通过background-position控制窗口偏移来显示每个图片、图标。

利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因。
提高了网页的制作效率。只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。
维护起来更加方便。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>雪碧图</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background:url(http://imgsrc.baidu.com/forum/w%3D580/sign=2960b6a27e094b36db921be593cd7c00/9d3cd42a2834349b1bf626f8c1ea15ce37d3bee8.jpg) no-repeat;
      border:1px solid;
    }

    .a1{

    }
    .a2{
      background-position: 0px -215px;
    }
    .a3{
      background-position: 0px -420px;
    }
  </style>
</head>
<body>
  <div class="a1"></div>
  <div class="a2"></div>
  <div class="a3"></div>
</body>
</html>

Paste_Image.png

另外，图片转base64编码放在url里面，也是减少网页的http请求的一种方法。

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

<img>是HTML标签，css背景background-image是css属性。
如果一张图片是网页内容的一部分，就该用<img>，否则就建议用 CSS 背景图。
网站logo使用<img>利于seo优化。

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

title：
图片正常显示的说明文字
链接上的说明文字
alt：
是图片无法显示时的说明文字

Paste_Image.png

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

ccs里面添加一个图片背景，偏移为o，图片不重复。
background: url(abc.png)adc.png图片做css背景图片。
0 0代表background-position的值，表示背景图的定位，分别是水平垂直偏移。
no-repeat图片不重复。

扩展：
url为background-image的值，表示背景图片的URL。
no-repeat为background-repeat的值，可使用的值有repeat、no-repeat、repeat-x、repeat-y、inherit。分别表示水平垂直重复、不重复、仅水平重复、仅垂直重复、继承自父辈元素。

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

background-size作用是控制图片的大小。

Paste_Image.png

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .img{
      display: inline-block;
      width:300px;
      height: 300px;
      border: 1px solid #ccc;
      background:url(http://ent.southcn.com/8/images/attachement/jpg/site4/20160713/80/5594612692356320684.jpg) 0 0 no-repeat;
    }
    .p1{
      background-size: 150px;
    }
    .p2{
      background-size: 50%;
    }
    .p3{
      background-size: cover;
    }
    .p4{
      background-size:contain;
    }
  </style>
</head>

<body>
  <div class="img p1"></div>
  <div class="img p2"></div>
  <div class="img p3"></div>
  <div class="img p4"></div>
</body>
</html>

Paste_Image.png

浏览器兼容：

Paste_Image.png

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

让 div（块级元素）水平居中：margin: 0 auto;
让 img（行内元素）水平居中:text-align:center;

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .wrap{
      width: 500px;
      height: 500px;
      border: 1px solid;
      text-align: center;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<div class="wrap">
  ![范特西](https://img.haomeiwen.com/i2397444/7d73ca82efad0659.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>
</body>
</htnl>