Home > Web Front-end > CSS Tutorial > What are the differences between SPAN elements and DIV elements_Experience exchange

What are the differences between SPAN elements and DIV elements_Experience exchange

WBOY
Release: 2016-05-16 12:09:27
Original
1616 people have browsed it

When I was doing adaptive Skin a few days ago, I learned about the meaning of block. Found such a problem.
What is the difference between SPAN element and DIV element?
Solution:
The most obvious difference is: DIV is a block element and SPAN is an inline element. Block elements are equivalent to inline elements with a
line break before and after. In fact, block elements and inline elements are not static. As long as display: inline is defined for a block element, the block element becomes an inline element. Similarly, if display: block is defined for an inline element, it becomes a block element.
Specific steps:


[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Tip: Some friends will It is said that DIV is a layer tag. In fact, there is no such thing as a layer in HTML. It is just written like this in Dreamweaver for easy understanding. Each object can become a "layer". You only need to define the position attribute for the object (the value is absolute or relavite). For example, to make a picture a "layer", you can write the code like this:

Special Tips
The running effect of this example code (click to run the code) is shown. In order to better illustrate the problem, here are the block elements and Inline elements are added with a 1 pixel wide red solid border. As you can see from the picture, DIV defaults to a block element. Define the display attribute value to inline and display it as an inline element. SPAN defaults to an inline element. Define display If the attribute value is block, it will be displayed as a block element.
Special Notes

This example mainly explains the usage and meaning of the two values ​​block and inline of the display attribute.
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template