HTML의 인라인 요소와 블록 수준 요소의 차이점과 연결은 무엇입니까?-프런트엔드 Q&A-php.cn

HTML의 인라인 요소와 블록 수준 요소의 차이점과 연결은 무엇입니까?

青灯夜游

풀어 주다： 2022-01-21 16:43:45

원래의

4161명이 탐색했습니다.

차이점: 1. 블록 수준 요소는 단독 라인에 표시되지만 인라인 요소는 한 줄에 표시될 수 없습니다. 2. 블록 수준 요소는 너비와 높이를 설정할 수 있지만 인라인 요소는 표시되지 않습니다. 할 수 없습니다. 연결: 블록 수준 요소는 "display:inline" 스타일을 사용하여 인라인 요소로 변환할 수 있고, 인라인 요소는 "display:block" 스타일을 사용하여 블록 수준 요소로 변환할 수 있습니다.

HTML의 인라인 요소와 블록 수준 요소의 차이점과 연결은 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터. HTML의 인라인 요소와 블록 수준 요소의 차이점

한 줄을 차지합니다. 기본적으로 너비는 상위 요소의 너비를 자동으로 채웁니다.

인라인 요소는 같은 줄에 배치되지 않습니다. 한 줄이 맞지 않을 때까지. 너비와 높이 속성을 설정할 수 있습니다. 여백 및 패딩 속성을 설정할 수 있습니다. display:block에 해당HTML의 인라인 요소와 블록 수준 요소 간의 연결예 2:


너비와 높이 속성은 인라인 요소에 유효하지 않습니다.
margin-left, margin-right, padding-left, padding-right 및 기타 속성만 여백 효과를 갖지 않습니다.
display:inline;
인라인 요소와 블록 수준 요소 상호 변환 가능	블록 수준 요소는 "display:inline" 스타일을 사용하여 인라인 요소로 변환 가능
인라인 요소는 "display:block" 스타일을 사용하여 블록 수준 요소로 변환 가능	예 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div{ background-color: pink; } .box{ display: inline; /* 块级元素转为内联元素 */ } </style> </head> <body> <div>块级元素1</div> <div class="box">块级元素2</div> <div class="box">块级元素3</div> </body> </html> 로그인 후 복사

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			span{
				background-color: pink;
			}
			.box{
				display: block;	/*内联元素 转为块级元素 */
			}
		</style>
	</head>

	<body>
		<span>内联元素1</span>
		<span class="box">内联元素2</span>
		<span class="box">内联元素3</span>
	</body>

</html>

로그인 후 복사