Today I’m going to summarize the basics of CSS.

CSS based

You must first understand what CSS is: CSS refers to Cascading Style Sheets that display HTML elements through the definition of a Style (that is, CSS to Style something visible to the user) that is typically stored in a Style sheet:

  • Cascading styles: Multiple style declarations for the same selector;
  • Selector cascade: Style declarations for the same element with different selectors;
  • File stack: Stack multiple files.

The version of CSS can be traced back to 1996, when the implementation of the version of CSS1; In 1998, CSS2 added localization, Z-index and media on the basis of the original. From 2004 to 2011, CSS2.1 was released, making it the most widely available version to date. And since 1999, CSS3 has become the most modern version, there is a module operation, CSS4 is just on its basis for module upgrade.

When using the CSS, some browsers may not support certain features. In this case, run debugging or use www.caniuse.com to view the features.

CSS Syntax (1)

Basic syntax:

Selector {property name: property value; /* comments */}Copy the code

All symbols should be In English and case sensitive. If there is an error, you can only see a warning in the browser developer tool.

CSS Syntax (2)

At the grammar:

@charset"UTF-8";
@import url(2.CSS);
@media (min-width: 100 px) and (max-width: 200 px) {}
Copy the code

Solve character set and file encoding inconsistency problem.

The first line must be charset, and the first two lines must end with @ and a semicolon (;). Media must be learned separately. Charset is the character set, and UTF-8 is the character encoding.

Document flow, box model

The document flow

Normal Flow refers to the Flow direction of a document. At first, inline elements (such as span) are arranged from left to right, while block-level elements (such as div) are arranged from top to bottom. However, in HTML5, you can use display: Inline-block changes its attributes, so it no longer distinguishes between inline and block-level elements, for example.

The box model

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content.

Box models are divided into Content-box and border-box. The differences are as follows:

  • The width of the content-box contains only the content width;
  • The width of the border-box contains the width of the border, the width of the padding, and the content content.

Generally speaking, there is no obvious difference between the two, but if we need to specify border, padding, and width at the same time, we will see a significant difference.

CSS Layout (1)

The CSS layout divides pages into blocks and arranges them in the order of left, middle, right, top, middle, and bottom. There are three methods of layout, which are:

  • Fixed width layout, usually 960px/1000px/1024px;
  • Fixed width layout, mainly by the principle of document flow layout;
  • Responsive layout, fixed width on PC, variable width on mobile, i.e. mixed layout.

First, let’s look at the first CSS layout, a Float layout.

The steps are as follows:

  • Child element plus float:left and width
  • Parent element plus.clearfix

*{margin:0; padding:0; box-sizing: border-box; } reset.

After the reset, add three sentences to complete the layout:

.clearfix::after{
	content:'';
    	display: block;
    	clear: both;
	}
Copy the code

When using a float layout, note the following:

  • Leave as much space as possible for the last div. Do not set the width or use max-width: 100%;
  • You don’t need to do anything reactive with a float layout because a float layout only works with Internet Explorer;
  • Margin-left: 10px; margin-left: 10px; Margin-left: 5px; Display: inline-block

Float layouts can be used for two-column, three-column, four-column, average, etc. However, the disadvantage is that each layout position needs to be calculated manually, and negative margin can be used for layout when appropriate.

CSS Layout (2)

The second more common layout is the Flex layout.

Flex layouts are currently compatible with most browsers and are one of the more popular layouts. It consists of containers and items.

Container, the container

First, we need to make an element into a container.

.container{
	display: flex;
	}
Copy the code

Flex-direction: row is the default value, that is, the default value is left to right. You can change it to row-reverse (right to left), column (top to bottom), or column-reverse (bottom to top).

Flex-wrap: The default value of nowrap is no line wrap. If you can change it to wrap, the default value is automatically wrapped.

There are also some other alignments as shown in the following table:

alignment writing
Spindle alignment Context-content: flex-start (default)
Context-content: flex-end (close to right)
Justify -content: center
Justify -content: space-between (center, side to side)
Justify -content: space-around
Justify -content: space-between
Subaxial alignment Align-items: flex-start (default)
Align-items: flex-end
Align-items: center (left to right along the center line)
Align-items: strech (stretch as wide as possible so that each item is the same height and arranged from left to right)
Multi-line content Align-content: flex-start (default)
Align -content: center
Align-content: flex-end
Align -content: strech
Align -content: space-between
Align-content: space-around (space items evenly distributed, no overhead)

Project items

Project according to the order named, respectively. The item: first – child |. The item: child (n) |. The NTH – item: the last – the child.

  • First, you can add order to order items. The default value is 0, order, or negative value.
  • Flex-glow: Allows you to control space allocation. The default value is 0 and you can allocate space proportionally.
  • You can also use flex-shrink: to control how the shrink is done. The higher the value, the faster the shrink is. The default value is 1.
  • You can also use Flex-basis to control the base width, which defaults to auto;
  • Finally, align-self can also be used to control items at the top, bottom, center, stretch, etc.

CSS Layout (3)

Finally, a relatively new layout method, Grid layout.

The biggest difference between grid and Flex layouts is that flex layouts are one-dimensional, whereas Grid layouts are two-dimensional and can be laid out from both rows and columns. The Flex layout is also divided into Containers and items.

The first step is to make an element a Container, which is similar to the Flex layout:

.container{
	display: grid|inline-grid;
	}
Copy the code

Second, its rows and columns can be specified freely, for example:

When HTML is:

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
Copy the code

CSS is:

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}
Copy the code

The following styles appear:

Third, items can set ranges.

.item-a{
	grid-column-start: 2;
	grid-column-end: 5;
	grid-row-start: 2;
	grid-row-end: 3
	}
Copy the code

Represents the area from the second column to the end of the fifth column and from the second row to the end of the third.

Fourth, you can use FR (free space) to divide:

.container{
	grid-template-columns: 1fr 1fr 1fr;
	}
.container{
	grid-template-columns: 1fr 50px 1fr;
	}
Copy the code

Fifth, use grid-template-areas to specify areas:

grid-template-areas:
	"header header header"
    	"aside main ad"
	"footer footer footer"
Copy the code

Then declare each section one by one, as in:

.container < main{
	grid-area: main;
	}
Copy the code

Finally, you can use grid-Gap to manage gaps.

In general, grid layouts are good for irregular layouts. You can also use the grid Template: 50% 50% /200px abbreviation to represent two rows of grids, each 50%, and a column 200px wide.

The CSS positioning

The difference between positioning and layout is:

  • Layout is done on the screen plane;
  • Positioning is done perpendicular to the screen.

The default order is:

  1. Content (inline child elements)
  2. Floating elements (elements that leave the document flow)
  3. Block-level child elements
  4. border
  5. background

Among them, the text content has nothing to do with the hierarchy, only with the order.

At this point, we can use a new property called position to position:

The values meaning
static Default value, indicating that the current element exists in the document flow
relative This is used to give absolute the same position as the parent, but can be top: 10px; Left: 10px to offset
absolute Absolute position, relative to the parent element of the most recent position is not static element to determine, usually write top, left, generally used to do dialog box close button
fix Compared with viewport positioning, mobile terminal is less used, prone to bugs
sticky When you scroll to the point where you can’t see the element, it still appears in the viewport. It’s good for navigation, but it’s not compatible

And in general:

  • When an element is positioned, that is, position is not static, it automatically jumps to the top of the cascading context.
  • In the same cascading context, can be usedZ - index = 2, 1, 2When the z-index value is greater than or equal to 0, it is above the inline child elements; When the z-index value is negative, it is arranged below background.
  • Each cascading context can be understood as a small world, and z-index is comparable only in the same world;
  • The methods of creating cascading context are described in detail in MDN, and the commonly used ones include z-index | flexd | opacity | transform, etc.

How browsers render

To summarize, the browser rendering process can be divided into five steps:

  1. Build an HTML tree (DOM) based on HTML;
  2. Build a CSS tree (CSSOM) from CSS, and the first two steps are combined into a Render tree.
  3. Layout (document flow, box model, calculated size and location);
  4. Paint (border colors, text colors, shadows);
  5. Composite (display images based on cascading relationships)

Now that we know how browser rendering works, we also need to know how to update styles in three ways:

  • JS/CSS > Styles > Layout > Draw > Composition (all three steps, such as div.remove())
  • JS/CSS > Styles > Draw > Composition
  • JS/CSS > Style > Composition (transform, just composite)

After knowing the above knowledge, we can get a little inspiration: When optimizing CSS animations, you can use requestAnimationFrame instead of seTimeout or setInterval in JS and will-change or Translate in CSS.

CSS Animation (1)

In exploring CSS animations, we need to understand how to make an element the shape and position we want it to be. In this case, we need to use transform, which includes translate shift, scale scaling, rotate and skew.

First, translate:

  • TranslateX () moves along the X-axis;
  • TranslateY () moves along the Y axis;
  • TranslateZ () moves along the z-axis;
  • Translate (x,y) moves to (x,y);
  • Translate3d (x, Y, Z) movement in 3D space is rarely used;
  • Translate (-50%, -50%) It is possible to achieve absolute positioning of the element center, but be careful to matchleft:50%; top:50%;Use in combination.

Next up is scale:

  • ScaleX is scaled horizontally (the border in the direction is also scaled);
  • ScaleY is scaled vertically (the border in the direction is also scaled);
  • Scale (x,y) overall scale;

Rotate:

  • The rotate ([Angle > < | > < 0]).
  • RotateX (~);
  • RotateY (~);
  • RotateZ (~);

And finally, skew:

  • SkewX ([Angle > < | > < 0]).
  • SkewY ([Angle > < | > < 0]).
  • Skew (x, y);

CSS Animation (2)

Animation is made up of many still frames, each frame called a frame. When we animate CSS, the transform tag will only produce frames, and we need another tag to complement the intermediate frames. The Transition tag is what we need.

The grammar of transition is

Transiton: Attribute name time transition delay;Copy the code

Each attribute can be separated by a comma, or all can be used to refer to all attributes. The transition modes include linear | ease | ease-in | ease-out | ease-in-out | cubic- Bezier | step-start | step-end | steps, etc.

However, it should also be noted that not all properties can be transitioned, for example, from display: None to display:block cannot achieve the transition effect, while background color, opacity, etc., can be transitioned.

In addition, transitions must have a starting point and an end point. Generally, only one transition can be controlled. If intermediate points are required, multiple transforms or more advanced animation labels need to be added.

CSS Animation (3)

Using animation, you can combine multiple animations with only keyframes. The syntax is as follows:

@keyframes XXX {0%{} 66.66%{} 100%{}}Copy the code

Declare the keyframe first, and then add the declaration:

Animation: Duration | transition mode | Delay | times | Direction | Fill mode | Pause or not | animation name;Copy the code

conclusion

Some time ago, I was delayed in my computer study for a few days because of school affairs. I found that I was a little rusty, so I checked the CSS notes I learned in the past to make a small summary blog.

After a few days of learning CSS, I found that CSS is not as derivable as some mathematical formulas. It gives me a personal feeling that IT is more like a chemical knowledge point. Every label will have its special place, so we must accumulate more in daily learning and use. Learning CSS will be very helpful, summed up in four words: multi-purpose, multi-search.

© This summary course copyright belongs to the author, reprint need to indicate the source