首页

文章

css中display怎么做显示或隐藏

发布网友 发布时间:2022-04-20 04:44

我来回答

10个回答

热心网友 时间:2022-04-06 12:34

display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

display:block可以显示一个块元素,或者display:inline是显示一个内联元素。

display主要用的CSS样式有以下三个:

display:block——显示为块级元素。

display:inline——显示为内联元素。

display:inline-block——显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性。

扩展资料:

显示的块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

显示的内联元素(inline)特性:和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;

块级元素主要有:address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li等css属性。

内联元素主要有:a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var等css属性。

热心网友 时间:2022-04-06 13:52

CSS中的display和visibility 

1、隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。

2、visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

3、display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

扩展资料

CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

总体来说,CSS具有以下特点:

1、丰富的样式定义:

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改:

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。

3、多页面应用:

CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

4、层叠:

简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。

这些后来定义的样式将对前面的样式设置进行重写,在浏览器看到的将是最后面设置的样式效果。

5、页面压缩:

在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。

而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程序的缩减了页面的体积,减少下载的时间。

参考资料来源:百度百科:CSS

热心网友 时间:2022-04-06 15:26

CSS中的display和visibility 

1、隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。

2、visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

3、display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

CSS常用笔记:

块级元素(block)特性:

1、总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;

2、宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性:

1、和相邻的内联元素在同一行;

2、宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;

块级元素主要有:address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有:a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

热心网友 时间:2022-04-06 17:18

CSS部分其实就是如果上面是8个选项,下面就有对应的8个内容区都放在下面,然后用css隐藏7个display:none,只显示默认的一个,当然一开始的时候你不隐藏就是显示的,所以这时候没必要写显示类

然后鼠标点击的时候8个内容区隐藏1个内容区显示(我为什么不说7个隐藏1个显示呢?那是便于你理解,如果你用js或者jq语句,就是在点击事件里执行两句语句,1.先让所有内容区隐藏,2.让鼠标点击哪个选项(如第3个)就让相对应的哪个如第3个内容区显示)

写语句的时候你可以给想隐藏的通通加上display:none隐藏类,想显示的加上display:block显示类,在这里它们有点反义词的意思,如果使用jq也可以用hide()和show()方法,它们也是用来隐藏和显示的

热心网友 时间:2022-04-06 19:26

<html>

<head><title>文字透明效果显示在图片上</title>

<style>

#box1{

float:left;

width:50%;

height:20em;

margin-left:3%;

margin-top:3%;

background:gray;

}

#box2{

float:left;

width:50%;

height:20%;

margin-top:3%;

margin-left:10%;

background:blue;

}


#an1{

float:left;

width:50%;

height:100%;

background:yellow;

cursor:pointer;

}



#an2{

float:left;

width:50%;

height:100%;

background:red;

cursor:pointer;

}


#neirong1{

display:none;

position:relative;

clear:both;

width:200%;

height:300%;

top:100%;

}


#neirong2{

display:none;

position:relative;

clear:both;

width:200%;

height:300%;

top:100%;

left:-100%;

}


#an1:hover #neirong1{

display:block;

background:yellow;

}



#an2:hover #neirong2{

display:block;

background:red;

}



</style>

</head>


<body>


<div id="box1">

<div id="box2">

<div id="an1">按钮1

<div id="neirong1">显示内容1</div>

</div>

<div id="an2">按钮1

<div id="neirong2">显示内容2</div>

</div>

</div>

</div>


</body>

</html>

效果图:

热心网友 时间:2022-04-06 21:50

只需设置

display:none;

即可将该元素设为隐藏的。默认的是显示的,即不设置display即默认显示。

isplay 属性规定元素应该生成的框的类型,定义建立布局时元素生成的显示框类型。

display的值可以取如下的值:

none    此元素不会被显示。    

block    此元素将显示为块级元素,此元素前后会带有换行符。    

inline    默认。此元素会被显示为内联元素,元素前后没有换行符。    

inline-block    行内块元素。(CSS2.1 新增的值)    

热心网友 时间:2022-04-07 00:32

在这个例子中,基本上是靠javascript控制的,当点击某一个tab时,执行javascript代码,改变相应的内容元素的css display属性,让其显示或隐藏。其中在css中,display:none就是隐藏,display:block或display:inline等都是显示。

热心网友 时间:2022-04-07 03:30

参考代码 如下

<style>
.dv1{width:200px;clear:both;height:30px;}
span{float:left;margin-right:10px;cursor:pointer;}
.dv2{width:100px;height:100px;line-height:25px;border:1px solid red;}
</style>

<div class="dv1">
<span id="wz">网址</span>
<span id="dsj">电视剧</span>
<span id="dy">电影</span>

</div>
<div class="dv2" id="dv2"></div>
<script src="jquery-1.4.2.js"></script>
<script>
$("span").click(function(){
var txt = $(this).text();

$("#dv2").text(txt);
});
</script>

热心网友 时间:2022-04-07 07:01

display:none是隐藏,block显示

热心网友 时间:2022-04-07 11:06

可以通过设置display:none;命令将该元素设为隐藏。display命令默认的是显示的,如果不设置display就默认显示。

isplay 属性规定元素应该生成的框的类型,定义建立布局时元素生成的显示框类型。

display的值可以取如下的值:

none    此元素不会被显示。    

block    此元素将显示为块级元素,此元素前后会带有换行符。    

inline    默认。此元素会被显示为内联元素,元素前后没有换行符。    

inline-block    行内块元素。(CSS2.1 新增的值)

八月中国最凉快的地方 八月份哪里最凉快,去哪旅游好?美丽的地方 乱字同韵字是什么意思 华硕笔记本电脑触摸板怎么开笔记本电脑触摸板怎么开启和关闭_百度知 ... 陕西职务侵占案立案准则 结婚后我的恋情维系了十年,怎么做到的? 玉米仁子饭产自哪里 中国期货交易所的交易品种有哪些? 历史要怎么读,有啥诀窍 高中历史诀窍 年终会活动策划方案 深度解析:第一财经回放,探索财经新风向 逆水寒手游庄园怎么邀请好友同住 逆水寒手游 逆水寒不同区可以一起组队吗? 逆水寒手游 逆水寒怎么进入好友世界? 逆水寒手游 逆水寒怎么去别人的庄园? 使用puppeteer实现将htmll转成pdf 内卷时代下的前端技术-使用JavaScript在浏览器中生成PDF文档 【译】将HTML转为PDF的几种实现方案 变形金刚08动画怎么样 变形金刚08动画的问题 变形金刚08动画日语版剧情介绍 高分!换显卡nvidia控制面板被我卸了,重新安装显卡驱动后没了nvidia控... 我的nvidia控制面板被卸载了 怎么找回啊 卸载后 这个画面看着很奇怪_百 ... 李卓彬工作简历 林少明工作简历 广东工业职业技术学院怎么样 郑德涛任职简历 唐新桂个人简历 土地入股的定义 ups快递客服电话24小时 贷款记录在征信保留几年? 安徽徽商城有限公司公司简介 安徽省徽商集团新能源股份有限公司基本情况 安徽省徽商集团有限公司经营理念 2019哈尔滨煤气费怎么有税? 快手删除的作品如何恢复 体育理念体育理念 有关体育的格言和理念 什么是体育理念 万里挑一算彩礼还是见面礼 绿萝扦插多少天后发芽 绿萝扦插多久发芽 扦插绿萝多久发芽 炖牛排骨的做法和配料 网络诈骗定罪标准揭秘 “流水不争先”是什么意思? mc中钻石装备怎么做 为什么我的MC里的钻石块是这样的?我想要那种。是不是版本的问题?如果是... 带“偷儿”的诗句 如何隐藏CSS文件 css如何设置元素隐藏 CSS样式怎么隐藏? css里面怎么让动画先隐藏,6秒后再显示出来? 在移动端怎么将HTML5中的video标签的控件去掉或者隐藏 CSS怎么隐藏视频播放的图标使它一直播放 华为13的r5跟d14的r7有啥区别? 什么是CRM系统?主要是用在什么地方?有什么作用?... 请问加推的CRM系统怎么查看数据? 如何正确选取crm系统 CRM系统到底是什么意思,作用是什么呢? 公司crm系统怎么才可以在苹果系统使用 客户关系管理系统(crm) 基本功能有什么? 如何在crm里面进行开发 crm系统怎么用 如何开发CRM客户关系管理系统 什么是crm系统?作用是什么? CRM系统为什么打不开?是网速还是设置问题 公司crm系统在家打不开网页 赞比西CRM系统怎么使用的? CSS对于元素隐藏的几种方法 CSS中如何让元素隐藏? css如何禁止播放视频有其他广告植入 怎样在css中隐藏部分代码 请问用CSS如何控制自动隐藏多余的内容? css怎么让动画效果pulse一开始是隐藏的 css中怎样隐藏,<li> </li> ? 如何用css控制一个容器的显示与隐藏 怎样隐藏网站CSS文件的路径 如何隐藏自己的CSS代码不让别人看到 div+css布局如何插入视频 css中怎样设置绝对定位为默认隐藏 群发信息在哪里发 微信群发助手在哪找 新版微信群发在哪 微信群发助手在哪找?怎么看不到呢 微信群发助手怎么找 他来了请闭眼李熏然死了吗 他来了请闭眼李熏然不是在22集被枪打死了吗,怎么后... 他来了请闭眼结局李熏然最后和谁在一起
声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com