CSS属性：元素隐藏

最新推荐文章于 2024-05-15 09:32:44 发布

路飞小朋友

最新推荐文章于 2024-05-15 09:32:44 发布

阅读量266

点赞数 1

分类专栏： ★ CSS

本文链接：https://blog.csdn.net/wozhangyi/article/details/106962280

版权

★ CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

overflow 属性

处理超出范围的文本内容

常用属性值

visible 默认值，溢出内容不会被修剪，会呈现在元素框之外
hidden 不显示溢出的内容
scroll 滚动条来显示元素内溢出的内容，即使没有溢出也显示滚动条
auto 自动地处理溢出，如果溢出则显示滚动条，如果没溢出，则正常显示

代码示例

<style type="text/css">

    div{
        width: 100px;
        height: 100px;
        background-color: #00cc66;
        margin-right: 100px;
        float: left;
    }

    #div1{
        overflow: auto;/*超出的部分让浏览器自行解决*/
    }
    #div2{
        overflow: visible;/*超出的部分会显示出来*/
    }

    #div3{
        overflow: hidden;/*超出的部分将剪切掉*/
    }

</style>

<body>
<div id="div1">天生我材必有用，千金散尽还复来天生我材必有用，千金散尽还复来天生我材必有用，千金散尽还复来</div>
<div id="div2">天生我材必有用，千金散尽还复来天生我材必有用，千金散尽还复来天生我材必有用，千金散尽还复来</div>
<div id="div3">天生我材必有用，千金散尽还复来天生我材必有用，千金散尽还复来天生我材必有用，千金散尽还复来</div>
</body>

在这里插入图片描述

display 属性 link

html可以将元素分类方式分为行内元素、块元素和行内块元素三种，使用display属性能够将三者任意转换

none 此元素不会被显示
display:inline;转换为行内元素
display:block;转换为块元素
display:inline-block;转换为行内块元素
还有很多值，但不常用，如 table 等

行内块状特征

支持全部样式
可以设置宽高，如果不设置，行内块元素的宽高就是内容撑开的宽高
不会独占一行，与其他行内元素一行显示
默认排列方式为从左到右
代码换行，行内块元素之间会产生间距

visibility 属性link

visibility:hidden 隐藏元素全部，用于元素自己，隐藏后仍占位置
display:none 隐藏该元素全部，用于元素自己，隐藏后不占位置

元素隐藏

overflow: hidden 不显示溢出的内容

overflow: hidden 只隐藏溢出的部分，用于父元素
overflow: hidden 常用于文字溢出，文档流中的元素溢出

display:none 此元素不会被显示

display:none 会隐藏该元素全部，用于元素自己，隐藏后不占位置
display:none 常用于下拉框，脱离文档流的盒子，如京东导航下拉框

visibility:hidden 属性规定元素是否可见

visibility:hidden 会隐藏该元素全部，用于元素自己，隐藏后仍占位置

transition 属性动态效果

transition起始和结束必须是有效值，不能是auto
京东下拉框：①设置下拉框高度为0 ②overflow: hidden 隐藏溢出的部分 ③hover改变高度配合transition实现动画
小米logo：①定位改变left并排 ②overflow: hidden 隐藏 ③hover改变left 配合transition实现动画
具体代码看练习题

拓展：文字隐藏

案例：小米logo在h1中，此时常在h1中加关键字优化seo，这个关键字是给搜索引擎看的，因此需要隐藏
text-index：-999px，具体代码看练习题

路飞小朋友

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS属性：元素隐藏

overflow 属性处理超出范围的文本内容常用属性值visible 默认值，溢出内容不会被修剪，会呈现在元素框之外hidden 不显示溢出的内容scroll 滚动条来显示元素内溢出的内容，即使没有溢出也显示滚动条auto 自动地处理溢出，如果溢出则显示滚动条，如果没溢出，则正常显示代码示例<style type="text/css"> div{ width: 100px; height: 100px; backgro
复制链接

扫一扫

专栏目录