css中display怎么做显示或隐藏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css中display怎么做显示或隐藏相关的知识，希望对你有一定的参考价值。
就像这样的，点击上面，下面会出现相应的内容，看了半天的文字介绍还是没弄明白。求大神指导下，到底应该怎么做。
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属性。
参考技术ACSS中的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
参考技术BCSS中的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
参考技术C CSS部分其实就是如果上面是8个选项，下面就有对应的8个内容区都放在下面，然后用css隐藏7个display:none，只显示默认的一个，当然一开始的时候你不隐藏就是显示的，所以这时候没必要写显示类然后鼠标点击的时候8个内容区隐藏1个内容区显示（我为什么不说7个隐藏1个显示呢？那是便于你理解，如果你用js或者jq语句，就是在点击事件里执行两句语句，1.先让所有内容区隐藏，2.让鼠标点击哪个选项（如第3个）就让相对应的哪个如第3个内容区显示）
写语句的时候你可以给想隐藏的通通加上display:none隐藏类，想显示的加上display:block显示类，在这里它们有点反义词的意思，如果使用jq也可以用hide()和show()方法，它们也是用来隐藏和显示的本回答被提问者和网友采纳 参考技术D
<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>
效果图：
CSS高级技巧
元素的显示与隐藏
display显示
display 设置或检索对象是否及如何显示。
display: none 隐藏对象 display：block 除了转换为块级元素之外，同时还有显示元素的意思。
特点:
隐藏之后，不再保留位置。
设置或检索是否显示对象。
visibility：visible ; 对象可视 visibility：hidden; 对象隐藏
特点:
隐藏之后，继续保留原有位置。
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
| 属性值 | 描述 |
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
-
所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。
-
更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)
-
表单轮廓等。
-
防止表单域拖拽
-
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed |
<ul> <li style="cursor:default">我是小白</li> <li style="cursor:pointer">我是小手</li> <li style="cursor:move">我是移动</li> <li style="cursor:text">我是文本</li> <li style="cursor:not-allowed">我是文本</li> </ul>
轮廓线是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。 li
实际开发中，我们文本域右下角是不可以拖拽：
<textarea style="resize: none;"></textarea>
vertical-align : baseline |top |middle |bottom
设置或检索对象内容的垂直对其方式。
注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
- white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
white-space:normal ；默认处理方式 white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
text-overflow : clip ；不显示省略标记（...），而是简单的裁切 text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
注意：
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。
使用精灵技术是为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
我们需要使用CSS的
-
background-image、
-
background-repeat
-
background-position属性进行背景定位，
-
其中最关键的是使用background-position 属性精确地定位。
首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
-
精确测量，每个小背景图片的大小和 位置。
-
给盒子指定小背景图片时， 背景定位基本都是 负值。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。
我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。 我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙 在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
滑动门出现的背景
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。
核心技术
核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
* {
padding:0;
margin:0;
}
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
}
总结
-
-
span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
-
扩展
1). 负边距+定位：水平垂直居中
一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。
2). 压住盒子相邻边框
div {
width: 0;
height: 0;
line-height:0；
font-size: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
}
一张图， 你就知道 css 三角是怎么来的了, 做法如下：
-
我们用css 边框可以模拟三角效果
-
宽度高度为0
-
我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
-
为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
以上是关于css中display怎么做显示或隐藏的主要内容，如果未能解决你的问题，请参考以下文章