Difference between Div and span, relative and absolute, display, and visibility

Source: Internet
Author: User
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.