前端学习：元素的显示与隐藏、滤镜及calc函数

最新推荐文章于 2022-08-08 19:01:38 发布

real_laugh

最新推荐文章于 2022-08-08 19:01:38 发布

阅读量513

点赞数

文章标签：前端学习 css

本文链接：https://blog.csdn.net/real_laugh/article/details/123185053

版权

类似网站广告，当我们点击关闭就不见了，但是重新刷新页面，就会重新出现，这些涉及到了元素的显示与隐藏。
display属性：用于设置一个元素应如何显示。
display: none; 隐藏对象
display: block; 除了转换为块级元素意外，同时还有显示元素的意思。
display隐藏元素后，不再占有原来的位置。

<!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>display</title>
    <style>
        .peiqi {
            /* 隐藏元素，并且不再占有原来的位置 */
            display: none;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .qiaozhi {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="peiqi">佩奇</div>
    <div class="qiaozhi">乔治</div>
</body>

</html>

效果图：

visibility属性：用于指定一个元素应可见还是隐藏。
visibility: visible; 元素可视
visibility: hidden; 元素隐藏
visibility隐藏元素后，继续占有原来的位置。

overflow属性：指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么。
overflow: 属性值;
属性值有：
visible:不剪切内容，也不添加滚动条。(默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
hidden:不显示超过对象尺寸的内容。
scroll:总是显示滚动条。

<!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>overflow</title>
    <style>
        div {
            display: inline-block;
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }

        .visible {
            overflow: visible;
        }

        .auto {
            overflow: auto;
        }

        .hidden {
            overflow: hidden;
        }

        .scroll {
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div class="visible">
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
        visible:不剪切内容，也不添加滚动条。(默认值)
    </div>
    <div class="auto">
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
        auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
    </div>
    <div class="hidden">
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
        hidden:不显示超过对象尺寸的内容。
    </div>
    <div class="scroll">
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
        scroll:总是显示滚动条。
    </div>
</body>

</html>

效果图：

滤镜filter：filter属性将模糊或颜色偏移等图形效果应用于元素。
语法：
filter: 函数();
如：filter: blur(5px); blur模糊处理，数值越大越模糊。

<!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>CSS3滤镜</title>
    <style>
        img {
            filter: blur(2px);
        }

        img:hover {
            /* 鼠标放在该元素上，将其还原 */
            filter: blur(0);
        }
    </style>
</head>

<body>
    <img src="8.image/2.png" alt="">
</body>

</html>

效果图：

calc函数可以在声明CSS属性时执行一些计算。
如：width: calc(100% - 80px);
注：符号(+、-、*、/)两边的空格是必须的。

<!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>calc函数</title>
    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }

        .son {
            /* 子盒子永远比父盒子小30px */
            width: calc(100% - 30px);
            height: 50px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

real_laugh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习：元素的显示与隐藏、滤镜及calc函数

类似网站广告，当我们点击关闭就不见了，但是重新刷新页面，就会重新出现，这些涉及到了元素的显示与隐藏。display属性：用于设置一个元素应如何显示。 display: none; 隐藏对象 display: block; 除了转换为块级元素意外，同时还有显示元素的意思。display隐藏元素后，不再占有原来的位置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...
复制链接

扫一扫