CSS layout model

CSS layout model
Like the box model, the layout model is the most basic and core concept of CSS. However, the layout model is based on the box model, which is different from the CSS layout style or CSS layout template that we often call. If the layout model is local, the CSS layout template is the end and an external representation. CSS contains three basic layout models: Flow, Layer, and Float. On the webpage, there are three layout models for elements: 1. Flow Model 2. Float model 3. Layer Model) 1. The Flow model first describes the Flow model. Flow is the default webpage Layout mode. That is to say, by default, the HTML web page elements of a webpage are distributed based on the flow model. The flow layout model has two typical features: At the first point, block elements are vertically distributed from top to bottom in the contained elements, because by default, the width of a block element is 100%. In fact, block elements occupy positions in the form of rows. For example, the width of the three block element labels (div, h1, p) in the code editor on the right is 100%. Second, in the flow model, inline elements are displayed horizontally from left to right in the contained element. (An inline element is not as overbearing as a block element ). 2. What if we want two block elements to be displayed side by side? Don't worry, set the element floating to achieve this desire. By default, no element can be floating, but can be defined as floating by CSS, such as div, p, table, img and other elements can be defined as floating. The following code displays two div elements in one row. Div {width: 200px; height: 200px; border: 2px red solid; float: left ;} <div id = "div1"> </div> <div id = "div2"> </div> you can set one or both of the two elements to display one row on either left or right: div {width: 200px; height: 200px; border: 2px red solid;} # div1 {float: left;} # div2 {float: right;} 3. What is a layer layout model? The layer layout model is like the layer editing function that is very popular in image software Photoshop. Each layer can be precisely positioned. However, in the field of web page design, due to the activity of the page size, the layer layout is not popular. However, it is convenient to use the layer layout on the webpage. Layer models have three forms: 1. absolute positioning (position: absolute) 2. relative positioning (position: relative) 3. fixed positioning (position: fixed) ☆absolute positioning (position: absolute) If you want to set absolute positioning in the layer model for the element, you need to set position: absolute (indicating absolute positioning). The function of this statement will drag the element out of the Document Stream, then, use the left, right, top, and bottom attributes to locate the parent inclusion block with the positioning attribute closest to it. If such a block does not exist, it is relative to the body element, that is, to the browser window. The following code moves the div element Px to the right of the browser window and 50 PX down. Div {width: 200px; height: 200px; border: 2px red solid; position: absolute; left: 100px; top: 50px ;} <div id = "div1"> </div> ☆position: relative if you want to set the relative position in the layer model for the element, you need to set the position: relative (indicating relative positioning), which determines the offset position of an element in a normal document stream through the left, right, top, and bottom attributes. The relative positioning process is to first generate an element in the 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, and the positions before the offset remain unchanged. The following code moves 50px down relative to the previous position and 100px to the right; # div1 {width: 200px; height: 200px; border: 2px red solid; position: relative; left: 100px; top: 50px;} <div id = "div1"> </div> what is "the position before the offset remains unchanged? For example, add a span tag to the end of the div tag, and write some text into the tag. The following code: <body> <div id = "div1"> </div> <span> the position before the offset remains unchanged, it cannot overwrite the previous div and does not have the position before the offset </span> </body>. It can be seen that, although the div element has an offset relative to the previous position, however, the previous position of the div element is retained, so the following span element is displayed after the previous position of the div element. ☆Position: fixed: indicates a fixed position, which is similar to the absolute positioning type, but its relative moving coordinate is the view (webpage window in the screen) itself. Because the view itself is fixed, it does not change with the scroll bar of the browser window, unless you move the position of the browser window on the screen, or change the display size of the browser window, therefore, fixed positioning elements are always located at a certain position in the browser window and are not affected by the flow of documents. This is the same as the background-attachment: fixed attributes attribute. The following code moves 100px to the right of the browser view and 50px to the bottom. The position remains unchanged when you drag the scroll bar. # Div1 {width: 200px; height: 200px; border: 2px red solid; position: fixed; left: 100px; top: 50px ;} <p> text. </P> .... ☆relative and Absolute use the absolute positioning learning method in combination: After position: Absolute can be used to set and locate the element to be set Relative to the browser (body, have you ever wondered if you can locate it relative to other elements? The answer is yes, of course. Use position: relative to help, but must comply with the following specifications: 1. the positioning element must be a predecessor element of the relative positioning element: <div id = "box1"> <! -- Locate by reference element --> <div id = "box2"> locate by reference element </div> <! -- Relative positioning element --> </div> from the code above, we can see that box1 is the parent element of box2 (the parent element is also a predecessor element of course ). 2. position: relative; # box1 {width: 200px; height: 200px; position: relative;} 3. Add position: absolute to the positioning element, you can use top, bottom, left, and right to locate the offset. # Box2 {position: absolute; top: 20px; left: 30px;} So that box2 can be located relative to the parent element box1 (note that the reference object is not a browser, but can be set freely ). CSS code abbreviation ☆box Model Code abbreviation when talking about the box model, the margin (margin), the padding (padding) and the border (border) set the margins in the upper, lower, and left directions in clockwise direction: Top, right, bottom, and left. An example of the specific application in margin and padding is as follows: margin: 10px 15px 12px 14px; /* set to 10px on the top, 15 PX on the right, 12px on the bottom, and 14px on the left */There are usually three Abbreviations: 1. If the top, right, bottom, and left values are the same, for example, the following code: margin: 10px 10px 10px; can be abbreviated as: margin: 10px; 2. If the top and bottom values are the same, the left and right values are the same, for example, the following code: margin: 10px 20px 10px 20px; can be abbreviated as: margin: 10px 20px; 3. If the left and right values are the same, see the following code: margin: 10px 20px 30px 20px; Abbreviation: margin: 10px 20px 30px; note: the abbreviation of padding and border is the same as that of margin. ☆Color value Abbreviations The css style of color can also be abbreviated. When the color you set is a hexadecimal color value, if the two values are the same, you can be abbreviated to half. Example 1: p {color: #000000 ;}can be abbreviated as: p {color: #000 ;}example 2: p {color: #336699 ;}can be abbreviated: p {color: #369;} ☆the font css style code in the webpage can also be abbreviated. The following Code sets the font for the webpage: body {font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 12px; line-height: 1.5em; font-family: "", sans-serif;} so many lines of code can be abbreviated as one sentence: body {font: italic small-caps bold 12px/1.5em "", sans-serif;} note: 1. You must specify at least the font-size and font-family attributes, and other attributes (such as font-wei Ght, font-style, font-varient, line-height) if not specified, the default value is automatically used. 2. Add "/" to the center of font-size and line-height. Generally, because there are few Chinese websites in English, the following code abbreviations are commonly used: body {font: 12px/1.5em "", sans-serif ;} only font size, line spacing, Chinese font, and English font settings are available. Unit and value in CSS ☆the color settings of the color value in the webpage are very important, including the font color, background-color, and border color, there are also many ways to set the color: 1. English command color p {color: red;} 2. RGB color, which is consistent with the RGB color in photoshop, by R (red) G (green), B (blue) Three colors ratio to color. P {color: rgb (133,45, 200);} the value of each item can be 0 ~ An integer between 255 and 0% ~ The percentage of 100%. For example: p {color: rgb (20%, 33%, 25%);} 3. The hexadecimal color setting method is widely used, the principle is actually RGB settings, but the value of each item is changed from 0-255 to hexadecimal 00-ff. P {color: #00 ffff;} ☆length value unit summary. Currently, px, em, and % are commonly used. Note that these three units are relative units. 1. Why is the pixel relative unit? Because pixels refer to small dots on the display ("90 pixels = 1 inch" in CSS specifications "). The actual situation is that the browser will use the actual pixel value of the display, and most designers currently tend to use pixel (px) as the unit. 2. em is the font-size value of the given font of the current element. If the font-size of the element is 14px, 1em = 14px; if the font-size is 18px, 1em = 18px. The following code: p {font-size: 12px; text-indent: 2em;} the code above can be used to indent the first line of a paragraph by 24px (that is, the distance between two font sizes ). Note the following special case: but when the unit of font-size is set to em, the calculation standard is based on the font-size of the parent element of p. The following code: html: <p> take the <span> example </span> as an example. </P> css: p {font-size: 14px} span {font-size: 0.8em ;} result The font size of the font "example" in span is 11.2px (14*0.8 = 11.2px ). 3.% p {font-size: 12px; line-height: 130%} set the Row height (row spacing) to 130% (12*1.3 = 15.6px) of the font ).