preface

A few days ago after listening to the senior factory interview experience, I felt my basic knowledge is insufficient (I am FW, woo…). Today I will take this opportunity to talk about a series of CSS interview knowledge, I hope you can learn something.

The box model

CSS Box Model

All HTML elements can be thought of as boxes, and in CSS, the term “box model” is used for design and layout. The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content. The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

The following picture illustrates the Box Model:

Description of different parts:

  • Margin – Clears the area outside the border. The Margin is transparent.
  • Border – The Border around the inside margin and around the content.
  • Padding – Clears the area around the content. The Padding is transparent.
  • Content – The contents of the box, displaying text and images

Important: In order to properly set the width and height of an element in all browsers, understand that when you specify the width and height properties of a CSS element, you only set the width and height of the content area. For full-sized elements, you must also add padding, borders, and margins.

The traditional solution to layout, based on the box model, relies on the display property + position property + float property. It is very inconvenient for those special layouts, for example, vertical center is not easy to implement, thus extending the proposed new layout scheme.

The Grid layout

The Grid is the most powerful CSS layout scheme.

It divides web pages into grids that can be arbitrarily combined to create a variety of layouts. Effects that previously could only be achieved through complex CSS frameworks are now built into browsers.

Here’s what grid layout is all about:

A Grid layout is similar to a Flex layout in that it can specify the location of multiple items within a container. But there are also important differences.

Flex layout is an axis layout and can only specify the position of “items” against the axis, which can be considered as a one-dimensional layout. A Grid layout divides the container into “rows” and “columns”, generates cells, and then specifies the cells “where the project resides”, which can be thought of as a two-dimensional layout. The Grid layout is far more powerful than the Flex layout.

Relevant properties

Grid Container

  • Set updisplay: girdThe element. This is the immediate parent of all Grid Items.

Grid Item

  • Children of the Grid container (direct children).

Grid Line

  • This dividing line forms a grid structure. They can be vertical (” column grid lines “) or horizontal (” row grid lines “) and located on either side of a row or column.

Grid Track

  • The space between two adjacent grid lines. Think of them as columns or rows of a grid.

Grid Cell

  • The space between two adjacent row and two adjacent column grid lines. It is a “cell” of the grid.

Grid Area

  • The total space enclosed by four grid lines. A grid region can be composed of any number of grid cells.

There are other properties that I’m not going to go through.

Grid layouts are powerful enough to handle rows and columns at the same time, but not mature enough to support older browsers, not older browsers.

Flex layout

Flex layout for simple, complete, and responsive page layouts. It is currently supported by all browsers, which means it is safe to use it now. Flex, short for Flexible Box, is designed to provide maximum flexibility to Box models.

  • Any container can be specified as a Flex layout,
  • Inline elements can also be laid out using Flex,
  • Webkit-kernel browser, must be added-webkitPrefix.

Note that with Flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.

The basic concept

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.” 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.

Schematic diagram:

Container properties

The following six properties are set on the container:

  • flex-direction
  • flex-wrap 
  • flex-flow
  • justify-content 
  • align-items 
  • align-content

Flex :flex-grow flex-shrink flex-basis

The first property: flex-basis

This property is used to set the width of the element. If both width and flex-basis are set on the element, the value of width is overwritten by the flex-basis element with higher precedence.

<html>
<head>
 <style>        
.box{            
    display: flex;            
    margin:100px auto;            
    width:400px;            
    height:200px;        
}        
.inner{            
    width:200px;            
    height:100px;            
    flex-basis:300px;            
    background:blue;        
}    
</style>
</head>
 <body>
    <div class="box">    
        <div class="inner">    
        </div>
    </div>
  </body>
</html>
Copy the code

The 200px width set by width is covered by the 300px width of Flex-basis:

Second property: flex-grow

This property sets how the child elements allocate the remaining space of the parent element when the width of the parent element is greater than the sum of the widths of all the child elements. The default value of flex-grow is 0, which means that the element does not claim the remaining space of the parent element. If the value is greater than 0, it does. The greater the value, the greater the claim.

For example: the parent element is 400px wide and has two children: A and B. A is 100px wide and B is 200px wide. The free space is 400- (100+200) = 100px. If A and B don’t claim any extra space, they have 100px free space.

<html>
<head>    
    <style>      
    .box{            
        display: flex;            
        flex-direction: row;            
        margin:100px auto;            
        width:400px;            
        height:200px;            
        border:1px solid red;         
}        
    .inner{            
    flex-basis:100px;            
    height:100px;            
    background:pink;        
}        
    .inner1{            
        flex-basis:200px;            
        height:100px;            
        background:blue;        
}    
</style>
</head>
<body> 
    <div class="box">    
        <div class="inner">A</div>    
        <div class="inner1">B</div>
    </div>
</body>
</html>
Copy the code

As shown in figure:

If A requests the remaining space: set flex-grow to 1 and B does not request the remaining space. Then the final size of A is its own width (100px) + the width of the remaining space (100px) = 200px.

<html>
<head>    
    <style>      
    .box{            
        display: flex;            
        flex-direction: row;            
        margin:100px auto;            
        width:400px;            
        height:200px;            
        border:1px solid red;         
    }        
    .inner{            
        flex-basis:100px;            
        height:100px;            
        background:pink;            
        flex-grow:1;        
    }        
    .inner1{            
        flex-basis:200px;            
        height:100px;            
        background:blue;        
    }            
</style>
</head>
<body> 
    <div class="box">    
        <div class="inner">A</div>    
        <div class="inner1">B</div>
    </div>
</body>
</html>
Copy the code

As shown in figure:

If both A and B set flex-grow to 1 and B set flex-grow to 2. The final size of A is its own width (100px) + the width of the remaining space obtained by A (100px (1/(1+2)), and the final size of B is its own width (200px) + the width of the remaining space obtained by B (100px (2/(1+2)).

<html>
<head>    
    <style>            
    .box{            
        display: flex;            
        flex-direction: row;           
        margin:100px auto;            
        idth:400px;            
        height:200px;            
        border:1px solid red;         
    }                
    .inner{            
        flex-basis:100px;            
        height:100px;            
        background:pink;            
        flex-grow:1;        
    }        
    .inner1{            
        flex-basis:200px;           
        height:100px;            
        background:blue;            
        flex-grow:2;        
    }            
    </style>
</head>
<body> 
    <div class="box">    
        <div class="inner">A</div>    
        <div class="inner1">B</div>
    </div>
</body></html>
Copy the code

As shown in figure:

The third attribute: flex-shrink

This property sets how the child element reduces its width when the width of the parent element is less than the sum of the widths of all its children. The default flex-shrink value is 1. When the width of the parent element is less than the sum of the widths of all the child elements, the child element decreases in width. The larger the value, the more severe the decrease. If the value is 0, it does not decrease.

For example: the parent element is 400px wide and has two children: A and B. A is 200px wide and B is 300px wide. The total width of A and B beyond the parent element is (200+300) -400 = 100px. If neither A nor B reduces the width, that is, if flex-shrink is set to 0, then the parent element will exceed the width by 100px.

<html>
<head>    
    <style>      
    .box{            
        display: flex;            
        flex-direction: row;            
        margin:100px auto;            
        width:400px;            
        height:200px;            
        border:1px solid red;         
    }        
    .inner{            
        flex-basis:200px;            
        height:100px;            
        background:yellow;             
        flex-shrink:0;        
    }        
    .inner1{            
        flex-basis:300px;            
        height:100px;            
        background:blue;            
        flex-shrink:1;         
    }
    </style>
</head>
<body> 
    <div class="box">    
        <div class="inner">A</div>    
        <div class="inner1">B</div>
    </div>
</body>
</html>
Copy the code

As shown in figure:

If A and B both reduce the width, A sets flex-shirk to 3 and B sets flex-shirk to 2. Then the final size of A is its own width (200px)- A’s reduced width (100px * (200px * 3/(200 * 3 + 300 * 2)) = 150px, and the final size of B is its own width (300px)- B’s reduced width (100px * (300px) * 2/(200 * 3 + 300 * 2))) = 250px.

<html>
<head>    
    <style>      
    .box{            
        display: flex;            
        flex-direction: row;            
        margin:100px auto;            
        width:400px;            
        height:200px;            
        border:1px solid red;         
    }        
   .inner{            
        flex-basis:200px;            
        height:100px;            
        background:yellow;             
        flex-shrink:3;        
    }        
    .inner1{            
        flex-basis:300px;           
        height:100px;            
        background:blue;            
        flex-shrink:2;         
    }
    </style>
</head>
<body> 
    <div class="box">    
        <div class="inner">A</div>    
        <div class="inner1">B</div>
    </div>
</body>
</html>
Copy the code

As shown in figure:

Flex: 7 1 100px? Break down

Flex is a shortened form of flex-grow, flex-shrink, and flex-basis. Remember the following shrink rules:

For example, if flex is none, the calculated value is 0, 0 auto, which is equivalent to the following:

.item {flex: none; } .item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; }Copy the code

When the flex value is auto, the calculated value is 1, 1 auto, and the following is equivalent:

.item {flex: auto; } .item { flex-grow: 1; flex-shrink: 1; flex-basis: auto; }Copy the code

If flex is a non-negative number, the number is flex-grow, flex-shrink is 1, and flex-basis is 0%.

.item {flex: 1; } .item {flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }Copy the code

When flex is a length or percentage, it is considered a flex-basis value, flex-grow is 1, and flex-shrink is 1, with the following equivalence (note that 0% is a percentage and not a non-negative number) :

.item-1 {flex: 0%; } .item-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } .item-2 {flex: 24px; } .item-2 { flex-grow: 1; flex-shrink: 1; flex-basis: 24px; }Copy the code

When the value of flex is two non-negative digits, it is regarded as the value of flex-grow and flex-shrink respectively, and the flex-basis value is 0%, which is equivalent to the following:

.item {flex: 2 3; } .item { flex-grow: 2; flex-shrink: 3; flex-basis: 0%; }Copy the code

When flex is a non-negative number and a length or percentage, it is treated as the value of flex-grow and flex-basis, respectively, and flex-shrink is equal to 1.

.item {flex: 2333 3222px; } .item { flex-grow: 2333; flex-shrink: 1; flex-basis: 3222px; }Copy the code

Horizontal vertical middle implementation

Methods to achieve horizontal and vertical centering effect:

  • Use absolute + negative margin

    father{ position: relative; }. Son {position: absolute; width:100px; height:100px; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }

  • absolute + margin auto

    .father{ position: relative; }. Son {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

  • absolute + transform

    .father{ position: relative; }. Son {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

  • Absolute + calc.

    .father{ position: relative; }. Son {position: absolute; width:100px; height:100px; top: calc(50%-50px); left: calc(50%-50px); }

  • Flex layout

    .father{ display: flex; justify-content: center; / align-items: center; / subterm in the middle of the side axis /}

  • The grid layout

    .father{

    display:grid;

    align-items:center;

    justify-items:center; }

  • The table property of the CSS is added

    .father {

    display: table-cell;

    text-align: center;

    vertical-align: middle;

    }

    .son {

    display: inline-block;

    }

  • The text – align and line height

    .father{

    text-align: center;

    width: 100px;

    height: 100px;

    background: indianred;

    line-height: 100px;

    }

If you need a more detailed introduction, check out this related article.

conclusion

CSS interview questions are not too difficult, but most of the content will be the interviewer through your project to ask us questions, so we can learn CSS from the project we do, it may be more efficient.