欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS属性的百分比参照的是谁

程序员文章站 2022-04-25 11:20:11
...
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#inner1{
				width:400px ;
				height: 400px;
				background: red;
			}
			#inner2{
				position: absolute;
				left: 50%;	/* 参照的是初始包含块的width */
				width: 50%;	/* 参照的是初始包含块的width */
				height: 100%;
				background: yellow;
			}
			/* 总结：
					百分比参照于谁
						width margin padding:包含块的width
						height:包含块的height
						
						left:包含块的width
						top:包含块的height
			 */
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="inner1">
				<div id="inner2"></div>
			</div>
		</div>
	</body>
</html>

总结：
百分比参照于谁
width margin padding:包含块的width
height:包含块的height
left:包含块的width
top:包含块的height

相关标签： HTML和CSS css

上一篇： jOOQ 1.6.4发布，Java的ORM框架

下一篇： SimpleXML中处理XML后asXML('file.xml')保存的文件，没有格式排版么？一行看着是天书啊

推荐阅读