margin、padding和position

最新推荐文章于 2024-01-11 09:28:36 发布

pi5458

最新推荐文章于 2024-01-11 09:28:36 发布

阅读量184

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/miaosanpi/article/details/108058042

版权

margin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>marjin</title>
	</head>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}
	</style>
	<body>
		<!--<p>河南工业大学</p>
		<div>河南工业大学</div>
		<span>河南工业</span><b>大学</b>
		<style>
			p,div,span,b{
				border: 1px solid blueviolet;
			}
			/*margin：外边距
			 *用于设置同级别标签间距
			 * 上下取最大值，左右相加
			 */
			div{
				margin-top: 20px;
				margin-bottom: 20px;
			}
			span{
				margin-right: 20px;
			}
		</style>-->
		
		<br /><br /><br />
		
		<p>河南工业大学</p>
		<span>河南工业</span><b>大学</b><span>我来了</span>
		<div>河南工业大学</div>
		<style>
			span,b,p,div{
				border: 1px solid blueviolet;
			}
			span,b{
				display: inline-block;
			}
			b{
				/*margin: 10px;*//*上下左右*/
				/*margin: 10px 50px;*//*上下    左右*/
				/*margin: 10px 50px 10px;*//*上      左右      下*/
				margin: 10px 50px 10px 50px;/*上      右       下        左*/
			}
		</style>
	</body>
</html>

padding

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>padding</title>
	</head>
	<body>
		<p>河南工业大学</p>
		<style>
			/*padding:用于设置内部元素距离边框距离*/
			p{
				border: 1px solid blueviolet;
				/*padding-top: 20px;
				padding-bottom: 20px;
				padding-left: 20px;
				padding-right: 20px;*/
				/*padding: 10px;*//*上下左右*/
				/*padding: 10px 50px;*//*上下    左右*/
				/*padding: 10px 50px 10px;*//*上      左右      下*/
				padding: 10px 50px 10px 50px;/*上      右       下        左*/
			}
		</style>
	</body>
</html>

position

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>position</title>
	</head>
	<body>
		<div id="con">
			<div id="one"></div>
			<div id="two"></div>
			<div id="three"></div>
		</div>
		<style>
			#con{
				border: 1px solid brown;
				width: 300px;
				height: 300px;
			}
			#one,#two{
				width: 100px;
				height: 100px;
			}
			#one{
				position: absolute;/*相对于父标签进行定位，该父标签的position非static*/
				left: 50px;
				top: 50px;
				background-color: blue;
			}
			#two{
				position: relative;/*相对于原来位置定位*/
				left: 10px;
				top: 10px;
				background-color: yellow;
			}
			#three{
				width: 50px;
				height: 50px;
				position: fixed;/*相对于窗口定位*/
				right: 100px;
				bottom:40px;
				background-color: gray;
			}
		</style>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</body>
</html>

pi5458

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
margin、padding和position

margin<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>marjin</title> </head> <style> *{ margin: 0px; padding: 0px; } </style> <body> <!--<p>河南工业大学</p&
复制链接

扫一扫