표시 속성을 사용하여 HTML의 기능과 응용 프로그램을 살펴보세요.-HTML 튜토리얼-php.cn

표시 속성을 사용하여 HTML의 기능과 응용 프로그램을 살펴보세요.

WBOY

풀어 주다： 2024-02-02 13:33:05

원래의

1184명이 탐색했습니다.

표시 속성을 사용하여 HTML의 기능과 응용 프로그램을 살펴보세요.

HTML에서 표시 속성의 특성 및 적용

HTML은 웹 페이지를 만드는 데 사용되는 마크업 언어입니다. 표시 속성은 HTML에서 일반적으로 사용되는 속성 중 하나이며 요소가 표시되는 방식을 제어하는 데 사용됩니다. 페이지. 표시 속성에는 다양한 값이 있으며 각 값에는 고유한 특성과 용도가 있습니다. 이 기사에서는 몇 가지 일반적인 표시 속성 값을 소개하고 해당 코드 예제를 제공합니다.

display: block
block은 표시 속성의 기본값입니다. 즉, 요소가 블록 수준 요소로 표시됩니다. 블록 수준 요소는 페이지의 전체 줄을 차지하며 개행 문자를 만날 때까지 자체 줄을 차지합니다. 블록 수준 요소는 너비, 높이, 내부 및 외부 여백과 같은 속성을 설정할 수 있으며 다른 요소를 수용할 수 있습니다.

샘플 코드:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  display: block;
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 10px;
}
</style>
</head>
<body>

<div>This is a block element.</div>

</body>
</html>

로그인 후 복사

display: inline
inline은 요소가 인라인 요소로 표시된다는 의미입니다. 인라인 요소는 단독으로 한 줄을 차지하지 않으며 다른 요소와 같은 줄에 표시될 수 있습니다. 인라인 요소의 너비, 높이, 내부 및 외부 여백 등과 같은 속성은 아무런 영향을 미치지 않으며 텍스트나 기타 인라인 요소를 수용할 수 있습니다.

샘플 코드:

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: inline;
  background-color: yellow;
  padding: 10px;
}
</style>
</head>
<body>

<span>This is an inline element.</span>

</body>
</html>

로그인 후 복사

display: inline-block
inline-block은 표시 속성의 또 다른 일반적인 값으로, 요소가 인라인 블록 요소로 표시된다는 의미입니다. 인라인 블록 요소를 같은 줄에 표시할 수 있으며 너비, 높이, 내부 및 외부 여백 등의 속성을 설정할 수 있습니다.

샘플 코드:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}
</style>
</head>
<body>

<div>This is an inline-block element.</div>
<div>This is another inline-block element.</div>

</body>
</html>

로그인 후 복사

display: none
none은 요소가 표시되지 않으며 요소가 페이지의 어떤 공간도 차지하지 않음을 의미합니다. 요소를 숨기려면 display: none을 사용하세요. 이는 페이지에서 요소를 제거하는 것과 같습니다.

샘플 코드:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
}
</style>
</head>
<body>

<p>This paragraph will not be displayed.</p>

</body>
</html>

로그인 후 복사

위는 표시 속성의 몇 가지 공통 값과 해당 코드 예제입니다. 표시 속성을 유연하게 사용하면 요소가 페이지에 표시되는 방식을 제어하고 다양한 레이아웃 효과를 얻을 수 있습니다.

위 내용은 표시 속성을 사용하여 HTML의 기능과 응용 프로그램을 살펴보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!