CSS常见技巧


啊啊啊啊,要开始看论文了,感觉时间都不够用,好忧伤。


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

  • CSS Sprite(雪碧图|精灵图)是指把多个icon合并成一张大图,从而减少你的网站的HTTP请求数量,极大的提高了页面的性能,防止造成页面卡顿。雪碧图使用CSS 的background-img、background-repeat和background-position等属性渲染,实现了精准的定位。图片是在CSS中定义,不是img标签。它适用于一些内容不变的小图片。
    举个例子。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="Edge,chrome=1" />
        <title>CSS sprites</title>
        <style>
        .icon{
            width: 50px;
            height: 50px;   
            background: url(http://static.360buyimg.com/devfe/toolbar/1.0.0/css/i/toolbars.png) 0 0 no-repeat; 
            border: 1px solid;
        }
        .s1{
            
        }
        .s2{
            background-position: 0px -40px;
        }
        .s3{
            background-position: 0px -91px;
        }
        .s4{
            background-position: 0px -144px;
        }
        </style>
    </head>
    <body>
        <div class="icon s1"></div>
        <div class="icon s2"></div>
        <div class="icon s3"></div> 
        <div class="icon s4"></div> 
    </body>
</html>
效果图
  • 雪碧图在线合成工具
    国外的雪碧图在线合成工具为CSS SPRITES GENERATOR
    它的优点是可以设置属性,自动合成,但是不能批量操作。
    图片在线合并
  • 还有一种减少网络请求的方法是把图片转换成base64的字符串,直接把上面url里面的链接换成转化后的字符串就行。这适用于对网页实时性比较严格的时候,但是这样CSS会变得比较大,所以图片一定要非常小。

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

  • img标签是html结构当中的一部分;而background-img是CSS的一种样式,它在CSS当中定义。
  • img适用于页面上内容会变化,图片是和内容相关的情况,比如说鼠标点击之后会跳转;而background-img适用于页面上固定不变的内容,所有的人看到的都一样的情况,比如说图标。

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

  • title属性
    title是为该属性的元素提供建议性的信息,它可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。当鼠标放置在选定元素时,大部分可视化浏览器会显示title的提示信息。
    title属性用途之一就是为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的的时候。还有一个用处就是为图像提供额外的说明信息,比如日期等信息。
  • alt属性
    alt属性只能用在img、area和input元素中,它是为了给那些不能看到文档中图像(比如下载失败)的浏览者提供文字说明信息,在图片的位置显示内容。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>alt和title的区别</title>
    <style>
    img{
        width: 400px;
        height: 450px;
    }
    </style>
</head>
<body>
    [站外图片上传中……(2)]
    [站外图片上传中……(3)]
</body>
</html>
结果

title是鼠标放置在图片上显示的内容,alt是图片无法显示时的提示说明。

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

  • 这里background的属性值含义依次为背景图片(括号里面是图片的地址)、坐标(X轴、Y轴)、是否要重复(当图片小到不满足填满整个容器时,会默认重复显示图片,直到填满容器为止。)。
  • 关于定位这里要再说明几点:
    • 这里的X轴,向右延伸是负值;Y轴向下延伸是负值。
    • 如果坐标只写了一个值,默认就是X方向的;那么Y轴方向就是默认居中对齐(center)。
    • XY方向也可以用“left、right、top、bottom、center”来实现定位。其中,center表示居中对齐,其他的表示背景图片相对于容器的左右上下方向对齐。
    • XY坐标除了可以用数字表示,还可以用百分比表示。用百分比的算法是:
      X:(容器的宽度-图片的宽度)乘以(X方向的百分数)
      Y:(容器的高度-图片的高度)乘以(Y方向的百分数)
  • 回到题目当中,它的意思把abc.png作为背景图,垂直和水平方向上的坐标为0px,0px,即位置不产生偏移,在父容器的左上方,并且图片不重复。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>背景图片</title>
<style>
.img-wrap{
    width: 250px;
    height: 250px;
    border: 1px solid;
    background: url(../img/dog.gif)  0 0 no-repeat; 
</style>
</head>
<body>
    <div class="img-wrap"></div> 
</body>
</html>
效果图

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

  • background-size可以规定背景图片的尺寸大小。
    Can I use上查到的兼容性为:
    background-size兼容性
  • 常用的值有:
常用的值 含义
length(数值) 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
percentage(百分比) 以父元素的百分比来设置背景图像的宽度和高度。第一个值用来设置宽度,第二个值用来设置高度。如果只设置一个值,那么第二个值会被设置为 "auto"。
cover 把背景图像扩大到足够大,以使背景图像完全覆盖背景区域。但图片可能显示不全。
contain 不管图片多大,容器都能够包裹图片,虽然容器可能会有空白。
auto 以背景图片的比例来缩放背景图片。

举例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
        <title>background-size</title>
        <style>
        .img{
            width: 300px;
            height: 350px;
            border: 1px solid;
            background: url(../img/girl.jpg) no-repeat;
            display: inline-block;
        }
        .length{
            background-size: 80px;
        }
        .percentage{
            background-size: 50%;
        }
        .cover{
            background-size: cover;
        }
        .contain{
            background-size: contain;
        }
        </style>
    </head>
    <body>
    <div class=" img length"></div>
    <div class="img percentage"></div>
    <div class="img cover"></div>
    <div class="img contain"></div>
    </body>
</html>
效果对比
  • 多重背景
    设置多重背景,可以设置用逗号分隔的多个值。举个例子。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
        <title>多重背景</title>
        <style>
        div{
            width: 500px;
            height: 550px;
            border: 1px solid;
            background: url(../img/dog.gif),url(../img/girl.jpg);
            background-repeat: no-repeat, no-repeat;
            background-position: 0 0, top;
            background-size: 40%,contain;
        }
    </style>
    </head>
    <body>
    <div></div> 
    </body>
</html>
效果

六.如何让一个div水平居中?如何让图片水平居中?

  • div水平居中(块级元素水平居中)
    div是块级元素,要使它水平居中,让它的margin-left等于margin-right就可以。
  • 图片水平居中(行内元素水平居中)
    图片是行内元素,要使它水平居中,让父容器的块级元素写为text-align: center,它的作用就是让里面的行内元素相对于自己的父容器居中。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>水平居中</title>
    <style>
        .box1{
            border: 1px solid;
            width: 500px;
            height: 500px;
            text-align: center;
                        display: table-cell;
            vertical-align: middle;  /* 使用表格元素,使它垂直方向也居中*/
        }
        .box2{
            width: 50px;
            height: 50px;
            background: pink;
            margin-left: auto;
            margin-right: auto;    /*也可以写成margin: 0 auto;*/
        }
        </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        [站外图片上传中……(4)]
    </div>
    
</body>
</html>
水平垂直居中

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

透明分为背景图透明和整体透明。比如说,如果让背景图片设置透明度,鼠标点击会变白;整体透明的话,比如说设置div透明,里面包含所有东西会透明。透明有两种方法设置。

  • rgba:rgba(red, green, blue, alpha)
    alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。
  • opacity:0~1
    opacity属性也可以设置一个元素的透明度。


    rgba兼容性

    opacity兼容性

八.opacity和 rgba都能设置透明,有什么区别?

opacity属性设置透明,会使得这个元素内所有的内容都是透明的,因为opacity会继承父元素的 opacity 属性。而rgba设置的元素的后代元素不会继承不透明属性,只是针对自己本身有效,而无法使内部的所有元素透明。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>opacity与rgba</title>
  <style>
  div{
  width: 500px;
  height: 500px;
  border: 1px solid #999;
  text-align: center;
  display: inline-block;
}
.opacity{
   background: red;
   opacity: 0.3;
}
.rgba{
  background:rgba(255,0,0,0.3);
}
  </style>
</head>
<body>
  <div class="opacity">
    <span>我是opacity设置的透明度。</span>
    [站外图片上传中……(5)]
  </div>
  <div class="rgba">
    <span>我是rgba设置的透明度。</span>
    [站外图片上传中……(6)]
  </div>
</body>
</html>
opacity与rgba对比

九.代码

  1. 使用CSS Sprite 把如下6张图标图片合并成一张图片,做出如下效果, 当 hover 时背景变色。








    效果预览

  2. 使用字体图标(如 iconfont, 查找->加入购物车->下载 demofortawesome 或者fontello)实现上例效果。
    效果预览
    补充:上面的方法使用的还是图片的方法,这里再另外补充了一下字体图标的方法。
    预览效果
    Github

  3. 使用css border实现如下三角形


    效果预览

相关代码Github地址
使用border、border-radius等还可以设计出许多形状,有兴趣可以自己试试。

推荐阅读更多精彩内容

  • 一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 1、css sprite是一种图片处理方法,就是将...
    鸿鹄飞天阅读 44评论 0 0
  • 一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite把多个背景图片合成为一张,通...
    dengpan阅读 69评论 0 0
  • 课程目标 熟悉常见的样式写法,如背景图片、居中、透明等 学习建议 问答题一定要动手写 demo,否则学习效果只能达...
    饥人谷_江君阅读 171评论 0 1
  • 1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧图是指将网站上的图标合成在一张图片上,用...
    王康_Wang阅读 31评论 1 0
  • 1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS Sprite 是一种 CSS 图像合并技术...
    饥人谷_沈梦圆阅读 61评论 0 0