[Original address] (http://blog.csdn.net/qq_18407565/article/details/70234834) css layout model-clear the basic concepts of CSS box model, box model type, we can in-depth discussion of web page layout The basic model. The layout model and the box model are the most basic and core concepts of CSS. But the layout model is based on the box model, which is different from the CSS layout styles or CSS layout templates we often say. If the layout model is the essence, then the CSS layout template is the end, an external form of expression. CSS includes three basic layout models, flow model, layer model and floating model in English as: Flow, Layer and Float. In the web page, there are three layout models for elements: 1. Flow model (Flow) 2. Floating model (Float) 3. Layer model (Layer) ———- Flow model (Flow) Let’s talk about the flow model first, flow ( Flow) is the default web page layout mode. That is to say, the HTML page elements of the webpage in the default state are all distributed according to the flow model. -Two features of the fluid layout model 1. Block elements will extend vertically in order from top to bottom within the contained element, because by default, the width of block elements is 100%. In fact, block elements will occupy positions in the form of rows. For example, the width of three block element tags (div, h1, p) in the code editor on the right is displayed as 100%. 2. In the flow model, inline elements are displayed horizontally from left to right within the contained element. (Inline elements are not as domineering as block elements dominate their own line) **Float model (Float)** If block elements are so domineering, they are all on their own line. What if we want to display two block elements side by side? Don't worry, you can achieve this wish by setting the element to float. Any element cannot be floated by default, but it can be defined as floating by CSS, such as div, p, table, img and other elements can be defined as floating. The following code can display two div elements in one line. **Layer** What is a layer layout model? The layer layout model is like the very popular layer editing function in the image software PhotoShop. Each layer can be accurately positioned and operated. However, in the field of web design, due to the activity of the size of the web page, the layer layout has not been popular. However, it is convenient to use layer layout locally on a web page. Let's learn about the layer layout in html. How to accurately position html elements in a web page, just like the layers in the image software PhotoShop, can accurately position each layer. CSS defines a set of positioning properties to support the layer layout model. **Layer model has three forms:** 1. Absolute positioning (position: absolute) 2. Relative positioning (position: relative) 3. Fixed positioning (position: fixed) The following are the specific details of the three forms of layer model-* *Layer Model-Absolute Positioning** If you want to set the absolute positioning in the layer model for an element, you need to set position:absolute (absolute positioning). The purpose of this statement is to drag the element out of the document flow, and then use left and right The, top, and bottom attributes are absolutely positioned relative to the closest parent containing block with positioning attributes. If there is no such containing block, it is relative to the body element, that is, relative to the browser window. -**Layer Model-Relative Positioning** If you want to set the relative positioning in the layer model for the element, you need to set the position: relative (representing relative positioning), which determines the offset position of the element in the normal document flow through the left, right, top, and bottom attributes. The process of relative positioning is to first generate an element in static (float) mode (and the element floats like a layer), and then move relative to the previous position. The direction and amplitude of the movement are determined by the left, right, top, and bottom attributes. , The position before the offset remains unchanged. -**Layer Model-Fixed Positioning** fixed: stands for fixed positioning, similar to the absolute positioning type, but its relative movement coordinates are the view (web page window in the screen) itself. Since the view itself is fixed, it will not change with the scroll bar of the browser window, unless you move the screen position of the browser window on the screen or change the display size of the browser window, so fixed positioning elements will always be located A certain position of the view in the browser window will not be affected by the document flow, which has the same function as the background-attachment:fixed; attribute. The following code can move 100px to the right and 50px down relative to the browser view. And the position is fixed when the scroll bar is dragged. 8Relative and Absolute are used in combination. The friends have learned the method of absolute positioning in section 12-6: use position:absolute to realize the positioning of the set element relative to the browser (body). Have you ever thought about whether it can be relative to others? How about element positioning? The answer is yes, of course. Use position: relative to help, but you must comply with the following specifications: 1. The reference-positioned element must be the predecessor of the relatively positioned element:
Positioning relative to reference elements
From the above code, we can see that box1 is the parent element of box2 (the parent element is of course also the predecessor element).
2. The reference positioning element must be added position: relative;
box1{
width:200px;
height:200px;
position:relative;
}
3. Add position:absolute to the positioning element, and then you can use top, bottom, left, and right for offset positioning.
box2{
position:absolute;
top:20px;
left:30px;
}In
this way, box2 can be positioned relative to the parent element box1 (note that the reference object here is not a browser, but can be set freely).