div CSS 표시 숨기기

div CSS 표시 및 숨기기

CSS는 표시 속성을 통해 요소의 가시성을 제어할 수 있습니다.

1. display: none; display : none; 요소는 페이지에 표시되지 않으며 공간을 차지하지 않습니다.
   

예를 들어 다음 코드 조각에서 div 요소는 display: none;으로 설정되어 있으므로 페이지에 표시되지 않습니다.

<div class="hidden">这是要隐藏的内容</div>

<style>
.hidden{
  display: none;
}
</style>

display: block;
2. display: block; 블록 수준 요소 쇼의 형태로 진행됩니다. 기본적으로 div 요소는 블록 수준 요소이며 페이지의 자체 줄에 표시됩니다.
   

예를 들어 다음 코드 조각에서 div 요소는 display: block;으로 설정되어 있으며 이는 블록 수준 요소로 표시됩니다.

<div class="block">这是块级元素</div>

<style>
.block{
  display: block;
}
</style>

display: inline;
3. display: inline; 요소는 인라인 요소 쇼로 표시됩니다. 기본적으로 스팬 요소는 인라인 요소이며 페이지의 다른 인라인 요소나 텍스트와 같은 줄에 표시됩니다.
   

예를 들어 다음 코드 조각에서 div 요소는 display: inline;으로 설정되어 있으며 이는 인라인 요소로 표시됩니다.

<div class="inline">这是行内元素</div>

<style>
.inline{
  display: inline;
}
</style>

display: inline-block;
4. display: inline-block; 요소가 인라인으로 표시됩니다. 블록 수준 요소로 표시됩니다. 인라인 블록 수준 요소는 인라인 요소와 같은 다른 요소와 동일한 줄에 표시될 수 있으며 너비, 높이, 내부 및 외부 여백 및 블록 수준 요소와 같은 기타 속성을 설정할 수도 있습니다.
   

예를 들어 다음 코드 조각에서 div 요소는 표시: inline-block;으로 설정되어 인라인 블록 수준 요소로 표시됩니다.

<div class="inline-block">这是行内块级元素</div>

<style>
.inline-block{
  display: inline-block;
}
</style>

표시 속성을 사용하면 요소를 쉽게 표시하고 숨길 수 있습니다. . 요소가 표시: 없음;으로 설정된 경우 해당 요소 아래의 모든 하위 요소도 숨겨집니다. 따라서 실제 적용에서는 특정 요구에 따라 적절한 디스플레이 속성을 선택해야 합니다.

위 내용은 div CSS 표시 숨기기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!