简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

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

WBOY
Release： 2016-06-24 11:49:51
Original
1396 people have browsed it

写在前面

在群里有朋友问这样一个问题，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>
Copy after login

浏览结果

为第一个层设置样式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>
Copy after login

　　浏览结果

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

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

总结

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

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

Related labels：
[HTML/CSS]display:none和visibility:hidden的区别
source：php.cn
Previous article：最近Get到的一些HTML/CSS中的小点（一）_html/css_WEB-ITnose Next article：CSS--LESS入门_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
The difference between CSS attribute selectors and pseudo-elements for input tags **Inside the CSS file: **input[type="text"]{border:2pxsolidred;}input::placehold...
From 2023-09-10 15:43:12
0
1
184
Coding is required during the development process of both static and dynamic websites. What are the differences between them? I have a question: What is the difference between static sites and dynamic sites developed...
From 2023-09-08 00:04:03
0
1
272
Create a function in Quarto similar to fixed table header in RMarkdown I've been trying to render a sticky table header from the table1R package in Quarto, like ...
From 2023-08-29 17:12:38
0
1
264
What is the reason why live server cannot be used in React application? I know it's not possible to serve a React application using a live server. In other words,...
From 2023-08-28 10:32:47
0
1
253
Why choose HTML5 semantic tags instead of div tags? Why use HTML5 semantic tags such as headers, section, nav and article instead of simply us...
From 2023-08-22 23:00:37
0
2
220
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！