Css interview

Write in the front: This is my personal collection of some relatively new, relatively technical points of some Css3 direction interview questions, both classic and novel, for self-study and review, not only in learning new knowledge notes, but also can be used to expand the technical stack of basic knowledge.

The Grid layout

  • Parent container declaration:
display: grid; Grid-template-columns: 100px 100px; Grid-template-rows: 33.33% 33.33%; grid-template-rows: 33.33% 33.33%; Grid-row-gap: 10px; grid-row-gap: 10px; Grid-column-gap: 10px; // indicates column spacing //repeat(3,33.3%) // for repeating values //1fr 2FR 3FR // indicates proportionally split parent container width //minmax(100px,1fr) // indicates not less than 100px, not greater than 1fr //auto-fill Grid-auto-flow :colunm; grid-auto-flow:colunm; // prioritise rows or columns (child elements go right or down) //justify-items, align-items, place-items: start end; // context-content, align-content, place-content // similar to flex vertical horizontal center propertiesCopy the code
  • Child element declaration
// set. Item-1 {grid-row: 1/2; Grid-row: 1 / span 2; grid-row: 1 / span 2; // Grid-column: 1/3; // Grid-column: 1/3; // Grid-column: 1/3; // Grid-column: 1/3; // Grid-column: 1/3; Grid-column: 1 /span 3; grid-column: 1 /span 3; // Grid-area: 1/2/ 1/2/ 1/2/ 1/2/ 1/2/ 1/2/ 1/2/ 1/2/ 1/2/ 1/2 // A row of five columns has six dividing lines, a row of three rows has four dividing lines, / / gird - area: it means the inside of the grid layout grid / / grid - line: according to the inside of the grid layout line} / * with * /. Item 1 {grid - column - start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; }Copy the code
  • Two dimensional layout
// Parent element. Box {display:grid; grid-template-areas: "header header header header header", "nav main main main main", "nav main main main main", "nav main main main main", ".footer footer footer.",} // Child element. Cell-1 {grid-area:header; } .cell-2{ grid-area:nav; } .cell-3{ grid-area:main; } .cell-4{ grid-area:footer }Copy the code

Vertical horizontal center scheme

  1. Flex layout
    .box{
        display:flex;
        justify-content: center;
        align-items: center;
    }
Copy the code
  1. The Grid layout
    .box{
        display:grid;
        justify-content: center;
        align-items: center;
    }
Copy the code
  1. The Position location
    .box{
        display:relative;
    }
    .item{
        position: absolute;
        top:50%,
        left:50%,
        margin: auto;
        transform: translate(-50%, -50%);
        
    }
Copy the code

Implement an adaptive square

1. The padding

.box{
    width:50%;
    height:0;
    padding:50%;
}
Copy the code

2. Implement with VW or VH units (compatibility)

.box{
    width:50%;
    height:50vw;
}
Copy the code

3. Margin fake elements

.box{
    width:50%;
    overflow:hidden
}
.box::berfor{
    margin-top:100%
}
Copy the code

Css skeleton screen

Filter of Css

What is landing

BFC(Block-level formatting Context)

  • How to create:
  1. Float cannot be none,position cannot be static or relative,
  2. The display of the inline – block,
  3. flex,inline-flex,
  4. The overflow is not visible
  • Features:
  1. A separate render area, independent of the outside world, defines the boundaries of float
  2. The vertical margin of two adjacent boxes belonging to the same BFC will overlap ()
  • Function:
  1. Used to clear floats
  2. Implement adaptive layout
  3. Avoid vertical margin overlay