CSS easy to confuse knowledge point summary and share-location and layout

CSS positioning has four modes: static, relative, absolute, fixed, other static is the default value, the following respectively explain the respective characteristics;

Static positioning, in the dynamic layout flow, according to the page of the order of the elements, parent-child relationship automatic arrangement and layout, each static positioning elements occupy a space of dynamic layout;

Relative: relative positioning, in the dynamic layout flow, if the offset (left or top value) is set, the position adjustment is based on the previous element in the dynamic layout flow (i.e., set to static and relative elements);

Absolute: Absolute positioning, not in the dynamic layout stream, the presence of the element is ignored in the dynamic layout stream (that is, the footprint of the class element is not computed and the default is the upper layer of the normal element that is not set Z-index), and if the offset (left or top value) is set, the corresponding position is adjusted. The criterion of position adjustment is based on the non-static positioning of the parent element (or non-static positioning of the package element), if there is no qualified parent element, the body is the standard, if the offset is not set, the element is directly the current position of the default offset, in addition, the absolute positioning has a wrap-property, When block-level elements are absolutely positioned, the default width and height of the element are automatically adapted to the content of the element, unless the width and height of the element are set by the display;

FIX: Fixed positioning, not in the dynamic layout stream, the presence of the element is ignored in the dynamic layout stream (that is, the space occupied by the class element is not computed and the default is the upper layer of the normal element that is not set Z-index), and if the offset (left or top value) is set, the corresponding position is adjusted. The position adjustment criterion is based on the browser window (can be understood as body), if not set the offset, the element is directly the current position of the default offset, in addition, fixed positioning has a parcel, that is, block-level elements are fixed positioning, unless the display set the width and height of elements, Otherwise, the default width and height of the element are automatically adapted to the content of the element, and if the set or default bit offset is greater than the browser window range, it is not displayed;

Here are the demo codes for the above four positioning methods:

<! DOCTYPE html>
The results shown are as follows:
Understanding the principles and functions of CSS positioning, we can use CSS positioning to achieve common page layout
The first type: Left and right layout, fixed size on the left, adaptive to the width of, the code is as follows:
<! DOCTYPE html>
The implementation results are as follows:
When you look at the code, you may wonder why you put the content on the left instead of the right, because the content needs to remain adaptive to the width, namely: 100%, then it must occupy the entire line of space, only with relative positioning, and then set the left offset to the location that needs to be vacated, That is: 200PX; This implements a non-left 200PX bit, the rest is the content area; Sidebar This must be set to absolute positioning because it cannot be set in position without floating, set its left offset to 0PX, and its width set to 200PX This will be positioned to the left content empty area, so as to achieve the entire page left and right layout.
The second type: Left and right layout, the left-hand width adaptive, fixed on the rights, the Code is as follows:
<! DOCTYPE html>
The implementation results are as follows:
Implementation of the principle: the content element to the left floating, because the float also has a package, so it must display a set width of 100%, but the right side needs to place the sidebar, so the margin is set to -200px, Allows subsequent elements (i.e., sidebar) to enter the 200PX space on the right side of the content element, and then sets the sidebar element to the left, with the width set to 200PX, so that it can be positioned on the right side of the content element, Because the content element's right side is occupied by the sidebar element 200PX, the content element is added with a content-inner element, and its right margin is set to 200PX, which forms the right 200PX to be vacated, This avoids being obscured by sidebar elements, thus forming the left and right layout of the Web page as a whole.
The third type: Left and right layout, fixed width around, middle width adaptive, the code is as follows:
<! DOCTYPE html>
The implementation results are as follows:
Implementation principle: First set the warper element to relative positioning, to ensure that the three div elements wrapped in the positioning is unified based on the Warper element, and then the left element and the right element are set to fixed positioning and width of 200PX (width can be set according to the actual situation), and set the bit offset of the left element to Left=0,top=0 (or, of course, without the display setting, because this is the default), set the bit offset of the right element to right=0 so that it is fixed on the left, top=0 it parallel to the top of the warper element, Finally, only the left and right margins of the content element are set to: 200PX, making it out of 200PX space on both sides, and finally forming the layout in the middle and bottom.
Fourth layout: Upper and lower layout, fixed height and fixed position above and below, middle adaptive height, code as follows:
<! DOCTYPE html>
The implementation results are as follows:
Implementation principle: First, the header element and the footer element is set to fixed positioning, and specify the height and width (where the height is set to 50, the width is set to 100%[attention to the package), according to the actual situation set), because the fixed position adjustment is based on the browser window, So just set the header element top property to 0, it will always be at the top of the browser, the footer element bottom property is set to 0, it is always at the bottom of the browser, and finally set the top and bottom margin of the content element to 50PX, thus forming the upper and lower layout, Of course, the height of the content element is not occupy the rest of the space, but the self-adaptive contents, if the fixed height of the redundant content can not be displayed, so here should consider the actual situation;
Good summed up here, in fact, the implementation of the layout of the method has a lot of, I just listed some commonly used relatively simple method, the key is that we should know the principle of CSS positioning, so that can be flexible strain, deficiencies, but also please point out, thank you!
CSS easy to confuse knowledge point summary and share-location and layout