CSS_11_元素的隐藏、显示与溢出

最新推荐文章于 2024-07-16 12:36:21 发布

M r.J

最新推荐文章于 2024-07-16 12:36:21 发布

阅读量430

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43196061/article/details/87904899

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

元素的隐藏、显示与溢出

隐藏

`display:none;`

元素隐藏不等于删除~~,元素不占据位置。~~

`visibility:hidden`

元素隐藏，但是隐藏的元素仍占据位置。

显示

display:block

block除了可以转化为块级元素之外，还有显示的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移动显示二维码</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
            line-height: 100px;
            position: relative;
        }
        img {
            position: absolute;
            left: 100px;
            top: 0;
            display: none;
        }
        div:hover img {
            display: block;
        }
    </style>

</head>
<body>
<div>
    <span>二维码</span>
    <img src="../images/二维码.png" alt="">
</div>
</body>
</html>

溢出

overflow溢出，检索或者设置当对象的内容超过其指定高度及宽度时的管理

属性值	描述
visible	取消溢出处理
auto	超出自动显示滚动条，不超出不显示滚动条
hidden	不显示超过对象尺寸，超出的部分隐藏掉
scroll	不管是否有超出内容，总是显示滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>溢出效果</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*overflow: auto; 滚动条*/
            /*overflow: hidden; 不显示超出的尺寸*/
            /*overflow: visible; 取消溢出效果*/
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div>
        <span>今日新闻手动阀凤姐欧威伽伽</span>
        <span>今日新闻手动阀凤姐欧威伽伽</span>
        <span>今日新闻手动阀凤姐欧威伽伽</span>
        <span>今日新闻手动阀凤姐欧威伽伽</span>
        <span>今日新闻手动阀凤姐欧威伽伽</span>
        <span>今日新闻手动阀凤姐欧威伽伽</span>
        <span>今日新闻手动阀凤姐欧威伽伽</span>
        <span>今日新闻手动阀凤姐欧威伽伽</span>
    </div>
</body>
</html>

M r.J

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS_11_元素的隐藏、显示与溢出

元素的隐藏、显示与溢出隐藏display:none;元素隐藏不等于删除,元素不占据位置。visibility:hidden元素隐藏，但是隐藏的元素仍占据位置。显示display:blockblock除了可以转化为块级元素之外，还有显示的功能。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta...
复制链接

扫一扫

专栏目录