1: HTML Introduction
HTML refers to Hyper Text Markup Language. It is not a programming Language, but Markup Language-- Describe web pages by Tag. Here is a simple example:1In this example,
Generally, the skeleton of a webpage is as described in the preceding example:
Position allows you to define the position of an element relative to its normal location, or relative to the parent element, another element, or even the position of the entire browser window.
Div, h1, or p elements are often called block-level elements. This means that these elements are displayed as a block box ". In contrast, elements such as span and strong are called "in-row elements" because their content is displayed in the row, that is, "In-row boxes ". You can use the display attribute to change the type of the generated box. This means that by setting the display attribute to block, the elements in the row (such as <a> elements) can behave like block-level elements. You can also set display to none to make the generated elements have no boxes at all. In this way, the box and all its content are no longer displayed and do not occupy space in the document. However, in one case, block-level elements are created even if no explicit definition is made. This occurs when some text is added to the beginning of a block-level element (such as a div. Even if these texts are not defined as paragraphs, they are treated as paragraphs:1 <div>2 some text3 <p>Some more text.</p>4 </div>In this case, this box is called an unsung block box because it is not associated with a specially defined element. The text lines of block-level elements are similar. Suppose there is a paragraph that contains three lines of text. Each line of text forms an unknown box. You cannot apply a style directly to an untitled block or line box because there is no place to apply the style (note that the line box and the line box are two concepts ). However, this helps you understand that everything you see on the screen forms a certain frame.
1 #box_relative {2 position: relative;3 left: 30px;4 top: 20px;5 }As shown in:
#box_absolute { position: absolute; left: 30px; top: 20px;}
As shown in:
A floating box can be moved to the left or right until its outer edge hits the border of the contained box or another floating box. Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist.
When frame 1 is moved to the right, it is moved out of the Document Stream and to the right until its right edge hits the right edge of the contained box:
Next, when box 1 is floating to the left, it is detached from the document stream and moved to the left until its left edge hits the left edge of the contained box. Because it is no longer in the document stream, it does not occupy space. In fact, it overwrites Box 2 so that box 2 disappears from the view.
If all three boxes are moved to the left, box 1 floats to the left until the contained box is reached, and the other two boxes move to the left until the first floating box is reached.
As shown in, if the box is too narrow to accommodate three floating elements in a horizontal arrangement, the other floating blocks move down until there is enough space. If the height of floating elements is different, they may be "stuck" by other floating elements when moving down ":
5: understanding of box-module in CSS -- Introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
