Knowledge combing

  • The weight and priority of the selector
  • The box model
  • Box size calculation
  • Margin overlap calculation
  • Float float
  • Floating layout concept
  • Clean up the floating
  • Locate the position
  • Document flow concept
  • Position classification
  • Fixed positioning features
  • Absolute location calculation method
  • Flex layout
  • How to achieve center alignment?
  • Semantic understanding
  • CSS 3 animation
  • Redraw and reflow

The weight and priority of the selector

The weights are divided into four levels, namely:

  1. For example, style=” XXX “, the weight is 1000;
  2. Represents an ID selector, such as #content, with a weight of 100;
  3. Represents classes, pseudo-classes, and attribute selectors, such as.content, :hover, and [attribute], with weights of 10;
  4. Represents element selectors and pseudo-element selectors, such as div and p, with a weight of 1.
Note that the universal selector (*), child selector (>), and neighboring sibling selector (+) are not among the four levels, so they all have weights of 0. A selector with a large weight value has a higher priority, and the priority of the same weight follows the post-definition and overwrites the previous definition.Copy the code

The box model

In the box model, the widths we set are content widths, not the width of the entire box. The width of the box is: (content width + border width + padding width + margin width). Box-sizing :border-box can solve this problem if we change one of the four boxes

Div is display:block, and the width will fill the entire parent container. This div is a box model. If we manually increase the width of one of the margin, border, or padding items, it will decrease the width of the content. Box-sizing :border-box resolves this problem by specifying the style of the box: box-sizing:border-box; width = content + padding + border width (excluding margin)Copy the code

Longitudinal margin overlap

This feature of margin – vertical overlap

If the two are not the same size, the big one will eat the small one

Float float

Float was originally designed to be used for text surround effects, where one image is a piece of text. After image float:left, the text wraps around the image. However, it was later discovered that a combination of float + div could achieve a web layout that was previously implemented with table, so it was “misused” for web page layouts

Destructive – Causes the parent box to collapse

Float destructiveness – Float breaks the structure of the parent tag, causing it to collapse. The fundamental reason for this is that elements that are set to float leave the document flow

wrap

When you set float for div, its width automatically adjusts to encompass the content width rather than the entire parent container. It gets tighter, it changes width, it wraps three words in the content — that’s wrapping

Div is wrapped, but its display style is the same, display: block.

Clear space

<div style="border: 2px solid blue; padding:3px;" > < img SRC = "images / 1. PNG" / > < img SRC = "images / 2. PNG" / > < img SRC = "images / 3. PNG" / > < img SRC = "images / 4. PNG" / > < / div > for img has increased Float :left style, which causes there to be no Spaces between imGs and the four imGs are close together. The root cause of the "white space" feature is that float causes nodes to leave the document flow structure. It is no longer part of the document flow structure, so it has nothing to do with any line breaks or Spaces around it. It moves as close to one side as it can, which is the essence of whitespace clearing.Copy the code
clearfix
.clearfix:after { content: ''; display: table; clear: both; } .clearfix { *zoom: 1; /* Compatible with lower versions of IE */}Copy the code

Locate the position

The position location for page elements, can be set up static/relative/absolute/fixed these values, in which the static is the default value,

relative
Causes a relative change in its own position without affecting the position or size of other elements. The position of relative elements is always relative to the element itself, has no relation to other elements, and does not affect other elements.Copy the code
absolute
1. The absolute element leaves the document structure. Unlike relative, the position of the other three elements has been rearranged. As soon as an element leaves the document structure, it becomes destructive, causing the parent element to collapse. (At this point you should immediately remember that float elements also leave the document structure.) <p> first segment </p> <p> second segment </p> <p style="background: yellow"> third segment </p> <p> fourth segment </p> The width of <p>, which previously covered the entire screen, is now the width of the content. 3. Absolute elements are "follow". The absolute element is removed from the structure of the document, but its position does not change, because we do not set the values of top and left. 4. Absolute elements float over the top of the page and block the content below. 5. Absolute positioning: will recursively find all the element's parent element, if found a setting position: relative or absolute/fixed element, is based on the element orientation, if not found, on edge to define a browser.Copy the code
fixed
In fact, fixed and Absolute are the same. The only difference is that the absolute element determines the position according to the nearest location context, while fixed determines the position according to the window (or iframe). Fixed elements are positioned relative to the window (or iframe) boundary and have no relation to other elements. But it is destructive, causing the position of other elements to change.Copy the code
Flex layout

The container has two axes by default: a horizontal main axis and a vertical cross axis

The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end. By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.Copy the code

  1. Flex-direction determines the direction of the spindle and has four optional values:
  • 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 vertical and the starting point is at the bottom.

2. The justify-content property defines the alignment of the item on the main axis with the following values:

  • Flex-start (default) : align toward the start of the main axis.
  • Flex-end: align toward the end of the spindle.
  • -Leonard: Center.
  • Space-between: both ends are aligned with equal intervals between items.
  • Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border

3. The align-items property defines how items are aligned on the cross axis with the following value:

  • 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: The baseline alignment of the first line of text of the project.
  • Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container

Horizontal center

For inline elements, use text-align: center;

Margin: auto;

Absolute positioning elements can be implemented in combination with left and margin, but the width must be known.

Vertical center

Inline elements can set line-height to equal height

Absolute positioning elements can be implemented in combination with left and margin, but the dimensions must be known. Advantages: Good compatibility Disadvantages: It is necessary to know the size in advance and the absolute positioning can be combined with transform to realize centering. Advantages: no need to know the size in advance Disadvantages: poor compatibility absolute positioning combined with margin: Auto, no need to know the size in advance, good compatibility.Copy the code

Semantic understanding

The meaning of “semantics” is to make it easier to read, and it has two parts:

  1. Make it easier for people to read programs
  2. Make machines (browsers, search engines) more readable
How does a search engine, for example, better understand the HTML code that crawlers download to our web pages? -- that is, according to the established HTML tags. The h1 tag is the title; P is the paragraph details, the weight is definitely not as high as the heading; Ul is the list; 3. Strong is something that is strong in bold. If we don't write our HTML semantically and use all <div> tags, search engines will have a hard time understanding the content of our pages.Copy the code

CSS 3 animation

Redraw and reflow

  • Redraw: This refers to the browser redrawing styles when elements on a page are simply styled without leaving the document flow, such as changing colors, backgrounds, and so on
  • Backflow: Refers to a situation in which the size, position, or properties of the DOM in the document flow change, causing the browser to re-render part or all of the document
Some attributes can also cause backflow, such as reading the height and width of a DOM, or using the getComputedStyle method. Avoid backflow and redraw when writing code.Copy the code