The layout and positioning of the wonderful CSS

About layout and positioning is a very basic and important part of Web front-end development. An article that introduces relevant knowledge is easy to find. Although this is not a lot of knowledge, but if we do not understand, in the use of the time will often appear unexpected layout, these "accidents" sometimes very distressing. The following is a discussion of the key points in this area based on my learning and programming experience.

In order to achieve the perfect layout of their own, it must first clear the box model . The box model consists of a content area, an inner margin (padding), a border (border), and margin (margin). These property values are optional and do not have dependencies on each other, but you will need to set some properties for the specific layout. The width and height we normally set are actually the size of the content area, not the size of the entire element. Detailed information is as follows:

So now that we understand the box model, how do we let the elements be laid out according to our wishes? Let's look at the problem next.

In fact, when the browser placed HTML elements on the page, it was implemented using document flow. Just like a waterfall. Starting with the topmost element, the element is displayed from top to bottom, and the block element wraps itself, and each block element in the default occupies the entire width of the browser window. Inline elements are displayed in the horizontal direction from left to right, and the outer elements are expanded vertically from the upper-left to the lower-bottom.

About the flow and box model we also need to understand that when the browser displays two inline elements side-by-sides, the margins of the two original time are not coincident, the distance between the two borders is the sum of the margins, and when two block elements are placed up and down, their margins next to each other are collapsed. The margin shown is the maximum value in the outer margin. When an element is nested, a margin collapse problem occurs, which merges only the top and bottom margins, and the left and right margins do not merge. It is important to note that if the outer element has a border, then the margins of the two elements will not come together, and it is impossible to collapse. All we need to remember is that as long as two vertical margins come together, they collapse, even if nested. Floating elements are not collapsed because they are not already in the document flow.

About floats we need to understand that a floating box can move left or right until its outer edge touches the bounding box of the containing or another floating box. To float an element, you must set a width for the element. Although the floating element is not in the document flow, the position after it floats is still in the horizontal direction before the float . 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, and the following element fills the original position. Some elements will be below the floating elements, but the contents of these elements will not necessarily be obscured by floating elements, and when inline elements are positioned, they take into account the boundaries of the floating elements and are placed around floating elements. You can also think of floating elements as elements that are ignored by block elements, while inline elements focus on floating elements.

There are three basic positioning mechanisms for CSS: normal flow, floating, and absolute positioning. Unless specifically specified, all boxes are positioned in the normal stream. That is, the position of an element in a normal stream is determined by the position of the element in the (X) HTML. Position properties:

static: The element box is normally generated. 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. If you do not specify a positioning method for an element, the default static positioning method is used. In the case of static positioning, the element is placed in the normal flow of the document, and the browser completely determines the placement of the element. Although you can float the element with float, it is ultimately up to the browser to determine the final placement of the element.

relative: The element box offsets a distance. Relatively positioned elements flow into the page normally, but are offset on the page.

Absolute: The 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.

Absolute positioning (absolute), although it is also removed from the document flow, is different from the float, it does not remain horizontal with the original position, but is determined by the property values such as Top,right,bottom,left, which are relative to their parent elements. And the elements in the stream, whether they are block elements or inline elements, are no longer concerned with absolutely positioned elements , and they have no idea that there are absolutely positioned elements on the page. Therefore, it is advisable to set the appropriate margin (margin) for the following elements in order not to obscure elements of the document flow in an absolutely positioned element. The absolute positioning element also has a very interesting feature, which is that it can be layered and can be layered with the Z-index attribute, which specifies its position on a virtual z-axis (perpendicular to the page), and the Closer your element is to the Z-index value. Of course the Z-index attribute is not reserved for absolute positioning, and the element with relative positioning and fixed positioning also has this attribute. You do not need to set the width of the element when absolutely positioned, and if you do not specify a width, the block element defaults to the entire width of the browser (including Margin-left and margin-right, not just the width of the content).

fixed: the element box behaves like the position is set to absolute, but its containing block is the window itself. In other words, fixed positioning places elements in a position relative to the browser window (not relative to the page, HTML), and fixed-positioned elements do not move with the page scrolling.

The above has introduced the layout positioning needs to use the knowledge, then we can follow our own needs to implement the layout! There are a number of ways you can use HTML and CSS to create layouts, such as floating layouts, gel layouts, absolute layouts, and tabular layouts. To master the layout and positioning also need to practice more, only in the programming can be improved. Write so much first, then you will have time to add in the example.

The layout and positioning of the wonderful CSS