html+css의 네 가지 숨기기 방법

이번에는 html+css의 4가지 숨기기 방법을 알려드리겠습니다. html+css의 숨기기 방법에 대한 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

1.opacity:0은 요소만 숨기지만 여전히 레이아웃을 차지하므로 여전히 레이아웃에 영향을 줍니다

<p class="p1">
snda:opacity:0只是把元素隐藏起来了 ，但是还是占有布局，所以还是对布局有影响
</p>
<p>ppskdkad</p>

.p1{
opacity: 0;
width:200px;
height:200px;
border:1px solid red;
}

2.visibility: Hidden은 여전히 ​​요소를 숨기지만 여전히 레이아웃을 차지합니다

<p class="p2">
这是第二个p visibility:hidden还是只是把元素隐藏了，但是还是占有布局
</p>
<p>看看效果</p>

.p2{
visibility: hidden;
width:200px;
height:200px;
border:1px solid red;
}

3.display:none은 레이아웃에 영향을 주지 않습니다

<p class="p3">
这是第三个p display:none不会影响到布局 
</p>
<p>不信你看</p>

.p3{
display: none;
width:200px;
height:200px;
border:1px solid red;
}

4.position:absolute는 레이아웃에 영향을 주지 않습니다

<strong><p class="p4"><br>这个是第四个p 我觉得也不会影响到布局 但是到底会不会 一起来看看吧 果然这个也不会影响到布局 <br></p><br><p>看看</p>v</strong>

.p4{
position: absolute;
top:-9999px;
left:-9999px;
width:200px;
height:200px;
border:1px solid red;
}

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. , more PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

추천 도서:

떠 있는 부분을 지우는 여러 가지 방법

텍스트의 초과 부분을 숨기는 방법

위 내용은 html+css의 네 가지 숨기기 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!