CSS Basics (Part 6)

review

In the last lecture, we have basically mastered the writing sequence of CSS and some simple layout styles and flows. Because there are not too many technical types involved in the last lecture, it is basically based on theory, so it looks a little easier. “Thought first” has always been an important point for me. When writing the layout, it is also the truth that we must think first in order to write a more reasonable layout. If the layout is unstable, the subsequent style is more impossible to talk about, especially for beginners.

About the comments

“I remember that the order of style attributes is best as reroute > redraw, which can improve rendering performance.” I was not sure about this question at first, so I asked my colleagues and did a lot of research and learned that 10 years ago, this theory was still very important, but in terms of the engine and performance of modern browsers, the writing order of CSS is almost negligible in terms of rendering performance. So it generally doesn’t work, but it doesn’t mean that you don’t follow the order of CSS styles, it just means that if you follow the order in the writing process, it is considered to be a professional. So form good habits and start now.

Why use positioning

Positioning in CSS is an important part of the work in the future will use a lot of positioning effect, so when writing CSS is inseparable from positioning elements, but usually positioning for beginners is more troublesome, because so many positioning will be confused.

Why use positioning: Positioning can float freely on top of other (standard flow, float) elements. As shown in the figure below

This effect is definitely a very common style in the future, right! Is shuffling figure probably result, click on the button is centered on both sides of the vertical with the positioning of the + top/left | right shows. There are many more similar effects that you will encounter in your future work, so positioning is very important.

Positioning mode

The general positioning mode is to use positioning mode + edge offset. Equivalent to position = position mode + edge offset

Positioning mode

  • Position classification

  1. ———— Static positioning is the default positioning of elements, there is no positioning meaning, generally is not displayed by default, this type of positioning is used very little, basically is not displayed by default

  2. ———— Relative positioning is an element’s position relative to its original standard flow. If you change position, it will be offset from its original position, not its original position. The relative position in the standard flow area continues to be occupied, and the following box will treat it as if it were a standard flow

  3. Absolute: absolute ———— Absolute and relative are used together. In absolute positioning, only the parent box is referenced. If the parent box has a relative positioning, the absolute positioning child box will move with the parent box. However, if the parent does not have a relative position, it will look up step by step, and whoever is found will depend on it. If there is none, it depends on the document to move the location. An absolutely positioned element does not retain its original position

  4. ———— A fixed position is a fixed location that does not move with the movement of other elements

// Position: static; // Position: relative; // Position: absolute; // Position: fixedCopy the code

Locating formula

Child absolute parent phase: the child box with absolute positioning, the parent box with relative positioning

The positioning formula for newcomers must keep in mind that in the future for a long time all need this formula to support you through the CSS positioning times – for example in the article is first in the formula, use relative positioning, when the parent box son box with absolute positioning will run to the parent box body, if the parent box didn’t use relative positioning, Then the subbox with absolute positioning will be benchmarked against the document flow. The following figure

Fixed position

Fixed positioning:

  1. Fixed positioning is completely off target and does not occupy the position
  2. Fixed positioning to recognize only the browser’s visual window
  3. Fixed position has nothing to do with the element. It is used alone and does not scroll with the scroll bar

As shown in the figure below

Expansion: Position the box center display

Margin 0 auto; The solution is to first move the element 50% to the left (” left “: 50%), and then move the element 50% to the right to center the box.

// If horizontally centered, first move the box 50% left: 50%; Margin-left: -100px; margin-left: -100px; margin-left: -100px; margin-left: -100px;Copy the code

Extension: stack order

When positioning is used, boxes may overlap. If the positioning box is added, by default, the laters will overtake the front box, so it is necessary to adjust the weight of the box to affect the stacking order of the box. Use the Z-index property to adjust the stacking order of boxes

  1. Property value: positive integer, negative integer or 0, default is 0, the bigger the box, the higher the box
  2. If the values of the attributes are the same, the next person comes first in written order
  3. You can’t add units after numbers

Note: Z-index can only be applied to relatively-positioned, absolutely positioned, and fixed-positioned elements, not to other standard stream elements

After adding z-index, see the following figure

Ok, today this article basically finished, it is important to locate the content of the orientation in the future work is very common and important, must be familiar with and understand the specific how to apply, although in the center of the display that will be used more simple flex layout, but for how centered in the original location need to fully understand. What question is welcome to leave a message to discuss ~