The difference between display and visibility
This time I will bring you the difference between display and visibility, what are the precautions when using display and visibility, the following are practical cases, one Get up and take a look.
visibilityHidden objects also retain the physical space occupied by the object when it is displayed, while display does not retain it.
vilibility:hidden(hidden)、visible(display) style="vislbility:hidden"
display:none(hidden)、block (Display) style="display:none"
You can save the code below to see the effect.
Specific steps:
Code example:
< p style="border:1px solid #000;background:#eee"> < span style="width:200;height:200;visibility:hidden"></span> ←SS属性为visibility:hidden的对象 < /p><br> < p style="border:1px solid #000;background:#666"> < span style="width:200;height:200;display:none"></span> ←SS属性为display:none的对象 < /p>
Special tips
Use visibility attribute to control hiding The object still occupies the position when it is displayed, while display does not.
Special Note
The display attribute sets the display mode of the element. The corresponding script feature is display. The optional values are none, block and inline. The description of each value is as follows:
none hides the element and does not retain the space when the element is displayed.
Display elements in block mode.
inline Displays the element inline.
inline-block objects are displayed as inline elements, but all child objects are displayed as block elements, and adjacent inline elements will be displayed on the same line, spaces are allowed.
list-item Displays block elements as list objects and can add item punctuation. (Requires IE6.0+ support)
table-header-group Display the element as a table header group, equivalent to the tHead element.
table-footer-group Displays the element as a table footer group, equivalent to the tFoot element.
The visibility attribute sets whether to display the element. The corresponding script feature is visibility. The optional values are inherit, hidden and visible. The description of each value is as follows:
inherit Inheritance The visibility attribute setting of the parent element.
hidden hides the element but retains the space it occupies.
visible display element (default).
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the use of background-attachment in CSS
css to create ripple animation
The above is the detailed content of The difference between display and visibility. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

C language functions are the basis for code modularization and program building. They consist of declarations (function headers) and definitions (function bodies). C language uses values to pass parameters by default, but external variables can also be modified using address pass. Functions can have or have no return value, and the return value type must be consistent with the declaration. Function naming should be clear and easy to understand, using camel or underscore nomenclature. Follow the single responsibility principle and keep the function simplicity to improve maintainability and readability.

Export password-protected PDF in Photoshop: Open the image file. Click "File"> "Export"> "Export as PDF". Set the "Security" option and enter the same password twice. Click "Export" to generate a PDF file.

C language functions are reusable code blocks. They receive input, perform operations, and return results, which modularly improves reusability and reduces complexity. The internal mechanism of the function includes parameter passing, function execution, and return values. The entire process involves optimization such as function inline. A good function is written following the principle of single responsibility, small number of parameters, naming specifications, and error handling. Pointers combined with functions can achieve more powerful functions, such as modifying external variable values. Function pointers pass functions as parameters or store addresses, and are used to implement dynamic calls to functions. Understanding function features and techniques is the key to writing efficient, maintainable, and easy to understand C programs.

H5. The main difference between mini programs and APP is: technical architecture: H5 is based on web technology, and mini programs and APP are independent applications. Experience and functions: H5 is light and easy to use, with limited functions; mini programs are lightweight and have good interactiveness; APPs are powerful and have smooth experience. Compatibility: H5 is cross-platform compatible, applets and APPs are restricted by the platform. Development cost: H5 has low development cost, medium mini programs, and highest APP. Applicable scenarios: H5 is suitable for information display, applets are suitable for lightweight applications, and APPs are suitable for complex functions.

The necessity of registering VueRouter in the index.js file under the router folder When developing Vue applications, you often encounter problems with routing configuration. Special...

Although C and C# have similarities, they are completely different: C is a process-oriented, manual memory management, and platform-dependent language used for system programming; C# is an object-oriented, garbage collection, and platform-independent language used for desktop, web application and game development.

Detailed explanation of XPath search method under DOM nodes In JavaScript, we often need to find specific nodes from the DOM tree based on XPath expressions. If you need to...

There are differences in the promotion methods of H5 and mini programs: platform dependence: H5 depends on the browser, and mini programs rely on specific platforms (such as WeChat). User experience: The H5 experience is poor, and the mini program provides a smooth experience similar to native applications. Communication method: H5 is spread through links, and mini programs are shared or searched through the platform. H5 promotion methods: social sharing, email marketing, QR code, SEO, paid advertising. Mini program promotion methods: platform promotion, social sharing, offline promotion, ASO, cooperation with other platforms.
