CSS에서 display:none과 visible:hidden의 구체적인 차이점에 대한 자세한 설명
디스플레이:없음은 존재하지 않고 로드되지 않은 것으로 처리됩니다. 즉, 숨겨진 개체를 위해 물리적 공간이 예약되지 않습니다. 즉, 개체가 페이지에서 완전히 사라집니다.
visibility:hidden은 숨기지만 탐색할 때 위치를 유지합니다. 즉, 웹 페이지에서 개체를 보이지 않게 하지만 웹 페이지에서 개체가 차지하는 공간은 변경되지 않습니다.
display:none 속성을 사용한 후 HTML 요소(객체)의 너비, 높이 및 기타 속성 값이 "손실"됩니다.
visible:hidden 속성을 사용한 후 HTML 요소는 (객체)는 시각적으로만 볼 수 있습니다. 보이지 않는(완전히 투명함), 그것이 차지하는 공간적 위치는 여전히 존재합니다. 즉, 높이, 너비 등의 속성 값은 그대로 유지됩니다.
코드 데모:
테이블의 초기 상태:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title></title></head><body>
<table id="table1" style="border: 2px dashed red;background-color: #e2e2e2;padding: 5px">
<tr>
<td>A1 </td>
<td>A2 </td>
</tr>
<tr>
<td>B1 </td>
<td>B2 </td>
</tr>
</table></body></html>효과는 다음과 같습니다.
테이블의 두 번째 행에 있는 tr에 style="max-width:90%"을 추가한 후:
테이블에서 두 번째 줄의 tr에 style="max-width:90%"을 추가한 후:
display:none 및 visible:hidden은 둘 다 웹 페이지에서 요소를 숨길 수 있지만 둘 사이에는 차이점이 있습니다.
display :none ---숨겨진 개체를 위한 물리적 공간을 예약하지 마세요. 즉, 일반인의 관점에서 개체는 페이지에서 완전히 사라지며 보거나 만질 수 없습니다.
visible:hidden--- 웹 페이지에서 개체가 보이지 않게 하지만 웹 페이지에서 개체가 차지하는 공간은 변경되지 않습니다. 일반인의 용어로는 보이지 않지만 만질 수 있다는 의미입니다.
예:
<html> <head> <title>display:none和visible:hidden的区别</title> </head> <body > <span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br /> <span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span> </body> </html>
위 내용은 CSS에서 display:none과 visible:hidden의 구체적인 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7470
15
1377
52
77
11
48
19
19
29
유출된 셀카 디스플레이가 이전에 저렴했던 카메라 라인에 복잡성을 추가함에 따라 Fujifilm X-M5 가격 기대치가 높아졌습니다.
Sep 07, 2024 am 09:34 AM
Fujifilm 팬들은 최근 X-T50의 전망에 매우 흥분했습니다. X-T50은 1,000달러 미만 APS-C 카테고리에서 꽤 인기를 끌었던 예산 중심의 Fujifilm X-T30 II의 재출시를 선보였기 때문입니다. 안타깝게도 후지필름 X-T50이 출시되면서
Apple Studio Display의 전원 코드는 분리 가능하지만 특별한 도구가 필요합니다
May 17, 2023 pm 03:05 PM
Apple Studio Display는 이제 공식적으로 매장에서 판매되고 있으며 전 세계의 많은 고객이 제품을 구입했습니다. ProDisplayXDR과 달리 StudioDisplay에는 제거할 수 없는 것처럼 보이는 고유한 전원 커넥터가 있습니다. 케이블은 제거가 가능한 것으로 밝혀졌지만 케이블을 제거하려면 특별한 도구가 필요합니다. Apple은 자사 웹사이트에서 Studio Display의 전원 코드는 분리할 수 없다고 밝혔으며 많은 사용자가 그렇게 생각합니다. 손으로 케이블을 빼는 것은 불가능해 보이지만 다행히 케이블은 모니터에서 분리될 수 있기 때문이다. , Apple에는 새로운 StudioDispl에서 정보를 추출하기 위한 특수 도구가 있습니다.
참고:Apple Studio Display와 Samsung Smart Monitor M8 비교
May 11, 2023 pm 10:46 PM
삼성 스마트 디스플레이 M8 vs. 애플 스튜디오 디스플레이: 디자인과 크기 애플 스튜디오 디스플레이는 출시 이후 비교적 단순한 L자형 스탠드에 비교적 얇은 패널로 구성된 아이맥과 비교돼 왔다. 이는 잘 알려져 있고 많은 사랑을 받는 미학인데, 삼성은 이를 프레젠테이션에 차용한 것 같습니다. Samsung SmartMonitor M8은 매우 유사해 보이는 스탠드에 얇은 화면을 적용한다는 동일한 아이디어를 사용합니다. 왼쪽 하단 모서리의 작은 부분이 조금 튀어나온 점, 삼성의 턱 부분이 매우 얇은 등 일부 자잘한 요소는 다르지만 기본적인 디자인 면에서는 거의 비슷한 것 같습니다. 삼성은 24인치 아이맥에서 많은 영감을 얻은 것 같습니다. 애플의 디스플레이는 삼성보다 작다.
삼성: E Ink 기술을 기반으로 한 새로운 대형 디스플레이는 색상을 표시하고 무선으로 통신합니다.
Jun 19, 2024 pm 03:37 PM
우리는 e-리더와 같은 전자 잉크를 사용하는 디스플레이 기반 장치에 대해 자주 보고합니다. 이 기술은 여러 가지 장점을 제공합니다. 백라이트 없이 밝은 환경에서 읽을 수 있으며 조명 없이 전환할 때만 전원이 필요합니다.
비교: Apple Studio Display와 LG UltraFine 5K 디스플레이: 어느 것이 더 낫습니까?
Apr 16, 2023 pm 08:25 PM
StudioDisplay와 LG UltraFine5KDisplay는 시장에서 비슷한 위치를 차지하고 있지만 Apple의 모니터는 300달러 더 비쌉니다. 이 모니터를 비교하는 방법에 대해 알아야 할 모든 것이 있습니다. 6년은 기술 분야에서 긴 시간이며, Apple이 5,000달러 미만의 브랜드 모니터를 판매한 이후이기도 합니다. 이 기간 동안 Apple은 LG와 제휴하여 특별히 Mac 사용자를 대상으로 한 LG UltraFine 시리즈를 판매했습니다. 2019년에 Apple은 저렴한 Mac용 디스플레이인 ProDisplayXDR을 선호하여 LG 모니터 판매를 중단했습니다.
Apple Studio Display를 지원하도록 Boot Camp가 업데이트되었습니다.
May 20, 2023 pm 11:34 PM
Mac에서 Windows를 실행하는 IntelMac 사용자는 이제 BootCamp에서 드라이버를 업데이트하여 Apple의 StudioDisplay를 지원할 수 있습니다. Apple은 정기적으로 BootCamp를 업데이트하여 새로운 하드웨어에 대한 지원은 물론 일반적인 호환성 및 성능 개선을 도입합니다. 3월 소프트웨어 업데이트에서 Apple은 BootCamp가 새로운 StudioDisplay와 작동하도록 활성화했습니다. BootCamp를 버전 6.1.17로 가져오는 업데이트에는 두 가지 주요 지원 요소가 도입되었습니다. 첫째, StudioDisplay와의 호환성을 추가하여
표시해 그게 무슨 뜻이야
Oct 26, 2023 am 11:50 AM
디스플레이란 일반적으로 데이터, 정보 또는 결과를 어떤 방식으로든 사용자에게 표시하거나 이를 화면이나 기타 장치에 출력하는 작업 또는 기능을 말합니다. 구체적인 의미: 1. 명령줄 인터페이스(CLI)에서 디스플레이는 사용자가 보거나 분석할 수 있도록 텍스트, 표 또는 기타 형식의 데이터를 터미널 창에 출력하는 것을 의미할 수 있습니다. 2. 그래픽 사용자 인터페이스(GUI)에서 디스플레이를 의미합니다. 사용자 상호 작용이나 탐색 등을 위해 애플리케이션 창이나 인터페이스에 이미지, 텍스트, 차트 및 기타 콘텐츠를 표시하는 것을 의미할 수 있습니다.
Apple Studio Display는 몇 가지 제한 사항이 있지만 Windows에서 작동합니다.
Apr 14, 2023 pm 03:49 PM
Apple은 이번 주에 사용자가 Mac에 디스플레이를 연결할 때 함께 작동하는 카메라, 마이크, 스피커를 결합한 27인치 5K 패널을 갖춘 Studio Display를 발표했습니다. 창문은 어디에 있나요? 어떤 이유로 Windows PC에서 Apple의 1,599달러 모니터를 사용해야 한다면 그렇게 할 수 있지만 몇 가지 제한 사항이 있습니다. Thunderbolt 연결을 통해 Windows PC에 연결하면(일부 PC에서는 지원되지 않음) StudioDisplay가 일반 모니터로 인식됩니다. 즉, Windows에서 사용하기 위해 이들 중 하나를 구입한다면 기억하고 싶을 것입니다.
