span掉落的演示代码资源-CSDN文库

共6个文件

gif：4个

html：1个

js：1个

span

布局错位

5星 · 超过95%的资源需积分: 13 47 浏览量 2012-02-29 13:19:59 上传评论 1 收藏 36KB RAR 举报

在CSS布局中，"掉落"或"错位"通常是由于元素的盒模型、浮动、内联块级元素的处理方式等因素引起的。标题“span掉落的演示代码”和描述中的问题，集中在`display:block-inline`这一属性上，它涉及到的是如何在保持元素内联特性的基础上，使它们具有块级元素的某些特性，比如占据一整行。我们需要理解CSS的`display`属性。`display`控制着元素的布局方式。默认情况下，`span`元素是内联元素（`display:inline`），它们在同一行内显示，不会换行。而`div`元素则是块级元素（`display:block`），每个都会占据一整行，前后元素之间会自动换行。当我们设置`display:block-inline`或者`display:inline-block`（注意，实际的CSS属性是`inline-block`，而不是`block-inline`），我们希望创建一种元素，它既能像内联元素一样并排显示，又可以像块级元素一样设置宽高。然而，这可能会引发一些问题，特别是当这些元素内部包含文本时。问题通常出现在以下几点： 1. **行内元素的高度计算**：内联元素的高度不包括内边距和边框，除非它们被转换为`inline-block`。因此，如果`span`或`div`设置了`inline-block`并且包含文本，它们的高度可能不足以容纳所有内容，导致排版错位。 2. **空白字符的影响**：内联元素之间的空白字符（如空格、换行）会被浏览器解析为一个空格，影响元素间的间距。在`inline-block`元素中，这种现象尤为明显，可能导致元素位置不准确。 3. **浮动的影响**：如果元素使用了`float`属性，可能会导致父元素无法正确包裹它们，从而出现布局问题。确保清除浮动或者使用`display:flex`或`display:grid`来避免此类问题。 4. **垂直对齐**：`inline-block`元素默认与其他内联元素顶部对齐，但可能需要调整`vertical-align`属性来实现预期的对齐方式。解决方案可能包括： 1. 使用`display:inline-block`而不是`display:block-inline`。 2. 确保元素内部没有额外的空白字符，或者通过CSS将这些空白设置为不可见（例如，`font-size:0`或`letter-spacing:-0.3em`）。 3. 设置`line-height`属性来调整元素高度，使其适应内容。 4. 如果需要控制间距，可以使用`margin`或`padding`，但要注意这些会影响元素的总尺寸。 5. 使用`vertical-align:middle`或`vertical-align:bottom`来调整元素的垂直对齐。在提供的示例代码中，可能包含对这些问题的演示和解决方法。`main_hr.gif`, `main_hl2.gif`, `main_hl1.gif`, `main_hb.gif`可能是展示不同阶段布局效果的动态图，而`nav.html`可能包含了一个导航栏的HTML结构，`jquery-1.7.1.min.js`则是一个JavaScript库，可能用于交互或动画效果。通过查看这些文件，我们可以更深入地理解这个问题和解决方案。

展开

资源推荐

资源详情

资源评论

收起资源包目录

span掉落.rar （6个子文件）

main_hl2.gif 1KB

main_hr.gif 2KB

main_hl1.gif 1KB

jquery-1.7.1.min.js 92KB

nav.html 2KB

main_hb.gif 315B

      <html>
<head>
<title>creat table</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>

<style type="text/css">
.divstyle{
	display:block;
	height:32px;
	width:100%;
	background-color:#294163;
	cursor:pointer;
}
span{
	display:inline-block;
	height:47px;
}
#divfront{
	width:15px;
	background-image:url(main_hl1.gif);
}
#divcontent{
	min-width:60px;
	background-image:url(main_hb.gif);
	color:white;
	font-weight:bold;
	font-size:1.5em;/*可以通过修改字体大小的方式提高span的高度*/
	vertical-align:top;/*问题出在这里*/
	text-align:center;
}

#divback{
	width:15px;
	background-image:url(main_hl2.gif);
}
.divstyle[clicked] #divback{
	display:none;
}

#divtail{
	width:60px;display:none;
	background-image:url(main_hr.gif);
}
.divstyle[clicked] #divtail{
	display:inline-block;
}
</style>
<script type="text/javascript">
	$(function(){
		$("div.divstyle").mousedown(function(){
			$("#divcontent").css("font-size","1em");
		});
		$("div.divstyle").mouseup(function(){
			$("#divcontent").animate({fontSize:"1.5em"},50);
		});
	
		$("div.divstyle").click(function(){
			if($(this).attr("clicked")){
				$(this).removeAttr("clicked");
			}
			else{
				$(this).attr("clicked","sd");
			}
		});
	});
</script>
</head>
	<body>
		<div class="divstyle" >
			<span id="divfront"></span>
			<span id="divcontent">按钮上的文字</span>
			<span id="divback"></span>
			<span id="divtail"></span>
		</div>
	</body>
</html>