Solve the difference between display and visibility in CSS

Most people can easily confuse the display and visibility attributes of CSS. They seem to have no difference, but they actually have a big difference.
The visibility attribute is used to determine whether an element is displayed or hidden. visibility = "visible | hidden" is used to indicate that the element is displayed, while "hidden" indicates that the element is hidden ).
When visibility is set to "den", although the element is hidden, it still occupies its original position. Example: The first line of text triggers the "hidden" and "visible" attributes. Pay attention to the changes in the second line. Because visibility retains the position of the element, although the first line is invisible but the position is still there, the content of the second line will not move up or down. <P>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Note that when an element is hidden, it cannot receive any other event, so in the first code, when it is set to "hidden, you can no longer receive responses to events, so you cannot click the first text to display it.
On the other hand, the display attribute is a little different. The visibility attribute is used to hide an element but keep the floating position of the element. display is actually used to set the floating feature of the element.
When the display is set to block, all elements in the container will be treated as a separate block, just like the <div> element, it will be put into the page at that point. (In fact, you can set <span> display: block to work like <div>.
Setting display to inline will make its behavior the same as the element inline-even if it is a common block element such as <div>, it will also be combined into output streams like <span>.
The code and effect of my instance are as follows:Click on the blue text to view the effect. <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Finally, the display is set to none. In this case, the element is actually removed from the page, and the element below it will be automatically followed. (In this case, the elements that apply display: none; are equivalent to disappearing, while visibility: hidden; only indicates hiding and the position is still there .)
The display attribute is block, inline, none, and visibility: hidden. debugging example:<Br/> debugging when the display attribute is block, inline, none, and visibility: hidden; <p> This is a SPAN in a sentence. </p> <input type = "button" value = "Inline" onclick = "oSpan. style. display = 'inline' "> <input type =" button "value =" Block "onclick =" oSpan. style. display = 'block' "> <input type =" button "value =" None "onclick =" oSpan. style. display = 'none' "> <input type =" button "value =" Hidden "onclick =" oSpan. style. visibility = 'ddy' "> <Input type =" button "value =" Visible "onclick =" oSpan. style. visibility = 'visable' "> </p> <ul> <li> when an element is set as a block, a new line is wrapped behind the element. </Li> <li> setting an element as inline removes line breaks. </Li> <li> set the element to none to hide the element content. </Li> </ul> <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

For more information about the differences between display: inline; and float: left, see the following article:
(Display refers to the display status, inline indicates inline, and is characteristic of keeping close to the previous inline element. Usually, the default inline elements include span, a, em, strong, etc. Float indicates floating, float: left, which is the floating form of block-level elements and two States of different forms .)
Http://www.andymao.com/andy/post/42.html
Http://bbs.blueidea.com/thread-2596793-1-1.htmlXmlns = "http://www.w3.org/1999/xhtml">

If span is an inline/inline element, it is ineffective to assign a value to its width.
Span is an inline/inline element. Assign 100px + float: right to its width. You can see that it has a width.

This li is defined as inline/inline. Setting the width is ineffective.

• Test
• Test

This li is defined as inline/inline + float: left. Setting the width is effective.

• Test
• Test