Shulou(Shulou.com)06/02 Report--

How to analyze the difference between DIV elements and SPAN elements, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, hope you can get something.

If you know the difference between DIV elements and SPAN elements, let's look at the concepts of inline elements and block-level elements.

The difference between DIV element and SPAN element

First of all, let's talk about two concepts, one is an inline element and the other is a block-level element. The industry element means that the content marked by the element will not affect the current structure, belonging to the application style, assisting the application of the style sheet, etc., while the block-level element is a block and occupies a separate line, which is equivalent to adding a line break before and after the element.

The most obvious difference between the two is that DIV (division) is a block-level element that can contain paragraphs, headings, tables, and even chapters, summaries, and comments. And SPAN is an inline element, there is no line wrapping before and after SPAN, it has no structural meaning, it is purely applied style, when other inline elements are not appropriate, you can use SPAN. A block element is equivalent to an embedded element with a newline before and after each. In fact, block elements and inline elements are not immutable. As long as you define a display:inline for a block element, a block element becomes an embedded element. Similarly, a display:block for an embedded element becomes a block element.

Specific steps for ◆:

Code example:

Div,span {border:1pxsolid#000;margin:2px;} div1div2span1 span2 div3 div4 span3span4

◆ hint: you can modify part of the code before running it.

◆ skills: some friends will say that DIV is a layer tag, in fact, there is no layer in HTML, just to make it easy to understand, Dreamweaver just wrote this, each object can become a "layer", only need to define the object position attribute (the value is absolute or relavite). For example, to make a picture a "layer", you can write code like this:

Special hint

This example code runs as shown in the figure. In order to better illustrate the problem, both the block element and the embedded element are added a solid black border with a width of 1 pixel. As can be seen from the figure, DIV defaults to the block element, and the display attribute value is defined as inline after the embedded element is displayed, while span defaults to the embedded element. After defining the display attribute value as block, it is displayed as a block element.

An important and practical feature of the SPAN tag is that it does nothing, and its purpose is to surround other elements in your HTML code so that you can assign styles to them.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.