Div, span, relative, absolute, display, and visibility are HTML tags and CSS attributes that are easily confused and mistaken. Today, 52css.com simply lists their differences and usage points, for your reference.
I. Differences between Div and Span
DIV is a block-level element that can contain paragraphs, tables, and other content for different content. In general, we use Div to layout and locate each block in the webpage.
Span is an inline element and has no practical significance. It exists purely for applying styles, you can add the <span> </span> flag to a piece of content to set the style of the content by defining the style on the span.
Ii. Differences between relative and absolute
Relative: Position: Relative In css. It indicates absolute relative positioning. It refers to the original point of the parent level as the original point, and the original point of the body is the original point without a parent level, trbl is used for positioning. When the parent class has CSS attributes such as padding, the original points of the current level are located according to the original points of the parent level content area.
Absolute: Position: absolute; it indicates absolute positioning. It refers to the top left corner of the browser and works with top, right, bottom, and left (trbl) positioning. If no trbl is set, the original vertices of the affiliated network are marked as the original vertices Based on the parent node by default. If trbl is set and the position attribute is not set at the parent level, the current absolute is located at the original point in the upper left corner of the browser. The location is determined by trbl.
Iii. Differences between display and visibility
Both display: none and visibility: hidden can hide an element.
However, visibility: hidden only hides the content of the element, but its location space is still reserved.
Display: None removes the elements from the page, and the occupied position is also deleted.