Home > Developer > JavaScript
CSS obfuscation knowledge points summary and sharing-positioning and layout, css knowledge points
CSS positioning has four modes: static, relative, absolute, and fixed. Other static values are default values. The following describes their respective features;
Static: static positioning, which is in a Dynamic Layout stream. It is automatically arranged and arranged according to the order of elements on the page and parent-child relationship. Each static positioning element occupies a space of dynamic layout;
Relative: relative positioning, in the Dynamic Layout stream. If the offset (LEFT or TOP value) is set, the corresponding position is adjusted, the location adjustment standard is based on the elements in the previous Dynamic Layout stream (that is, set to static and relative Elements );
Absolute: absolute positioning. It is not in the Dynamic Layout flow. The existence of this element is ignored in the Dynamic Layout flow (that is, the occupied space of this element is not calculated, by default, it is in the upper layer of a common element without a Z-INDEX. If offset (LEFT or TOP value) is set, the corresponding position is adjusted, the location adjustment standard is based on the non-static positioning parent element (or the element of the non-static positioning Package). If there is no qualified parent element, the BODY is used as the standard; if no offset is set, the default offset is directly set for the current position of the element. In addition, the absolute positioning has encapsulation, that is, after the block-level element is absolutely located, unless the width and height of the element are set explicitly, the default width and height of the element are automatically adapted to the content of the element;
Fixed: fixed positioning, not in the Dynamic Layout stream. The existence of this element is ignored in the Dynamic Layout stream (that is, the occupied space of this type of element is not calculated, and the default is in the upper layer of the general element that has not set the Z-INDEX), if the offset (LEFT or TOP value) is set, there will be a corresponding position adjustment, the location adjustment standard is based on the browser window (which can be understood as the BODY). If no offset is set, the default offset of the current position of the element is directly set. In addition, fixed positioning is encapsulated, that is, after a block-level element is fixed, unless the width and height of the element are explicitly set, otherwise, the default width and height of the element are automatically adapted based on the content of the element, and the default bit offset is not displayed if it is greater than the browser window range;
The following is the Demo code for the above four positioning methods:
<!DOCTYPE html>The final result is shown as follows:
After understanding the principles and functions of CSS positioning, we can use CSS positioning to achieve common page layout.
First: Left and Right layout, fixed on the left and adaptive on the right. The Code is as follows:
<!DOCTYPE html>Shows the implementation effect:
After reading the code, you may wonder why you should put the content on the left, not the right, because: The content needs to maintain an adaptive width, that is, 100%, therefore, it must occupy the whole row space. Only relative positioning is used, and the offset on the left is set to the position to be empty, that is, 200PX; so that the non-left 200PX bit is realized, the rest are content regions. sidebar must be set to absolute positioning, because it cannot be set without floating, set the left offset to 0PX and the width to 200PX. This will locate the blank area of the Left content to achieve the layout of the entire page.
Type 2: left-side layout, adaptive left-side width, and fixed right side. The Code is as follows:
<!DOCTYPE html>Shows the implementation effect:
Implementation principle Description: first, the content element is moved to the left, because the floating is also wrapped, so the display must be set to 100% in width, but the right side needs to be placed on the sidebar, therefore, the margin is set to-200PX, so that subsequent elements (namely, sidebar) can enter the 200PX space on the right of the content element, and the sidebar element is also set to float left, set the width to 200PX so that it can be located on the right side of the content element. Because the right side of the content element is occupied by the sidebar element, add a content-inner element to the content element, and set the right margin to 200PX to make the right 200PX empty, so as to avoid being covered by the sidebar element, thus forming the overall layout of the left and right pages.
Third: layout on the left, middle, and right, with a fixed width on the left and right and adaptive width on the middle. The Code is as follows:
<!DOCTYPE html>Shows the implementation effect:
Implementation principle Description: first, set the warper element as relative positioning to ensure that the three DIV elements to be wrapped are uniformly Based on the warper element during positioning, then, set the left and right elements to fixed positioning and the width to PX respectively (the width can be set according to the actual situation), and set the bitwise offset of the left element to LEFT = 0, TOP = 0 (of course, you do not need to set the display, because this is the case by default). Set the bitwise offset of the right element to RIGHT = 0 so that it is fixed on the right, TOP = 0 to make it parallel to the TOP of the warper element. Finally, you only need to set the outer margin of the left and right sides of the content element to PX, so that the left and right sides each give up PX space, and finally form a left-right layout;
Fourth layout: Upper and Lower layout. The above and below are fixed height and fixed position, and the middle is adaptive height. The Code is as follows:
<!DOCTYPE html>Shows the implementation effect:
Implementation principle Description: first, set the header element and footer element to fixed positioning respectively, and specify the height and width (here the height is set to 50, and the width is set to 100% [pay attention to encapsulation], according to the actual situation), because the fixed position adjustment is based on the browser window, you only need to set the TOP attribute of the header element to 0, it will always be on the TOP of the browser, set the BOTTOM attribute of the footer element to 0, which is always at the BOTTOM of the browser. Finally, set the top and BOTTOM margins of the content element to 50PX, which forms the layout of the top and BOTTOM layers, of course, the height of the content element in the middle does not occupy the remaining space, but is adaptive to the content. If the fixed height is set, the excess content cannot be displayed, so the actual situation should be considered here;
Now, I will summarize it here. In fact, there are many ways to implement the layout. Here I just list some commonly used simple methods. The key is that you need to know the principle of CSS positioning, in this way, you can flexibly respond to the shortcomings. Please also point out, thank you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
