CSS常见技巧

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

CSS雪碧图是指将网站上的图标合成在一张图片上，用background-position的方式加以应用，以减少页面请求的数量，使页面加载更快速。

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

CSS背景图常用于页面上不变的内容，而当页面上的图片内容需要经常变动或者有链接功能时使用img标签。

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

alt是当内容无法加载时显示的替代文本，title是当鼠标移动到超链接上时的说明文本。


Paste_Image.png

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

设置背景图片地址为abc.png，x轴方向偏移0，y轴方向偏移为0，不重复。

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

  • background-size具有调整背景图片大小的功能。
  • background-size的兼容性如下图：

Paste_Image.png

常用值：（举例中图片原本大小为595px449px）*

  • background-size:300px 100px，使背景图片长宽分别为300px和100px。

<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type="text/css">
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:300px 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>


 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-e980262694d37ddd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


- ```background-size:30% 50%```，使图片长宽分别为父元素长宽的30%和50%。
- ```
<!DOCTYPE html>
<html>
<head>
    <title>background-size</title>
    <style type="text/css">
        .div1 {
        background:url(image/cat.jpg) 0 0 no-repeat;
        width:650px;
        height:300px;
        border:1px solid #000;
        background-color:#ccc;
        background-size:30% 50%;
        }
    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
Paste_Image.png
  • background-size:contain，缩放图片以完全装入父元素，父元素可能出现留白。

<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type="text/css">
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:contain;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>


 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-874fc62ee15f65ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ```background-size:cover```，缩放背景图片以完全覆盖父元素，图片可能部分看不到。
- ```
<!DOCTYPE html>
<html>
<head>
    <title>background-size</title>
    <style type="text/css">
        .div1 {
        background:url(image/cat.jpg) 0 0 no-repeat;
        width:650px;
        height:300px;
        border:1px solid #000;
        background-color:#ccc;
        background-size:cover;
        }
    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
Paste_Image.png

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

i.
  • 若想使div水平居中，须给div一定宽度，margin左右设为auto:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div水平居中</title>
<style type="text/css">
.div1 {
width:600px;
height:400px;
border:1px solid #000;
background-color:#ccc;
margin:0 auto ;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>


 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-87dfb555072db708.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 给该```div```配置属性```display:inline-block;```并为其父元素添加样式```text-align:center```，亦可使```div```水平居中:
- ```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>div水平居中</title>
    <style type="text/css">
        body {
            text-align:center;
        }
        .div1 {
        width:600px;
        height:400px;
        border:1px solid #000;
        background-color:#f00;
        display:inline-block;
        }
    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
Paste_Image.png
ii.
  • 对于img元素，因为其属于行内元素，故可在其父元素上添加text-align:center样式即可实现水平居中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
<style>
body {
text-align:center;
}
</style>
</head>
<body>
<img src="image/cat.jpg">
</body>
</html>

 
 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-49f55e20b953e761.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 也可以将```img```元素添加```display:block; margin:0 auto; ```样式，同样可以达到效果:
- ```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>任务8</title>
    <style>
    img {
        display:block;
        margin:0 auto;
    }
    </style>
</head>
<body>
<img src="image/cat2.jpg">
</body>
</html>
Paste_Image.png
  • 如果将图片设置为背景图片，也可通过background-position:center的方式将图片设置成水品居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
<style>
.div1 {
background:url(image/cat2.jpg) 0 0 no-repeat;
background-position:center top; /top意指图片在垂直方向上向上对齐，亦可取center或bottom/
width:100%;
height:700px;
border:1px solid #000;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>


 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-9c9bbadf350bc3a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###7.如何设置元素透明？兼容性？
可用```opacity```属性设定元素的透明度，```opacity```取值为1（完全不透明）到0（完全透明）之间。
兼容性见下图：
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-5c300e0cc0395f0b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###8.```opacity```和 ```rgba```都能设置透明，有什么区别
当```opacity```属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，其子元素都会产生透明效果。
而```rgba```只是颜色的一个参数，并不会对其子元素产生影响。
举例：
- ```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>任务8</title>
    <style>
    .div1 {
        background-color:rgb(255,0,0);
        opacity:0.5;    
        height:100px;
        width:200px;
        }
    .div2 {
        background-color:rgba(255,0,0,0.5); 
        height:100px;
        width:200px;
    }
    </style>
</head>
<body>
<div class="div1">
    <h1>opacity</h1>
</div>
<div class="div2">
    <h1>rgba</h1>
</div>
</body>
</html>

效果：

Paste_Image.png

本教程版权归本人及饥人谷所有，转载请注明来源。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 9-2.CSS常见技巧
    一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 1、css sprite是一种图片处理方法，就是将...
    鸿鹄飞天阅读 433评论 0赞 0
  • 任务九~CSS常见技巧
    一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用？ CSS Sprite把多个背景图片合成为一张，通...
    dengpan阅读 341评论 0赞 0
  • css常见技巧
    一，CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 答：把小图标和背景图合并到一张图，通过backgr...
    kingBirds阅读 204评论 0赞 0
  • 巴菲特最佳拍档查理芒格《穷查理宝典》读书五得
    查理·芒格（Charlie Thomas Munger，1924年1月1日—）美国投资家，沃伦·巴菲特的黄金搭档，...
    墨客行阅读 710评论 1赞 6
  • 八正道
    八正道之“戒 ” 一、戒 1、正语——正当的语言，清净的口语行为。为了了解什么是正当的语言，需要先明白什么是不正当...
    小格格修行记阅读 568评论 0赞 1