全部栏目

首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置：首页9-2.CSS常见技巧

9-2.CSS常见技巧

2024-12-12 来源：哗拓教育

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .icon{
        border:1px solid;
        height:100px;
        width: 100px;
        
/i/toolbars.png) 0 0 no-repeat;
    }
    .div1{
        background-position: 36px 3px;
        height: 50px;
    }
    .div2{
        background-position: 76px 32px;
    }
</style>
</head>
<body>
    <div class="icon div1">
        <a href="#">小车</a>
    </div>
    <div class="icon div2"></div>
</body>
</html>
Paste_Image.png
  • 雪碧图在线合成工具
    国外的雪碧图在线合成工具
    优点：自动合成，可以设置属性。缺点：文件必须一个个地去选择导入，不能够批量导入
    参考：
  • 还有一种减少网络请求的方法是把图片转换成base64的字符串，它适用比较小的图片，对网页实时性有要求的

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

  • img是html结构当中的一部分；background-image是css中的一种样式，它在css中定义。
  • 对于固定不变的内容，每个人看到的都是一样的情况，比如说图标，这时可以使用背景图片。对于一些可变的内容（每个用户看到的不一样，或者不同时间打开网站时看到的不一样），图片和内容是相关的，这时用img。
    Paste_Image.png

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

  • alt属性
    替换文字（alt text）是用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息，它在图片的位置显示内容。所以替换文字是用来替代图像而不是提供额外说明文字的。它只能用在img、area和input元素中（包括applet元素）
  • title属性
    title作为属性时，用来为元素提供额外说明信息。可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签，但是并不是必须的。当鼠标放置在选定元素时，大部分可视化浏览器会显示title的提示信息。title属性的优先级高于alt text。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <img 
/1c901ad7/57a01cbfNacd3a044.jpg" title="省油的，环保的">
    <img 
/
1c901ad7/57a01cbfNacd3a044.jpg" alt="汽车">
</body>
</html>
Paste_Image.png

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

1.这里是设置背景图片，url里面是背景图片的地址，可以是绝对地址或相对地址；"0 0"说明背景图的位置相对于元素的左上角向x轴和y轴的偏移量都是0；no-repeat是指背景图片在水平方向和垂直方向都不重复。
2.背景图片定位


Paste_Image.png

①设置两个值，前面的是相对x轴方向定位(水平)，后面的相对于y轴方向定位(垂直)。如果只设置一个值，这个值是默认是在x轴方向的定位，y轴方向默认的是居中对齐
②原点是不会动的，移动的是图片 X坐标为正则图片左上角向右平移，为负则图片左上角向左平移；Y坐标为正则图片左上角向下平移，为负则左上角向上平移
③x y也可以用“top、bottom、left、right、center”这五个对齐方式来表示。x y等于center的时候表示居中对齐，其他的表示背景图片相对于在容器上下左右对齐。
④X Y坐标除了可以用数字表示，还可以用百分比表示。用百分比的算法是：
X：（容器的宽度-图片的宽度）乘以（X方向的百分数）
Y：（容器的高度-图片的高度）乘以（Y方向的百分数）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    div{
        border: 1px solid;
        width: 200px;
        height: 200px;
        
/pic/item/5366d0160924ab188229104f33fae6cd7b890b8e.jpg) no-repeat;
        background-size: 100px 100px;
        /*(200px-100px)*100%=100px
        (200px-100px)*10%=10px*/
        background-position: 100% 10%;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>
Paste_Image.png

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

  • background-size作用是设置背景图片尺寸大小
    用查看兼容性
    注意：ie8不支持，只有ie9以上才支持
    Paste_Image.png

  • 常用的值


    Paste_Image.png 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .img{
        display: inline-block;
        border:1px solid;
        width: 300px;
        height: 300px;
        
/pic/item/38dbb6fd5266d01622b0017d9f2bd40735fa353d.jpg) 0 0 no-repeat;
    }
    .test1{
        background-size: 50px 50px;
    }
    .test2{
        background-size: 50%;
    }
    .test3{
        background-size: cover;
    }
    .test4{
        background-size: contain;
    }
</style>
</head>
<body>
    <div class="img test1"></div>
    <div class="img test2"></div>
    <div class="img test3"></div>
    <div class="img test4"></div>
</body>
</html>
Paste_Image.png
  • 多重背景
    设置多重背景，可以设置用逗号分隔的多个值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    div{
        border: 1px solid;
        width: 400px;
        height: 400px;
        
/38dbb6fd5266d01622b0017d9f2bd40735fa353d.jpg),

        background-repeat: no-repeat;
        background-size: 50px 50px,50% 50%;
        background-position: 50px,right bottom;
        background-color: #ccc;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>
Paste_Image.png

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

1.div是块块级元素，要让它水平居中，需要让它外边距左右相等，设置为
div{margin：0 auto；}
2.图片是行内元素，要让它水平居中，需要让它的父容器为块级元素且设为

text-align:center;它的作用是让里面的行内元素相对于自己的父容器居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    div{
        border:1px solid;
        width: 400px;
        height: 400px;
        margin:0 auto;
        text-align: center;
        display:block;
    }
    span{
        display: table-cell;
        border: 1px solid red;
        width: 200px;
        height: 200px;
        vertical-align: middle;
    }
    img{
        width:100px;
        height: 100px;
    }
</style>
</head>
<body>
    <div>
        <span>
            <img 
/pic/item/38dbb6fd5266d01622b0017d9f2bd40735fa353d.jpg" alt="小狗">
        </span>
    </div>
</body>
</html>
Paste_Image.png

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

  1. 用opacity属性可以设置元素透明度。透明度在0~1之间，0表示完全透明，1表示完全不透明。

  2. 透明分为背景图透明和整体透明。整体透明的话，比如说设置div的透明度，它里面包含所有东西会透明，如果给背景图设置透明度的话，它只影响背景图。
    ie8是部分支持


    Paste_Image.png

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

  1. rgba(r,g,b,a)。rgb表示的是颜色;A：Alpha透明度,取值0~1之间。
  2. rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。
    opacity会继承父元素的 opacity 属性，而rgba()设置的元素的后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    div{
        border: 1px solid blue;
        width: 200px;
        height: 200px;
        text-align: center;
        display: inline-block;
    }
    .opacity{
        background: red;
        opacity: 0.5;
    }
    .rgba{
        background:rgba(255,0,0,0.3);
    }
</style>
</head>
<body>
   <div class="opacity">这是opacity的测试</div>
    <div class="rgba">这是rgba的测试</div>
</body>
</html>
Paste_Image.png

可以看出设置opacity不仅改变背景颜色的透明度，还改变了它里面的内容，边框透明度。设置rgba只改变了背景色的透明度，它的内部的内容，边框都不变。
显示全文