Summary

I often use flex layout. Flex can be regarded as a one-dimensional layout. It mainly lays out the position of the axis. Grid divides the layout into rows and columns to generate cells, which can be regarded as a two-dimensional layout.Grid is far more powerful than flex layout

rows and columns

The container is called a row horizontally, a column vertically, and the place where the rows and columns intersect is called a cell.

grid lines

Grid lines are grid lines. Horizontal grid lines divide rows, and vertical grid lines divide columns. Normally, n rows have (n+1) horizontal grid lines, and m columns have (m+1) vertical grid lines.

Container properties

display: grid specifies a container to use a grid layout.

In addition to using absolute units, you can also use percentages

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

1. repeat()

Sometimes it is very troublesome to write repeated values, especially when there are multiple grids, use the repeat() function

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

repeat accepts two parameters, the first is the number of repetitions, and the third is the value to be repeated.

It’s okay to repeat a pattern

grid-template-columns: repeat(2, 100px 20px 80px);

The above code defines 6 columns.The width of the first and fourth columns is 100px, the second and fifth columns are 20px, and the third and sixth columns are 80px.

2. autofill() keyword

Sometimes the cell size is fixed, but the container size is undefined.If you want each row to hold as many cells as possible, you can use the auto-fill keyword to fill

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

3. fr keyword

In order to conveniently express the proportional relationship, the grid layout provides the fr keyword (fraction means fragment). If the width of the two columns is 1fr and 2fr, it means that the latter is twice the former.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

4. minmax()

The minmax() function generates a length range, which accepts two parameters, representing the maximum value and the minimum value.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

minmax in the code means that the width is not less than 100 and not greater than 1fr

5. auto()

Indicates that the browser determines the length itself

In the above code, the width of the second column is basically equal to the maximum width of the cell in the column, unless the cell content sets min-width, and this value is greater than the maximum width.

6. Name of grid lines

In the grid-template-columns attribute and grid-template-rows attribute, you can also use square brackets to specify the name of each grid line to facilitate future reference.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

7. Layout example

The grid-template-columns property is very useful for web page layout.Two-column layout requires only one line of code

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

3. Common properties

grid-row-gap attribute, grid-column-gap attribute, grid-gap attribute

The grid-row-gap property sets the spacing between rows (row spacing), and the grid-column-gap property sets the spacing between columns (column spacing).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

If grid-gap omits the second value, the browser considers the second value to be equal to the first value.

TIP

According to the latest standards, the grid- prefix of the above three attribute names has been deleted, grid-column-gap and grid-row-gap are written as column-gap and row-gap, and grid-gap is written as gap.

3.1 grid-template-areas property

Grid layout allows you to specify "areas", which are composed of single or multiple cells.The grid-template-areas attribute is used to define areas.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

3.2 grid-auto-flow attribute

This order is determined by the grid-auto-flow attribute. The default value is row, which means "row first, then column".You can also set it to column and change it to "column first, then row".

In addition to setting row and column, the grid-auto-flow attribute can also be set to row dense and column dense.These two values ​​​​are mainly used to automatically place the remaining items after certain items are assigned positions.

3.3 justify-items attribute, align-items attribute, place-items attribute

The justify-self attribute sets the horizontal position of the cell content (left, center, right), which is exactly the same as the justify-items attribute, but only affects a single item.

The align-self attribute sets the vertical position (top, middle, and bottom) of the cell content. It is exactly the same as the align-items attribute, and it only affects a single item.

css performance optimization

1. Merge css files. If the page loads 10 css files, each file is 1k, it will be slower than loading only one 100k css file.
2. Reduce css nesting. It is best not to nest more than three levels.
3. Do not nest in front of the ID selector. IDs are inherently unique and have large permissions. Nesting is a complete waste of performance.
4. Create a public style class and extract the same style for use as a public class.
5. Reduce the use of wildcards * or selectors like [hidden="true"], and search all one by one... Will this perform well?
6. Cleverly using the inheritance mechanism of CSS, if the parent node is defined, the child node does not need to be defined.
7. Split out the public css files. For relatively large projects, you can extract the common structural styles of most pages and put them into separate css files, so that they can be placed in the cache after being downloaded. Of course, this approach will increase requests. The specific approach should be based on the actual situation.
8. There is no need for CSS expressions. Expressions only make your code look cooler, but the waste of performance may be beyond your imagination.
9. Use less css rest, you may think that resetting the style is the norm, but in fact many of the operations are unnecessary and unfriendly. If you have needs and interest, you can choose normolize.css.
10. cssSprite, synthesizes all icon images, and displays the icon images using the background image method of width, height and background-position. This is very practical and reduces http requests.
11. Aftercare work, css compression (online compression tool YUI Compressor)
12. GZIP compression is a popular file compression algorithm.
13. The HTML document structure has as few levels as possible, preferably no deeper than six levels;
14. Put the script as far back as possible, just put it in front;
15. A small number of above-the-fold styles are placed inline within tags;
16. Keep the style structure hierarchy as simple as possible;
17. Minimize DOM operations in the script, try to cache the style information accessed to the DOM, and avoid excessive triggering of reflow;
18. Reduce the need to modify element styles through JavaScript code, and try to use the method of modifying class names to operate styles or animations;
19. Try to use animations on absolutely positioned or fixedly positioned elements;
20. Hide it off the screen, or try to stop the animation when the page is scrolling;
21. Try to cache DOM searches and make the finder as simple as possible;
22. For websites involving multiple domain names, domain name pre-resolution can be enabled.
23. content-visibility: a css property that can improve rendering performance

Original link

css3 animation acceleration

css3 animation GPU acceleration

css cascade

css stacking original text link

div centered summary

1. flex (element already has width ß)

display:flex;
justify-content: center;            
align-items: center;

2. position(element known width) The parent element is set to: position: relative;
   The child elements are set to: position: absolute;
   This can be achieved by 50% from top, 50% from left, and then subtracting half the width of the element itself.
3. position transform (unknown width of element) If the width of the element is unknown, just replace margin: -50px 0 0 -50px; in the example above with: transform: translate(-50%,-50%);
4. position (known width of element) (left, right, top, bottom are 0, maigin: auto)
5. table-cell layout implementation, parent display: table, child display: table-cell; vertical-align: middle; text-align: center;

div centered summary

float

Article address

The difference between link and @import

Both are ways of externally referencing CSS, but there are certain differences:

1. Link is an XHTML tag. In addition to loading CSS, it can also define other transactions such as RSS; @import belongs to the CSS category and can only load CSS.
2. When the link references CSS, it is loaded at the same time when the page is loaded; @import requires the page to be loaded after the page is completely loaded.
3. Link is an XHTML tag and has no compatibility issues; @import was proposed in CSS2.1 and is not supported by lower version browsers.
4. link supports using Javascript to control the DOM to change the style; @import does not support it.

css common selectors

"Common CSS selectors include: tag selector, class selector, id selector, and wildcard selector. The priority is: ID selector > Class selector > Tag selector > Wildcard selector."

Selector Classification