Display and hide of DIV elements, and differences between DIV elements and SPAN Elements

The visibility of div can control the display and hiding of div, but the page is blank after hiding:

Style = "visibility: none ;"

Document. getElementById ("typediv1 ").Style. visibility = "hidden"; // Hide

Document. getElementById ("typediv1 ").Style. visibility = "visible"; // Display

By setting the display attribute, you can hide the div and release the occupied page space, as shown below:

Style = "display: none ;"

Document. getElementById ("typediv1"). style. display = "none"; // hide

Document. getElementById ("typediv1"). style. display = ""; // display

The most obvious difference is that DIV is a block element, and SPAN is an embedded element. The block element is equivalent to adding a <br> line feed to the embedded element before and after each line. In fact, the block element and the Row Element are not static. As long as the block element is defined as display: inline, the block element becomes an embedded element. Similarly, the embedded element is defined as display: block becomes a block element.

Procedure:

Sample Code:

<Style>

Div, span {border: 1px solid #000; margin: 2}

</Style>

<Div> div1 </div> <div> div2 </div>

<Span> span1 </span> <span> span2 </span>

<Br>

<Div style = "display: inline"> div3 </div>

<Div style = "display: inline"> div4 </div>

<Span style = "display: block"> span3 </span>

<Span style = "display: block"> span4 </span>

Tip: Some friends may say that DIV is a layer tag. In fact, there is no layer in HTML, but it is written in Dreamweaver for ease of understanding, each object can be a "layer". You only need to define the position attribute (value: absolute or relavite) for the object ). For example, to make an image a "layer", you can write the code as follows:

Note

In this example, the code running effect 2.1.6.3 is shown. to better illustrate the problem, a black solid-line border with 1 pixel width is added to both block elements and embedded elements. You can see that DIV is a block element by default, when the value of the display attribute is defined as inline, embedded elements are displayed, while SPAN elements are embedded elements by default. When the value of the display attribute is defined as block, block elements are displayed.

Figure 2.1.6.3 mutual conversion between elements and embedded Elements

Note

This example mainly describes the usage and significance of the two value blocks and inline of the display attribute.