内联元素和块级元素

对应关系

display:block;块级元素div,h3,p,hr,ul,li

display:inline;内联元素，如a,span

display:inline-block;替换元素，如img，input

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内联元素和块级元素</title>
		<style type="text/css">
			body,html{
				padding: 0px;
				margin: 0px;
				/*width: 100%;不需要,块级元素自动填满*/
				height: 100%;
				background: gray;
			}
			article{
				width: 50%;
				margin: 0px auto;
				background: greenyellow;
			}
			div{
				background: green;
				height: 30%;
				margin: 2rem;
				padding: 5rem;
			}
			span{
				/*块级元素设置宽高无效*/
				width: 500px;
				height: 500px;
				
				/*虽然显示有上下内边距但是不改变原来的布局(既不影响本身位置，也不影响其他标签位置)，只有左右内边距才改变其布局*/
				padding: 14px;
				
				/*虽然显示有上下外边距但是不改变原来的布局，只有左右外边距才改变其布局*/
				margin: 10px;
				
				background: cornflowerblue;
			}
			input{
				width: 450px;
			}
			p{
				padding: 0px;
				margin: 0px;
				background: palegoldenrod;
			}
		</style>
	</head>
	<body>
		
		<article>
			article
		</article>
		
		<div>
			div
			<span>span</span>
			<input type="text" />
			<p>ppppppppppppppppppppppppppppppp</p>
		</div>
			
	</body>
</html>

内联元素和块级元素

相关推荐