CSS layout positioning series: (1) Basic knowledge and normal flow Positioning

Http://brainjar.com/css/positioning/default.asp

Translation: 0. For reprint, please indicate the source of the original English text and the address of this article. Due to my limited level of English, please read the original article if you do not understand it!

View W3C CSS standard recommendations.

CSS positioning

Understanding how to layout the page content helps us make better use of CSS layout. This article provides some methods and rules in the css2 specification. It also points out some things that we need to pay attention.

Although the specification applies to any Web display device, this article focuses only on how it works in a browser. For simplicity, we ignore many details. For more precise references, read the standard documentation.

Remember that a specific browser does not support certain features or does not correctly execute these features. In addition to standard support, Some browsers may slightly deviate from these differences.

Box Model

To understand CSS positioning, you must first understand the box model. For display, each element in the document is considered a rectangular box with a content field surrounded by padding, border, and margin. the following illustration shows different parts.

Content content

Margin border padding content

Margin is always transparent. Border can have different styles. Setting a background style for an element will be applied to the padding and content fields in border. To make it clearer, the padding field above has a dark background.

When this article involves the box, the terms "margin edge" and "border edge" (margin edge and bodder edge) refer to the outer edge similar to the above box!

Marging, border, and padding are optional (Optional). To calculate the position and size, if not specified, they have a default value of zero. If needed, each visible side can have different widths (here, it refers to the four sides of the border, because only the border is visible, the Translator's note ). Margin can even have negative values!

The width and height of each box are equal to the width and height of the margin. Note that the box size is not always the size of the content field (which can be yes ).

A box can contain any number of other boxes. Adding a box with layers is equivalent to inserting a page element. The browser window is the root element of all layers.

Box Type

There are two basic types of boxes: block and inline, which are sometimes translated as inline elements in China ). Block-level boxes are generated by elements such as P, Div, or table. An in-row box consists of tags such as B, I, or span, as well as content text and images.

The box type can be changed through the diplay attribute. For example, setting a block value for an element in a row can make the element have the features of block-level elements. Note: If you set the display attribute to none, this box will not be generated and will not be displayed by the browser. Similarly, any elements in this box will be ignored by the browser, whether or not they are declared as other attributes!

Some special elements such as list and table have other box types. However, if it is for positioning, other box types of these elements will also be viewed as block or Inline, which will not be considered here.

Contained block

For all elements in a block-level box, this block-level box can be regarded as their contained blocks. For example, the following code:

<Div>
This is the first sentence.
<P> This is the second sentence. </P>
</Div>

This Div element creates an inclusion block for the first text and the following P elements. The P element creates another inclusion block for the text in it.

It is interesting to note that the first line of text in the above example produces a row-class box. Here we think the following block-level box is around it. An anonymous block-level box like this is used to simplify location processing. The result is that such a block-level box can only contain the row-level box, or can only contain the block-level box, and even some such block-level boxes can only be around the row-level box.

The inclusion block is used to calculate the position and range of the element box in it. For example, if the style of an element is {width: 50%}, its width is set to half of the contained block.

For any element without absolute positioning, its contained block is considered as the block-level box with the closest content edge to the parent block. If such a parent box does not exist, its block-level box is the browser window. We separate the absolute positioning elements.

Positioning Mode

Css2 has three positioning modes: Normal, float, and absolute. Each type has its own independent rules. Each box can only use one of the three types. Different boxes select different models based on their own positioning and floating style settings.

Normal Flow)

Normal streams are located by default. Any element that does not specify the {position: absolute} or {position: Fixed} attribute and is not floating will get this attribute by default.

In this way, the block-level boxes expand vertically one by one in their contained blocks, and the row boxes arrange horizontally from left to right in their contained blocks.

You should note that vertical margin overlaps in normal streams. That is to say, the margin between the upper and lower boxes is determined by the elements with a large margin, rather than their sum! The following illustration illustrates this.

Content content

Of course, in the horizontal direction, the margins of block-level elements never overlap.

If needed, the intra-row block can be broken. When the width is limited, it will automatically move to the next row. This may produce some ugly results if the block in the row has a border. See the following results:

Content content

According to the standard, the intersection of the above two edges should only display three edges. No one said that standards are perfect.

(To be continued ~~~~ ·)