简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

[HTML/CSS]display:none和visibility:hidden的区别_html/css_WEB-ITnose

WBOY
풀어 주다： 2016-06-24 11:49:51
원래의
1397명이 탐색했습니다.

写在前面

在群里有朋友问这样一个问题，display:none的标签，影响了布局。这就引出了本篇这样的问题，印象中display:none的块元素是不占位置的。

一个例子

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title></head><body>    <div style="width:100%;height:200px;border:1px solid red;">第一个层</div>    <div style="width:100%;height:200px;border:1px solid black;">第二个层</div></body></html>
로그인 후 복사

浏览结果

为第一个层设置样式visibility:hidden

    <div style="width: 100%; height: 200px; border: 1px solid red; visibility: hidden;">第一个层</div>    <div style="width:100%;height:200px;border:1px solid black;">第二个层</div>
로그인 후 복사

　　浏览结果

那么为第一个层设置display:none样式

通过上面的对比，你也会发现display:none可以让块元素隐藏并不占位置。而visibility:hidden虽然使块元素隐藏了，但仍占位置。

总结

1、display:none：元素隐藏，不占位置。

2、visibility:hidden：元素隐藏，占位置。

관련 라벨：
[HTML/CSS]display:none和visibility:hidden的区别
원천：php.cn
이전 기사：最近Get到的一些HTML/CSS中的小点（一）_html/css_WEB-ITnose 다음 기사：CSS--LESS入门_html/css_WEB-ITnose
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
입력 태그에 대한 CSS 속성 선택기와 의사 요소의 차이점 **CSS 파일 내부: **input[type="text"]{border:2pxsolidred;}input::placeholder{color:g...
에서 2023-09-10 15:43:12
0
1
184
정적 웹사이트와 동적 웹사이트 모두 개발 과정에서 코딩이 필요합니다. 두 웹사이트의 차이점은 무엇인가요? 질문이 있습니다: html/css/js 코드 등을 사용하여 개발된 정적 사이트와 동적 사이트의 차이점은 무엇입니까? 나에게 보여줄 수 있는 몇 가지 예가 있나요?
에서 2023-09-08 00:04:03
0
1
272
RMarkdown의 고정 테이블 헤더와 유사한 Quarto에서 함수 만들기 RMarkdown에서 성공적으로 수행한 것처럼 Quarto의 table1R 패키지에서 고정 테이블 헤더를 렌더링하려고 했습니다. 그러나 Quarto가 내 .css...
에서 2023-08-29 17:12:38
0
1
264
React 애플리케이션에서 라이브 서버를 사용할 수 없는 이유는 무엇입니까? 라이브 서버를 사용하여 React 애플리케이션을 제공하는 것이 불가능하다는 것을 알고 있습니다. 즉, js가 번들로 묶여 HTML 파일에 링크되어 있어도 파일을 ...
에서 2023-08-28 10:32:47
0
1
253
div 태그 대신 HTML5 시맨틱 태그를 선택하는 이유는 무엇입니까? 단순히 div를 사용하고 원하는 CSS로 설정하는 대신 헤더, 섹션, 탐색 및 기사와 같은 HTML5 의미 태그를 사용하는 이유는 무엇입니까? 웹페이지를 만들어서...
에서 2023-08-22 23:00:37
0
2
220
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！