>웹 프론트엔드 >CSS 튜토리얼 >인라인 요소와 블록 수준 요소의 차이점에 대한 자세한 소개

인라인 요소와 블록 수준 요소의 차이점에 대한 자세한 소개

高洛峰
高洛峰원래의
2017-03-07 14:16:551666검색

우선, CSS 사양에서는 각 요소에 요소 유형을 결정하는 표시 속성이 있다고 규정하고 있습니다. 각 요소에는 블록 및 인라인이라는 기본 표시 값이 있습니다.

블록 수준 요소: (다음은 더 일반적으로 사용되는 블록 수준 요소입니다. 자세한 내용은 w3cschool에서 확인할 수 있습니다.)

<p>定义文档中的分区或节   

<h1>定义最大的标题   

<h2>定义副标题   

<h3>定义标题   

<h4>定义标题   

<h5>定义标题   

<h6>定义最小的标题   

<ul>定义无序列表   

<ol>定义有序列表   

<li>定义有序列表或无序列表的列表项目   

<dl>定义自定义列表   

<dd>定义自定义列表中的条目   

<dt>定义自定义列表中的项目   

<hr>创建一条水平线   

<p>定义段落   

<table>定义表格   

<td>表格中的标准单元格   

<th>定义表头单元格   

<thead>标签定义表格的表头   

<tr>定义表格中的行

인라인 요소: (다음은 더 일반적으로 사용되는 인라인 요소입니다. 자세한 내용은 w3cschool에서 확인할 수 있습니다.)

<a>定义超链接   

<b>字体加粗   

<span>定义在文档中的行内元素   

<img>向网页中插入题图像   

<input>输入框   

<small>小号字体效果   

<br>换行   

<big>字体加大加粗   

<strong>强调的语气   

<select>创建单选或多选菜单   

<textarea>定义文本域,多行的文本输入控件

The 인라인 요소와 블록 수준 요소의 차이점:

1. 인라인 요소와 블록 수준 함수는 서로 변환될 수 있으며, 인라인 요소는 수정을 통해 전환될 수 있습니다. 디스플레이 속성 값. 인라인 요소 display: inline, 블록 수준 요소 display: block.

2. 인라인 요소와 기타 인라인 요소는 모두 같은 줄에 정렬됩니다.

블록 수준 요소는 항상 새 줄에 정렬되며 각 블록은 레벨 요소는 단독 행을 차지하며 수직 아래로 정렬됩니다. 수평으로 정렬하려면 왼쪽 및 오른쪽 부동(float: 왼쪽/오른쪽)을 사용하여 수평으로 정렬할 수 있습니다.

3. 인라인 요소의 너비와 높이는 설정할 수 없지만, 줄 높이(line-height)는 동시에 설정할 수 있습니다. 외부 여백을 설정하면 위쪽 및 아래쪽 여백이 유효하지 않고 왼쪽 및 오른쪽 여백이 유효하며 안쪽 여백은 위쪽 및 아래쪽이 유효하지 않지만 왼쪽 및 오른쪽은 유효합니다.

블록 수준 요소; 너비와 높이를 설정할 수 있으며, 너비, 높이, 여백, 내부 패딩 등을 마음대로 제어할 수 있습니다.

4. 블록 수준 요소는 인라인 요소와 블록 수준 요소를 포함할 수 있으며 인라인 요소 및 기타 요소도 수용할 수 있습니다.

인라인 요소는 블록 수준 요소를 포함할 수 없으며 수용만 가능합니다. 텍스트 또는 기타 요소.

위 글은 인라인 요소와 블록 수준 요소의 차이점에 대해 포괄적으로 이해하고 있습니다. 이는 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. PHP 중국어 웹사이트.

인라인 요소와 블록 수준 요소의 차이점에 대한 자세한 내용은 PHP 중국어 웹사이트의 관련 기사를 참고하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.