CSS로 요소 숨기기를 제어하는 ​​방법

방법: 1. "불투명도:0;"을 사용합니다. 2. "가시성: 숨김;"을 사용합니다. 4. "위치:절대:-999px;"를 사용합니다. ,clip-path 속성을 사용하세요.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS를 사용하여 페이지 요소를 숨기는 방법에는 여러 가지가 있습니다.

첫 번째 방법: opacity: 0;opacity: 0;

opacity属性通常用于设置一个元素的透明度，从另一个角度来看，如果透明度为0，也就从视觉上隐藏了该元素。

这个属性不是为改变元素的边界框（bounding box）而设计的，元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。

第二种方法：visibility: hidden;

第二个要说的属性是visibility。

将它的值设为hidden将隐藏我们的元素。

如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。

与opacity唯一不同的是它不会响应任何用户交互。

此外，设置了该属性之后，元素在读屏软件中会被隐藏。

另外要注意的是，如果一个元素的visibility被设置为hidden之后，却想要显示它的某个子孙元素，只要将那个子孙元素的visibility显式设置为visible即可（样式覆盖）。

第三种方法：diaplay: none;

display属性依照词义才是真正地隐藏了元素。

将display属性设为none就能确保元素不可见并且连盒模型也不生成，使用这个属性，被隐藏的元素不占据任何空间。

不仅如此，一旦display设为none任何对该元素直接打用户交互操作都不可能生效。

此外，读屏软件也不会读到元素的内容，因为这种方式产生的效果就像元素完全不存在。

任何这个元素的子孙元素也会被同时隐藏。

为这个属性添加过度动画是无效的，他的任何不同状态值之间的切换总是会立即生效。

不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。

第四种方法：position: absolute;

假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity和visibility影响布局mdisplay不影响布局但又无法直接交互）。

在这种情况下，只能考虑将元素移出可视区域，这个办法既不会影响布局，有可能让元素保持可以操作。

具体是通过将position属性设置为absolute来实现（绝对定位）。

position: absolute;
top: -999px;
left: -999px;

第五种方法：clip-path

opacity 속성은 일반적으로 요소의 투명도를 설정하는 데 사용됩니다. 다른 관점에서 투명도가 0이면 요소는 다음과 같습니다. 숨겨진.

이 속성은 요소의 경계 상자를 변경하도록 설계되지 않았습니다. 요소 자체는 여전히 자체 위치를 차지하고 사용자 상호 작용에도 응답합니다.

두 번째 방법: visibility:hidden;

두 번째로 이야기할 속성은 가시성입니다. 🎜🎜값을 숨김으로 설정하면 요소가 숨겨집니다. 🎜🎜불투명도 속성과 마찬가지로 숨겨진 요소도 웹 페이지 레이아웃에 영향을 미칩니다. 🎜🎜불투명도와의 유일한 차이점은 사용자 상호 작용에 반응하지 않는다는 것입니다. 🎜🎜또한 이 속성을 설정하면 해당 요소가 화면 읽기 소프트웨어에서 숨겨집니다. 🎜🎜또 한 가지 주목해야 할 점은 요소의 가시성이 숨김으로 설정되어 있지만 하위 요소 중 하나를 표시하려는 경우 해당 하위 요소의 가시성을 명시적으로 표시(스타일 재정의)로 설정하기만 하면 된다는 것입니다. 🎜🎜🎜세 번째 방법: diaplay: none;🎜🎜🎜display 속성은 단어의 의미에 따라 요소를 실제로 숨깁니다. 🎜🎜요소가 보이지 않고 상자 모델도 생성되지 않도록 표시 속성을 없음으로 설정하세요. 이 속성을 사용하면 숨겨진 요소가 공간을 차지하지 않습니다. 🎜🎜그뿐만 아니라 디스플레이가 없음으로 설정되면 요소에 대한 직접적인 사용자 상호 작용 작업이 효과적이지 않습니다. 🎜🎜또한 화면 읽기 소프트웨어는 요소의 내용을 읽지 않습니다. 왜냐하면 이 방법은 요소가 전혀 존재하지 않는 것처럼 효과를 생성하기 때문입니다. 🎜🎜이 요소의 모든 하위 요소도 동시에 숨겨집니다. 🎜🎜이 속성에 과도한 애니메이션을 추가해도 아무런 효과가 없으며, 다른 상태 값 사이의 전환은 항상 즉시 적용됩니다. 🎜🎜그러나 이 요소는 여전히 DOM을 통해 액세스할 수 있습니다. 따라서 DOM을 통해 이를 조작할 수 있습니다. 🎜🎜🎜네 번째 방법: 위치: 절대;🎜🎜🎜상호작용하고 싶지만 웹페이지 레이아웃에 영향을 미치고 싶지 않은 요소가 있다고 가정해 보세요. 적합한 속성이 없습니다. 이 상황을 처리하십시오(불투명도 및 가시성은 레이아웃에 영향을 미치고 mdisplay는 레이아웃에 영향을 미치지 않지만 직접 상호 작용할 수 없습니다). 🎜🎜이 경우 요소를 표시 영역 밖으로 이동하는 것만 고려할 수 있습니다. 이 방법은 레이아웃에 영향을 주지 않으며 요소를 작동 가능한 상태로 유지할 수 있습니다. 🎜🎜 특히 이는 위치 속성을 절대(절대 위치 지정)로 설정하여 달성됩니다. 🎜

clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

🎜🎜다섯 번째 방법: clip-path🎜🎜🎜요소를 숨기는 또 다른 방법은 특히 클립 경로 속성을 통해 요소를 자르는 것입니다. 이 속성은 비교적 새로운 브라우저 기반 호환성입니다. 또한 상대적으로 가난할 것이다. 🎜rrreee🎜하지만 여전히 이해가 필요합니다. 🎜🎜(학습 영상 공유: 🎜css 영상 튜토리얼🎜)🎜

위 내용은 CSS로 요소 숨기기를 제어하는 ​​방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!