相对定位和绝对定位的区别

最新推荐文章于 2023-05-24 22:16:01 发布

wyc135

最新推荐文章于 2023-05-24 22:16:01 发布

阅读量1k

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/wyc135/article/details/108556855

版权

相对定位和绝对定位的区别

一般父元素使用相对定位，子元素使用绝对定位（子绝父相）

相对定位 relative

1、保留原来位置进行定位（下面的元素不受影响）

2、相对于自己原来的位置定位

绝对定位 absolute

1、脱离原来的位置进行定位(下面的元素会浮动上来)

2、相对于最近的有定位的父元素进行定位，如果没有，则相对于文档进行定位

设置文本不换行

添加属性：white-space:nowrap

单行文本溢出容器，省略号表示

添加属性

white-space:nowrap; /*设置文本换行*/
overflow:hidden; /*超过宽度的文本隐藏*/
text-overflow:ellipsis; /*多余的文本以省略号表示*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style>
		.wrapper{
			width:500px;
			border:1px solid red;
			white-space:nowrap; /*设置文本换行*/
			overflow:hidden;  /*超过宽度的文本隐藏*/
			text-overflow:ellipsis;  /*多余的文本以省略号表示*/
		}
	
	</style>
</head>
<body>
	<div class="wrapper ">
		CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
	</div>
</body>
</html>

效果

块元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<style>
		.wrapper{
			width:500px;
			height:30px;
			background-color:#123;
		}
		
		.content{
			margin:0 auto;  
			width:300px;
			height:30px;
			background-color:#0f0;
		}
	
	</style>
</head>
<body>
	<div class="wrapper ">
		<div class="content"></div>
	</div>
</body>
</html>

效果：