投稿
  1. 极客之音首页

【CSS笔记】CSS背景、精灵图、轮廓、margin塌陷问题

飞熊 • • 未分类 • 阅读 229

有目标就不怕路远。年轻人．无论你现在身在何方．重要的是你将要向何处去。只有明确的目标才能助你成功。没有目标的航船．任何方向的风对他来说都是逆风。因此，再遥远的旅程，只要有目标．就不怕路远。没有目标，哪来的劲头？一车尔尼雷夫斯基

导读：本篇文章讲解 【CSS笔记】CSS背景、精灵图、轮廓、margin塌陷问题，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

目录

1.1、CSS背景

1.2、CSS精灵图

1.3、CSS轮廓

1.4、CSS边距塌陷问题

（1）垂直margin塌陷

（2）嵌套margin塌陷

（3）解决塌陷问题

1.1、CSS背景

【background-image】属性，设置背景图片，取值：url(图片地址)。

【background-repeat】属性，图片是否重复，取值：no-repeat不重复、repeat重复。

【background-position】属性，设置图片的位置，取值：left、right、center、top、middle、bottom。

【background-attachment】属性，设置图片和内容的依附方式，取值：fixed表示图片固定不动。

【background-color】属性，设置背景颜色。

【background-size】属性，设置背景铺满整个容器，取值：cover铺满整个容器。

上面这些属性，可以通过【background】属性简写，没有位置顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        #bg {
            margin: 20px;
            width: 200px;
            height: 200px;
            overflow-y: auto;
            border: 2px solid black;
            /* 背景图片 */
            background-image: url(./imgs/test.png);
            /* 不重复 */
            background-repeat: no-repeat;
            /* 右下角显示 */
            background-position: left bottom;
        }
    </style>
</head>
<body>
    <div id="bg">
        背景图片，内容滚动时候，背景图片不动
        背景图片，内容滚动时候，背景图片不动
        背景图片，内容滚动时候，背景图片不动
        背景图片，内容滚动时候，背景图片不动
        背景图片，内容滚动时候，背景图片不动
        背景图片，内容滚动时候，背景图片不动
        背景图片，内容滚动时候，背景图片不动
    </div>
</body>
</html>

运行效果：

【CSS笔记】CSS背景、精灵图、轮廓、margin塌陷问题

1.2、CSS精灵图

精灵图是指所有图标都在一个图片上面，然后使用的时候，只需要指定获取位置的图标即可显示。

【CSS笔记】CSS背景、精灵图、轮廓、margin塌陷问题

精灵图的显示，是通过【background-position】属性设置显示图标的位置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
    <style>
        body > div {
            width: 500px;
            height: 300px;
            padding: 20px;
            border: 2px solid black;
            overflow: auto;
        }
        div > div {
            width: 90px;
            height: 90px;
            border: 2px solid green;
            float: left;
            margin: 10px;
        }
        .box1 {
            background-image: url(./imgs/sprites.png);
            background-position: -170px 0px;
        }
        .box2 {
            background-image: url(./imgs/sprites.png);
            background-position: -182px -305px;
        }
        .box3 {
            background-image: url(./imgs/sprites.png);
            background-position: -260px 0px;
        }
        .box4 {
            background-image: url(./imgs/sprites.png);
            background-position: -185px -200px;
        }
    </style>
</head>

<body>
    <div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>

</html>

运行效果：

【CSS笔记】CSS背景、精灵图、轮廓、margin塌陷问题

1.3、CSS轮廓

轮廓是元素之外绘制的，它属于元素的一部分，所以不会改变元素的宽度和高度，轮廓可能会覆盖其他的元素。

【outline-style】属性，设置轮廓样式，取值：dotted点、dashed虚线、solid实线、double双实线、none无、hidden隐藏。

【outline-width】属性，设置轮廓线宽度。

【outline-color】属性，设置轮廓线颜色。

【outline】属性，是上面几个属性的简写形式，格式：【outline：width style color；】。

【outline-offset】属性，设置轮廓线和元素的间距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>outline</title>
    <style>
        div {
            width: 200px;
            margin: 40px;
            font-size: 30px;
            color: green;
            border: 2px solid blue;
        }
        .box1 {
            outline-style: dotted;
            outline-offset: 4px;
            outline-color: black;
            outline-width: 8px;
        }
        .box2 {
            outline-style: dashed;
            outline-offset: 4px;
            outline-width: 8px;
            outline-color: lightcoral;
        }
        .box3 {
            outline-style: double;
            outline-offset: 4px;
            outline-width: 8px;
            outline-color: cadetblue;
        }
        .box4 {
            outline-style: solid;
            outline-offset: 4px;
            outline-width: 8px;
            outline-color: red;
        }
        .box5 {
            outline: 8px solid red;
            outline-offset: 4px;
        }
    </style>
</head>
<body>
    <div class="box1">outline轮廓</div>
    <div class="box2">outline轮廓</div>
    <div class="box3">outline轮廓</div>
    <div class="box4">outline轮廓</div>
    <div class="box5">outline轮廓</div>
</body>
</html>

运行效果：

【CSS笔记】CSS背景、精灵图、轮廓、margin塌陷问题

1.4、CSS边距塌陷问题

CSS使用margin属性的时候，可能会出现垂直方向margin塌陷问题。塌陷问题分为两种情况，分别是：垂直margin塌陷、嵌套margin塌陷。

（1）垂直margin塌陷

垂直方向上，两个元素都使用了margin元素之后，浏览器只会选择最大的margin进行渲染。

【CSS笔记】CSS背景、精灵图、轮廓、margin塌陷问题

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin塌陷问题</title>
    <style>
        body {
            padding: 10px;
        }
        .box1 {
            width: 150px;
            height: 150px;
            background-color: cadetblue;
            margin-bottom: 30px;
        }
        .box2 {
            width: 150px;
            height: 150px;
            background-color: antiquewhite;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box1">前一个div元素</div>
    <div class="box2">下一个div元素</div>
</body>
</html>

（2）嵌套margin塌陷

嵌套元素之间，对子元素使用margin属性时候，会影响到父元素，从而使父元素和子元素一起发生位置偏移。

【CSS笔记】CSS背景、精灵图、轮廓、margin塌陷问题

 案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin塌陷问题</title>
    <style>
        body {
            padding: 10px;
        }
        .box1 {
            width: 150px;
            height: 150px;
            background-color: cadetblue;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            margin-top: 20px;
        }
        .box3 {
            height: 100px;
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <div class="box3">前一个div元素</div>
    <div class="box1">
        <div class="box2">子元素</div>
        父元素
    </div>
</body>
</html>

（3）解决塌陷问题

要解决嵌套margin塌陷问题，只需要给父元素设置【overflow：auto；】或者【overflow：hidden；】属性即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin塌陷问题</title>
    <style>
        body {
            padding: 10px;
        }
        .box1 {
            width: 150px;
            height: 150px;
            background-color: cadetblue;
            /* 解决塌陷问题 */
            overflow: auto;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            margin-top: 20px;
        }
        .box3 {
            height: 100px;
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <div class="box3">前一个div元素</div>
    <div class="box1">
        <div class="box2">子元素</div>
        父元素
    </div>
</body>
</html>

这篇文章主要介绍了CSS背景、精灵图、轮廓、margin塌陷问题。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/134671.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！