CSS Overview (3)

CSS layout, responsive knowledge

Note: this article I have attracted their own demo, but can not be seen in the Nuggets, details can refer to my personal blog: www.11qiaolj.github.io

Traditional Float layout

There are several common layouts in traditional float layouts, especially on the PC side

1. Two-column layout

That is, the left side is fixed and the right side is adaptive. It’s easy.

Left floating fixed width

Margin separates the left width from the right

2. Dual-wing layout

That is, the left side, the right side fixed, the middle adaptive layout. A lot.

It uses margins left and right to leave space for left and right

Margin-left box :-100%

Margin-left :- Width of the box

3. Grail layout

Similar to the twin wing layout.

The difference is that the Grail layout uses padding for left and right positions

Margin-left :-100% + right: its width

Margin-right :- Its own width

Responsive layout

Responsive layouts were created to accommodate different screen sizes.

Responsive layouts are applied to all kinds of web pages on all kinds of devices, not just on mobile.

1. Media query + REM

Rem is a unit based on the font size of the root node and can vary with the font size of the root node

If the HTML font size is 100px, then 1rem=100px.

Based on this principle, we can divide the screen into 10 pieces (any number of pieces)

Font size=102.4px for a 1024 pixel screen

For a 670px screen, make the HTML font size=67px, or 1rem=67px

This allows us to achieve a responsive layout by gradually changing REM as the screen size changes

So how do we get the size of the screen we’re on? We use a media query, media-query, to get the size syntax of the current screen:

@media screen and (max-width:800px){ html{ font-size:80px; ! important } }Copy the code

This code means that the root node font size is 80px when the screen is less than 800px

Responsive layout can be achieved with media query + REM.

A related problem is that responsive layouts can only define the root font size in a single segment, which changes in steps rather than in real time.

2. Vw and VH replace REM

Due to the disadvantages of REM ladder, VW and VH bring a solution

  • Vh is 1/100 of the viewport height of window. InnerHeight.
  • Vw is 1/100 of the height of the window. InnerWeight viewport.

3. Flex flex layout

Combining previous REM and VW, Flex elastic layouts provide a different layout from traditional float, with elements arranged through the main and side axes

Display :flex // Parent container is flex flex-direction: Row/columns / / flex - warp: define the main shaft direction warp/nowarp / / define whether the justify - content: a new line flex - start | flex - end | center | space - between | space-around; / / define the spindle element arrangement The first tail aligned center Two welt around the align - items: flex - start | flex - end | center | baseline | stretch; / / define vice shaft element arrangement First tail aligned center baseline fill the align - self: auto | flex - start | flex - end | center | baseline | stretch; // Define the position of an element on the secondary axis. // fits the remaining spaceCopy the code

Flex: 1 is a key interview question.

Flex: 1 consists of three properties.

  • Flex-grow :1, which automatically fills the remaining space
  • Flex-shrink :1, which indicates that compression occurs inward.
  • Flex-basis :0, which represents its own base width, 0 being no width. These three properties are combined to form an “elastic box”

4. Grid layout

Grid layout is a new layout that provides the layout of elements on a 2-dimensional plane. The disadvantage is that some browsers are not compatible.

Display :grid // parent container set to grid grid-template-colums/rows:1fr column/row-gap: // grid-template-colums: // parent container set to grid grid-template-colums/rows:1fr column/row-gap: // Grid-template-colums: // Parent container set to grid grid-template-colums/rows:1fr // select "a1 A1 A1 "" A2 A3 A3" "A2 A3 A3 "; Align-items :/justify-items: // vertical/horizontal alignment grid-colum-start/end: // start/end positionCopy the code

It’s worth noting that the Grid is two-dimensional, while Flex is really one-dimensional