css中关于display的一般用法

最新推荐文章于 2025-06-02 15:39:10 发布

原创最新推荐文章于 2025-06-02 15:39:10 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文通过一个简单的示例介绍了如何使用jQuery实现元素的滑动效果。详细解释了使用$.ready()初始化页面元素，并通过.click()事件触发.slideToggle()来实现元素的显示与隐藏。此外还探讨了CSS中display属性的不同值对于元素显示状态的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是在学习jquery时候有疑问而作为记录。

学习jquery的滑动

这是原代码：

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel,#down").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:6px;
	text-align:center;
	background-color:#55eedc;
	border:solid 2px #c5c5c9;
}
#panel
{
	padding:40px;
	display:none;
	background:#21ac45;
	
}
#down {
	padding:40px;
	display:none;
	background:red;
	
}
</style>
</head>
<body>
 
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
<div id ="down"> ou my god</div>

</body>
</html>

显示的效果如下，但是在jquery里面开始没有给节点隐藏的，因为是初学，所以刚开始是可以使用$('panel').hide()进行初始隐藏，然后进行点击滑动：

后面进行排查时候发现在display可以设置是否在开始加载页面时候，该元素是否会被显示出来。

最后附上display的常用属性

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。