CSS笔记(黑马程序员pink老师前端)显示与隐藏，精灵图，CSS三角

百变珍珑兽

已于 2023-09-07 14:05:26 修改

阅读量147

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css+js 文章标签：前端 css 笔记

于 2023-09-07 11:20:48 首次发布

本文链接：https://blog.csdn.net/qq_43701213/article/details/132707841

html+css+js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了CSS中的几种隐藏与显示元素的方法，如`display`和`visibility`属性的应用，以及精灵图技术用于优化图片加载。同时讨论了如何通过边框创建CSS三角效果，以及何时选择字体图标而非图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示与隐藏

display
display:none; 隐藏对象，隐藏后不再占有原来的位置
display:block; 转换为块级别元素，显示元素

visibility
visibility: hidden;隐藏，隐藏后继续占有原来的位置
visibility:visible;显示
visibility:inherit;可见性遗传自父元素

overflow
overflow: visible;默认状态，显示溢出的内容
overflow:hidden;隐藏溢出的内容
overflow:scroll;是否溢出都显示滚动条
overflow:auto;只在溢出时显示滚动条

精灵图（sprites）

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。通过移动background-position来实现效果。
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 60px;
            width: 60px;
            margin: 20px auto;
            background: url(index.webp) no-repeat -180px 0px;
        }

        .box2 {
            float: right;
            height: 135px;
            width: 240px;
            background: url(index.webp) no-repeat 0px -215px;

        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

在这里插入图片描述

总结:
1．如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图

CSS三角

盒子每一边的边框都是梯形的，盒子大小为0时，梯形上底(边框内边)也为0，所以两边会合并成三角形。
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 0px;
            width: 0px;
            border-top: red solid 30px;
            border-right: yellow solid 30px;
            border-bottom: blue solid 30px;
            border-left: green solid 30px;

        }

        .box2 {
            margin-top: 20px;
            height: 0px;
            width: 0px;
            border: transparent solid 30px;
            border-left-color: red;

        }

        .box3 {
            margin-top: 20px;
            height: 0px;
            width: 0px;
            border-top: transparent solid 60px;
            border-bottom: 0px;
            border-left: green solid 30px;

        }
    </style>
</head>

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

</body>

</html>