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="an1">按钮1

</div>

<div id="an2">按钮1

</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 新增的值）