The positioning of CSS in HTML

Source: Internet
Author: User

1. Positioning and Floating:

2. Everything is box:

Block element: Div,h1,p ... Row element: The meaning of the Span,strong......position property value: Thestatic element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element. The relative element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains. The absolute element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow. The fixed element box behaves like the position is set to absolute, but its containing block is the window itself. Tip: Relative positioning is actually considered part of the normal flow positioning model, because the position of the element relative to its position in the normal stream

3. Relative positioning:

The element box set to relative positioning offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains. #box_relative {    position:relative;    left:30px;    top:20px;}

4. Absolute positioning:

An element box set to absolute positioning is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element had not existed. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow. #box_relative {  position:absolute;  left:30px;  top:20px;}

5. Floating:

The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box. Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist.
Float:right;

  

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.