HTML의 인라인 요소와 블록 수준 요소의 차이점과 연결은 무엇입니까?
- 青灯夜游원래의
- 2022-01-21 16:43:454136검색
차이점: 1. 블록 수준 요소는 단독 라인에 표시되지만 인라인 요소는 한 줄에 표시될 수 없습니다. 2. 블록 수준 요소는 너비와 높이를 설정할 수 있지만 인라인 요소는 표시되지 않습니다. 할 수 없습니다. 연결: 블록 수준 요소는 "display:inline" 스타일을 사용하여 인라인 요소로 변환할 수 있고, 인라인 요소는 "display:block" 스타일을 사용하여 블록 수준 요소로 변환할 수 있습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터. HTML의 인라인 요소와 블록 수준 요소의 차이점
한 줄을 차지합니다. 기본적으로 너비는 상위 요소의 너비를 자동으로 채웁니다.인라인 요소는 같은 줄에 배치되지 않습니다. 한 줄이 맞지 않을 때까지.
| 너비와 높이 속성은 인라인 요소에 유효하지 않습니다. | |
| 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>관련 추천: "
html 비디오 튜토리얼
"위 내용은 HTML의 인라인 요소와 블록 수준 요소의 차이점과 연결은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML 스타일을 어디에 넣을 것인가?다음 기사：HTML 스타일을 어디에 넣을 것인가?