When I first learned the front end, I was very confused about position and display, especially Flex, so I summarized a set, hoping to help students in need. Here I would like to give a special warning to mobile web students, such as position:relative. The Web side is called relative positioning, which means that this attribute is added to an element, which is rendered in the UI using the relative positioning rules. Instead of setting up the relative layout and mobile end, the sub-layout is arranged according to the relative layout, and there is a big difference between the mobile front end, as long as remember the relative positioning and relative layout is different.

I. About the position attribute

1.1, the position: the static

Default, no positioning, the top element uses the normal layout behavior, that is, the current layout position in the general flow of the document, with the top, bottom, left, and right attributes invalid.

Example: I placed a red and blue div tag inside the outer yellow div, as follows.

1.2, the position: relative

Relative positioning, not out of the document flow. You can locate the device by top, bottom, left, and right based on its static position. You can also level the device by Z-index

Example: I put a red div inside a blue div; The CSS for the red div looks like this,

.box1 {
  width: 400px;
  height: 300px;
  background: red;
  position: relative;
  left: 50%;
}
Copy the code

The final UI is shown below, and you can see that the red div is indeed half as far to the left as the blue div

1.3, the position: absolute

Absolute positioning, out of document flow. Locate by top, bottom, left, right. The starting position of the location is determined by the parent element that is not recently static. Otherwise, the origin of the body coordinates. You can use z-index to perform hierarchical classification

Example: The pink div is set to position:static. Put a red div in the pink div set position: Absolute, using left:10%. Finally, in the image below, you can see that instead of locating the red div in the pink region, it will locate the red div in the black region.

If you change the pink div to position:absolute or position:relative, the result will be as follows:

1.4, the position: fixed

Fixed location, out of document. Position relative to the browser window. How can I drag the scrollbar and it doesn’t change

Example: The red div sets position:fixed.

1.5, the position: sticky

Viscous positioning is the combination of “relative” and “fixed”. When he is about to draw the screen he is fixed, otherwise he is relative. If sticky is used with top, bottom, left or right, it will not take effect. For example, write top:0%, which means that at top:0% it switches between relative and fixed

For example, set position:sticky, top:0% for a red div





2. About the display attribute

2.1, display: block

Block-level elements:

  • Always in the form of a block, occupying an entire line. Several block-level elements are arranged from top to bottom (except with float attributes)
  • You can set width, height, margin and padding in each direction
  • When the element width is not set, its width fills the container
  • Block-level elements can nest other block-level elements as well as inline elements
  • Display for block-level elements defaults to block
  • Block-level elements are: div, H1, H2, P, and so on

Example: The page has four block-level elements. For the third red div, float:right. As mentioned in the first paragraph above, the structure is disrupted and no longer arranged in order

2.2, display: inline

Inline elements:

  • It does not occupy a single line, but only the space of its height and width, that is, the width and height of an element is stretched out by its text content. Several inline elements are arranged from left to right (inline elements can coexist in a row) and from top to bottom
  • Width and height cannot be set for inline elements
  • You can only set left and right margin and padding for inline elements, not upper and lower margin and padding
  • The width takes effect when the float property is used for inline elements
  • The inline elements are title, span, a, and strong

2.4, display: inline – block

Inline block-level elements:

  • Combined with inline and block features, the width and height can be set without line breaking
  • Inline block level elements start with inline element width and height Settings





3. Special display: Flex

Elastic element: Although it is in display, I personally feel that it is more like position attribute, which is more like the layout of mobile terminal, because position is exactly the way of positioning. When the flex layout is set, the float, clear, and vertical-align attributes of the child elements are invalidated. Simply set to display:flex, this element is the elastic layout container, and then the properties of the container

3.1 Container properties: Flex-direction

  • Row (default) : The main axis is horizontal and the starting point is on the left
  • Row-reverse: The main axis is horizontal and the starting point is at the right end
  • Column: The main axis is in the vertical direction and the starting point is in the upper edge
  • Column-reverse: the main axis is in the vertical direction and the starting point is at the bottom



3.2 container properties: Flex-wrap

  • Nowrap (default) : no line breaks
  • Wrap: The first line is at the top
  • Wrap-reverse: newline with the first line at the bottom



3.3 container properties: context-content

  • Flex-start (default) : left-aligned
  • Flex-end: right-aligned
  • Center: the horizontal axis is centered
  • Space-between: both ends are aligned with equal intervals between items
  • Space-around: Each item is equally spaced, so the space between two items is twice as large as the distance from the edge item to the border



3.4 container attributes: align-items(single axis)

  • Flex-start: Alignment of the starting point of the cross axes
  • Flex-end: alignment of ends of crossed axes
  • Center: Alignment of the midpoint of the cross axis
  • Baseline: Baseline alignment of the first line of text of the project
  • Stretch (default) : If the height is not set or auto is set, the entire container will be occupied
  • Note: In an elastic layout, the height of the child element is not set, and the content text align-items is invalidated and not horizontally centered. Text-align =’center



3.5, container attributes: align-content(multiple axes)

  • Stretch (default) : Axis takes up the entire cross axis
  • Flex-start: Alignment of the starting point of the cross axes
  • Flex-end: alignment of ends of crossed axes
  • Center: Alignment of the midpoint of the cross axis
  • Space-between: aligns with the 2 ends of the intersecting axes, and the spacing between axes is evenly distributed
  • Space-around: The space between the two sides of each axis is equal, so the space between the axes is twice as large as that between the axis and the edge

3.6. Individual attributes of elastic layout child elements (note: child element attributes. The top ones are container properties.

3.6.1 track, align – self

  • Auto (default) : The element inherits the align-items property of its parent, or stretch if there is no parent
  • Stretch: The element is stretched to fit the container. If you specify the vertical axis size as auto, the value will make the item’s margin box size as close to the row size as possible, but conform to the limits of the ‘min/max-width/height’ property
  • Center: The element is in the center of the container, and the elastic layout child elements are centered on the vertical axis
  • Flex-start: the starting position (top) of the elastic layout child on the vertical axis
  • Flex-end: the end position of the elastic layout child on the vertical axis (bottom)
  • Baseline: Elastic layout child element aligned with baseline



3.6.2, Order

The order of items, the smaller the value, the more advanced the order. The default is 0



3.6.3, flex, flex-grow, flex-shrink

These attributes are similar to the linear layout of a mobile front end:

  • Flex and Flex-grow both amplify elements, but the formula for scaling is different
  • Flex-grow: The remaining space is the remaining width of the elastic layout, which is then allocated proportionally
  • Flex: The remaining space is the sum of the remaining width of the elastic layout plus the width of the child elements that flex. And then divide it up proportionally
  • Flex-shrink: This property is similar to the above two, except that the larger the value is, the smaller it is

Four, plus a summary of their own a simple background management

Hope I can help to the needy students making address: https://github.com/lihangleo2/easy-vue-element-admin