CSS页面布局基础4——元素可见性、溢出和元素重叠问题

最新推荐文章于 2025-05-16 19:33:02 发布

原创最新推荐文章于 2025-05-16 19:33:02 发布 · 2.9k 阅读

CC 4.0 BY-SA版权

文章标签：

1、设置元素的可见性：在CSS中，有两个属性可以控制元素的显示和隐藏，就是display和visibility属性。
display属性确定一个元素是否应该显示在页面上，以及如何显示。取值有none，block，inline。
当设置元素的display为none时，元素在页面隐藏起来，不仅元素看不见，而且元素也将推出当前的页面布局，不占用任何空间。
当设置元素的display为block(块级)时，可以强制将XHTML中的内嵌元素设置成为块级元素，从而引起后续对象换行。
当设置元素的display为inline(内嵌级)时，CSS强制将XHTML中的块级元素变成内嵌元素。
visibility属性控制定位元素是否可见。取值包括visible(可见)、hidden(隐藏)和inherit(继承)，默认值为inherit(即继承父级元素的显示属性)

visibility属性与display属性的不同之处在于：当隐藏元素时，visibility属性定义的元素任然为保留原油的显示空间。

<!DOCTYPE html>
<html>
<head>
	<title>设置元素可见性</title>
	<meta charset="utf-8"  />
	<style type="text/css">
	img{
		/*可以将下面的代码改成display:none/block/inline;和visibility:visible/hidden/inherit; 试试*/
		display:none;
	}
	</style>
</head>
<body style="background:#eea;">
<img src="me.png" alt="clip示例图片">
<a href="www.baidu.com" title="本机">Welcome</a>
</body>
</html>

2、处理溢出：overflow属性。如果一个元素的大小设置太小，以致不能包含其内容，就可以用overflow来指定其内容不能填充时候该如何处理。
overflow的取值：visible / hidden / scroll / auto，其中，visible是默认值，表示不裁剪内容，也不添加滚动条，强制显示元素内容。
scroll表示裁剪内容，同时提供滚动条。
hidden表示裁剪内容，而且不显示内容，而且不显示超出对象的尺寸的内容。
auto表示只有在必要的时候才裁剪内容并添加滚动条。

注意：如果要使用overflow属性，那么该元素的position属性必须指定为绝对定位(absolute)

<!DOCTYPE html>
<html>
<head>
	<title>处理溢出效果</title>
	<meta charset="utf-8" />
	<style type="text/css">
	div{
		width:200px;
		height:50px;
		border:solid;
		border-width: 1px;
		border-color: black;
		/*使用overflow属性的时候，必须将元素的position指定为absolute。*/
		position: absolute;
		/*可以试试  overflow:visible/hidden/scroll/auto;*/
		overflow: auto;
	}
	</style>
</head>
<body>
<div>shenjsafeiofjwalkrjeaoisejhiowjklgjewoijglksjfsalfjewiofjlskadfjsjfeilsakfjeigjkhfuwfkjhguwejkfhusejkfhuegkjiekjsfiekjiekjig</div>
</body>
</html>

3、指定裁剪区域：clip属性可以确定定位对象的裁剪区域，其取值为rect(top right bottom left) / auto，其中top 、 right 、bottom 和 left用于指定上、右、下、左4个方向上的裁剪长度，取值为长度值或auto。如果任意一边使用auto，则相当于该边没有进行裁剪。
4、处理元素重叠：使用top和left属性可能会造成元素相互重叠在一起，此时可以使用z-index属性。z-index属性用来控制重叠元素的显示顺序，值较高的元素将覆盖值较低的元素。如果值为-1，则表示元素将至于页面默认文本的后边，这对于设置背景图案是很有用的。

注意：z-index属性在设置了position并取值为 absolute 或者 relative 时有用。

<!DOCTYPE html>
<html>
<head>
	<title>元素重叠</title>
	<meta charset="utf-8" />
	<style type="text/css"> 
	div{
		/*这里position要设置为absolute或者relative*/
		position: absolute;
		border:1px solid black;
		height:50px;
		width: 60px;
	}
	div:nth-child(2n){
		background-color: blue;
	}
	#top{
		left:80px;
		top:80px;
		z-index: 3;
		background-color: gray;
	}
	#middle{
		left:60px;
		top:60px;
		z-index: 2;
		background-color: orange;
	}
	#bottom{
		left:40px;
		top:40px;
		z-index: 1;
		background-color: red;
	}
	</style>
</head>
<body>
	<div id="top">1</div>
	<div id="middle">2</div>
	<div id="bottom">3</div>
</body>
</html>