Css box model, Document Stream, relative and absolute positioning, floating and clear model, css box

Css box model, Document Stream, relative and absolute positioning, floating and clear model, css box

 

I. Box Model in CSS Standard mode and hybrid mode (IE ). In standard mode, the browser displays the page according to the specifications. in hybrid mode, the page is displayed in a loose and backward compatible manner. The hybrid mode typically simulates the behavior of an older browser to prevent the old site from being unable to work. Html elements are generally divided into block-level elements and intra-row elements. Block-level elements: block-level elements exclude other elements from the same row. You can set width and height. Block-level elements are generally containers of other elements, it can accommodate block-level elements and intra-row elements, Common block-level elements include div, p, h1 ~ H6, ul, table, form, hr, etc. Each block element can be divided into several parts: context, padding, boder, and margin. We often say that width and height usually refer to the width and height of context (or context + padding, related to browsers ), Padding indicates the filling between the content and the border, and margin indicates the blank outside the border, for example: Row element: the width setting of the row element is invalid, the height setting is invalid (line-height can be set), the margin is invalid, and the padding is invalid, but it can be in the same row as other row elements, in-row elements cannot contain block-level elements. The height of an element in a row is generally determined by the font size inside the element, and the width is controlled by the length of the content. Common intra-row elements include a, em, strong, span, I, img, lable, button, and select. Differences between block-level elements and intra-row Elements You can modify the display attribute of the style to change whether the elements are displayed in blocks or in rows. When the display value is set to block, the elements are displayed in blocks; when the display value is set to inline, the element is displayed in the row form. If you want to set the width and height of an element and display it in rows, you can set the value of display to inline-block. Example: a{display:inline-block; width:100px; height:100px;} Ii. Document Stream model in CSS All block elements are arranged in the order in which they appear in the html document (of course, nesting is not included in this column), and each block will start with another line. For example Their corresponding html is as follows: <Div id = "div1"> div1 </div> <Div id = "div2"> div2 </div> <Div id = "div3"> div3 </div> To define their width, height, and border, we define the following CSS: # Div1 { Border: 1px solid #000099; Height: 60px; Width: 200px; Margin: 2px; } # Div2 { Border: 1px solid #000099; Height: 60px; Width: 200px; Margin: 2px; } # Div3 { Border: 1px solid #000099; Height: 60px; Width: 200px; Margin: 2px; } 3. relative and absolute positioning models in CSS In the document stream, each block element is arranged to a position in the stream. We can reschedule its position through the location attribute in CSS. Positioning is classified into relative positioning and absolute positioning. Relative positioning is relative to the position of the block element in the Document Stream. For example, we can use relative positioning to place div2 to the right of div1. the CSS code is as follows: # Div1 { Border: 1px solid #000099; Height: 60px; Width: 200px; Margin: 2px; } # Div2 { Border: 1px solid #000099; Height: 60px; Width: 200px; Margin: 2px; Position: relative; Top:-64px; Left: 204px; } # Div3 { Border: 1px solid #000099; Height: 60px; Width: 200px; Margin: 2px; } The following figure shows the effect: We can see an interesting phenomenon, that is, although we have removed div2, there is still a space between div1 and div3, indicating that the relative positioning elements occupy the file stream space, here div2 is a typical example of "standing without shit ". Absolute positioning can also be used to place div2 to the right of div1, and absolute positioning will not occupy the file stream space. For example, there is no blank between div1 and div3: CSS code of div2: # Div2 { Border: 1px solid #000099; Height: 60px; Width: 200px; Margin: 2px; Position: absolute; Top: 15px; Left: 214px; } Absolute positioning is a good thing. content can be displayed anywhere on the page, but for our programmers, we cannot use too much absolute positioning, because the program dynamically adds content to the div, the size of the div is unknown and the position of each div cannot be fixed. Iv. Floating and clearing models in CSS In CSS, the most difficult to understand is float and clear. Float can achieve this effect, that is, it should have a row of block elements. If the float attribute is defined, as long as the row space is sufficient, it will run behind the ass of other float elements, instead of occupying a single row, such: The div2 and div3 are both defined as floating. The Code is as follows: # Div2 { Border: 1px solid #000099; Height: 60px; Width: 200px; Margin: 2px; Float: left; } # Div3 { Border: 1px solid #000099; Height: 60px; Width: 200px; Margin: 2px; Float: left; } So under what circumstances do we need clear? This is because the float element is the same as the absolute positioning element and does not occupy the document space. Therefore, if we nest div2 and div3 in div1, div2 and div3 are both defined as floating. since they do not occupy the document space, div2 and div3 do not belong to div1 after being set to floating, therefore, div1, as the parent element, has no content to fill and does not know the automatic scaling size. As a result, div2 and div3 are displayed outside div1, as shown in figure The following is their html code: <Div id = "div1"> div1 <Div id = "div2"> div2 </div> <Div id = "div3"> div3 </div> </Div> The following is their css code: # Div1 { Border: 1px solid #000099; Height: 60px; Width: pixel PX; Margin: 2px; } # Div2 { Border: 1px solid #000099; Height: 60px; Width: 200px; Margin: 2px; Float: left; } # Div3 { Border: 1px solid #000099; Height: 60px; Width: 200px; Margin: 2px; Float: left; } Because float elements do not occupy the file stream space, and sometimes the elements overlap on the float element, I will not give an example here. To solve the problem above, you need to use clear on the element after float. In this example, we add an empty section after div3 and set it to clear, as shown below: <Div id = "div1"> div1 <Div id = "div2"> div2 </div> <Div id = "div3"> div3 </div> <P class = "clear"> </p> </Div> The clear attribute defines which side of an element cannot contain floating elements. The CSS code for the newly added empty section is as follows: . Clear { Clear: left; } In this case, div1 has the p content (although it is empty in p) and the clear: is left, so that the upper and outer border boundary of p is just under the bottom margin boundary of the floating element on it. ;